Package Exports

media-platform-js-sdk

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (media-platform-js-sdk) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Wix Media Platform

Wix Media Platform is a collection of services for storing, serving, uploading, and managing image, audio, and video files.

Image

Wix Media Platform provides powerful image-processing services that support resizing, cropping, rotating, sharpening, and face-detection, as well as offering a number of filters and adjustments. Images can be easily served with on-the-fly manipulations using the Wix Media Platform SDKs or Image API.

See it in action.

Audio

Wix Media Platform provides storage for professional, high-quality audio files that can then be used in commercial music-selling applications.

Video

Video files uploaded to Wix Media Platform are automatically transcoded into additional formats of various qualities, enabling video playback on any browser or Internet-connected device.

For video playback see Vidi - Adaptive video playback library.

Documents

In addition, Wix Media Platform supports uploading and distribution of documents such as Excel and Word.

JavaScript SDK

This package is an isomorphic JavaScript library (works in Node and in the browser) that provides a convenient API to access Wix Media Platform file upload service and image manipulation API.

Installation

npm install media-platform-js-sdk --save

Running the Demo

git clone git@github.com:wix/media-platform-js-sdk.git

npm start

and open http://localhost:3333/ in the browser

Instantiating the Media Platform in the Server

First, if you haven't done so yet, register at Wix Media Media Platform, Once registered you'll be issued with your own API Key, API Secret and API Endpoint.

var MediaPlatform = require('media-platform-js-sdk').MediaPlatform;

var mediaPlatform = new MediaPlatform({
  domain: <as appears in the Dashboard>,
  apiKey: <as appears in the Dashboard>,
  sharedSecret: <as appears in the Dashboard>
});

Instantiating the Media Platform in the Browser

<script src="/media-platform.min.js">

var mediaPlatform = new MP.MediaPlatform({
    domain: <as appears in the Dashboard>,
    authenticationUrl: <your authentication url - see example below>
});

Authentication URL Node.js (with express) example:

app.get('/media-platform/auth-header', function (req, res, next) {
    mediaPlatform.getAuthenticationHeader(function (error, header) {
        if (error) {
            res.status(500).send(error.message);
            return;
        }
        res.send(header);
    });
});

File Upload

Server

var fileUploader = mediaPlatform.fileUploader;
var EncodingOptions = require('media-platform-js-sdk').video.EncodingOptions;
var UploadRequest = require('media-platform-js-sdk').file.UploadRequest;
 
var uploadRequest = new UploadRequest().addTags('cat', 'fish');
fileUploader.uploadImage(<ReadStream || Buffer || string path to file>, uploadRequest || null, function (error, response) {

    if (error) {
      console.error('upload failed: ' + error.message);
      return;
    }

    console.log('upload successful: ' + response);
});

fileUploader.uploadAudio(<ReadStream || Buffer || string path to file>, uploadRequest || null, function (error, response) {
    ...
});

fileUploader.uploadDocument(<ReadStream || Buffer || string path to file>, uploadRequest || null, function (error, response) {
    ...
});

var encodingOptions = new EncodingOptions()
        .videoFormats(['mp4', 'webm', 'ogv'])
        .audioFormat('m4a');
fileUploader.uploadVideo(<ReadStream || Buffer || string path to file>, encodingOptions || null, uploadRequest || null, function (error, response) {
    ...
});

Browser

File upload from the browser is a 2 step operation:

First the signed URL and the upload token is retrieved from the server
Then a multipart/form-data request is made to the URL

In the server expose a route that returns the signed URL and upload token:

app.get('/upload/:mediaType/credentials', function(req, res, next) {

    mediaPlatform.fileUploader.getUploadUrl(apiKey, req.params.mediaType,  function (error, urlAndToken) {

        if (error) {
            res.status(500).send(error.message);
            return;
        }

        res.send(urlAndToken);
    });
    
});

From the browser GET the URL and POST the form to it, including the token in the form body

<form id="upload-form" enctype="multipart/form-data" action="" method="post" target="upload-result">
    <input id="file" name="file" type="file" accept="image/*">
    <input id="media-type" name="media_type" type="text" value="picture" hidden>
</form>
<button id="upload-button">Upload</button>

<script>
    var button = document.getElementById('upload-button');
    var form = document.getElementById('upload-form');
    
    button.addEventListener('click', function () {

        mediaPlatform.fileUploader.getUploadUrl(MP.MediaType.IMAGE, function(error, response) {
            
            if (error) {
                alert('Oops! Something went wrong.');
                return;
            }
            
            var formData = new FormData(form);
            formData.append('upload_token', response.uploadToken);

            var request = new XMLHttpRequest();
            request.responseType = 'json';
            request.addEventListener('load', function (event) {
                var imageDto = new ImageDTO(event.target.response[0]);
                var imageRequest = new ImageRequest().fromDTO('media.wixapps.net/', imageDto);
                var imageUrl = imageRequest.crop(800, 200, 1, 1).toUrl();
                var img = document.createElement('img');
                img.setAttribute('src', imageUrl.url);
            });
            request.addEventListener('error', function (event) {
                alert('Oops! Something went wrong.');
            });

            request.open('POST', response.uploadUrl);
            request.send(formData);
        })
})</script>

Image Consumption

var ImageRequest = require('media-platform-js-sdk').image.ImageRequest;

var imageRequest = new ImageRequest('media.wixapps.net/wixmedia-samples/images', '000c45e21f8a433cb3b2483dfbb659d8', 'wow.jpeg');

var url = imageRequest.fit(500, 500).negative().saturation(-90).toUrl().url;

File Management

Wix Media Platform exposes a comprehensive set of APIs tailored for the management of previously uploaded files.

var fileManager = mediaPlatform.fileManager;

Retrieve a list of uploaded files

supports both paginated and all (use with caution) requests

var ListFilesRequest = require('media-platform-js-sdk').file.ListFilesRequest;

var listFilesRequest = new ListFilesRequest()
    .asecending()
    .setCursor('c')
    .setMediaType(MediaType.IMAGE)
    .orderBy('date')
    .setSize(10)
    .setTag('dog')
    .setParentFolderId('parentFolderId');
fileManager.listFiles(listFilesRequest, callback)

Get an uploaded file metadata does not return the actual file

fileManager.getFile('fileId', callback)

Update a file metadata

var UpdateFileRequest = require('media-platform-js-sdk').file.UpdateFileRequest;

var updateFileRequest = new UpdateFileRequest()
    .setOriginalFileName('dog.jpeg')
    .setParentFolderId('folderId')
    .setTags(['dog', 'Schnauzer']);
fileManager.updateFile('fileId', updateFileRequest, callback);

Delete file Warning: the file will no longer be reachable

fileManager.deleteFile('fileId', callback);

Folder Management

Wix Media Platform supports folders

List child folders

fileManager.listFolders('folderId', callback);

Create a new folder

var NewFolderRequest = require('media-platform-js-sdk').file.NewFolderRequest;

var newFolderRequest = new NewFolderRequest()
    .setMediaType(MediaType.IMAGE)
    .setFolderName('Doberman Pinscher')
    .setParentFolderId('folderId');
fileManager.newFolder(newFolderRequest, callback);

Update a folder

var UpdateFolderRequest = require('media-platform-js-sdk').file.UpdateFolderRequest;

var updateFolderRequest = new UpdateFolderRequest()
    .setFolderName('Doberman Pinscher');
fileManager.updateFolder('folderId', updateFolderRequest, callback);

Delete a folder this will not delete the folder content

fileManager.deleteFolder('folderId', callback);

Collection Management

The collection service enables the creation, management and publishing of item groups such as curated image galleries, audio playlist etc.

var collectionManager = mediaPlatform.collectionManager;

Create a new collection

var NewCollectionRequest = require('media-platform-js-sdk').collection.NewCollectionRequest;
var NewItemRequest = require('media-platform-js-sdk').collection.NewItemRequest;

var newCollectionRequest = new NewCollectionRequest()
    .setType('dog')
    .setPrivateProperties({prop: 'value'})
    .setPublicProperties({prop: 'value'})
    .setTags(['Doberman', 'Pinscher'])
    .setThumbnailUrl('http://this.is.a/collection.jpeg')
    .setTitle('Dogs Galore')
    .setItems([
        new NewItemRequest()
            .setType(MediaType.AUDIO)
            .setPrivateProperties({cat: 'fish'})
            .setPublicProperties({bark: 'loud'})
            .setTags(['dog', 'bark'])
            .setTitle('Whof')
    ]);
collectionManager.newCollection(newCollectionRequest, callback);

List collections

collectionManager.listCollections('dog', callback);

Get collection

collectionManager.getCollection('collectionId', callback);

Update collection

var UpdateCollectionRequest = require('media-platform-js-sdk').collection.UpdateCollectionRequest;

var updateCollectionRequest = new UpdateCollectionRequest()
    .setPrivateProperties({prop: 'value'})
    .setPublicProperties({prop: 'value'})
    .setTags(['cats', 'purr'])
    .setThumbnailUrl('http://this.is.a/collection.jpeg')
    .setTitle('Cats Galore');
collectionManager.updateCollection('collectionId', updateCollectionRequest, callback);

Publish collection

collectionManager.publishCollection('collectionId', callback);

Delete collection

collectionManager.deleteCollection('collectionId', callback);

Add items at the beginning of a collection

var NewItemRequest = require('media-platform-js-sdk').collection.NewItemRequest;

var addItemRequests = [
    new NewItemRequest()
        .setType('dog')
        .setPrivateProperties({prop: 'value'})
        .setPublicProperties({prop: 'value'})
        .setTags(['Doberman', 'Pinscher'])
        .setTitle('Doberman'),
    new NewItemRequest()
        .setType('dog')
        .setPrivateProperties({prop: 'value'})
        .setPublicProperties({prop: 'value'})
        .setTags(['Doberman', 'Pinscher'])
        .setTitle('Pinscher')
];
collectionManager.prependItems('collectionId', addItemRequests, callback);

Add items to the end of a collection

var NewItemRequest = require('media-platform-js-sdk').collection.NewItemRequest;

var addItemRequests = [
    new NewItemRequest()
        .setType('dog')
        .setPrivateProperties({prop: 'value'})
        .setPublicProperties({prop: 'value'})
        .setTags(['Doberman', 'Pinscher'])
        .setTitle('Doberman')
];
collectionManager.appendItems('collectionId', addItemRequests, callback);

Add items before an exiting item in a collection

var NewItemRequest = require('media-platform-js-sdk').collection.NewItemRequest;

var addItemRequests = [
    new NewItemRequest()
        .setType('dog')
        .setPrivateProperties({prop: 'value'})
        .setPublicProperties({prop: 'value'})
        .setTags(['Doberman', 'Pinscher'])
        .setTitle('Doberman')
];
collectionManager.insertBefore('collectionId', 'itemId', addItemRequests, callback);

Add items after an exiting item in a collection

var NewItemRequest = require('media-platform-js-sdk').collection.NewItemRequest;

var addItemRequests = [
    new NewItemRequest()
        .setType('dog')
        .setPrivateProperties({prop: 'value'})
        .setPublicProperties({prop: 'value'})
        .setTags(['Doberman', 'Pinscher'])
        .setTitle('Doberman')
];
collectionManager.insertAfter('collectionId', 'itemId', addItemRequests, callback);

Update exiting items in a collection

var UpdateItemRequest = require('media-platform-js-sdk').collection.UpdateItemRequest;

var updateItemRequests = [
    new UpdateItemRequest()
        .setId('id1')
        .setType(MediaType.AUDIO)
        .setPrivateProperties({prop: 'value'})
        .setPublicProperties({prop: 'value'})
        .setTags(['moshe', 'chaim'])
        .setTitle('olala'),
    new UpdateItemRequest()
        .setId('id2')
        .setType(MediaType.AUDIO)
        .setPrivateProperties({prop: 'value'})
        .setPublicProperties({prop: 'value'})
        .setTags(['moshe', 'chaim'])
        .setTitle('olala')
];
collectionManager.updateItems('collectionId', updateItemRequests, callback);

Move items to the start of the collection

collectionManager.moveToStart('collectionId', ['id1', 'id2'], callback);

Move items to the end of the collection

collectionManager.moveToEnd('collectionId', ['id1', 'id2'], callback);

Move items before another item

collectionManager.moveBefore('collectionId', 'itemId', ['id1', 'id2'], callback);

Move items after another item

collectionManager.moveAfter('collectionId', 'itemId', ['id1', 'id2'], callback);

Delete items from a collection

collectionManager.deleteItems('collectionId', ['id1', 'id2'], callback);

Reporting Issues

Please use the issue tracker to report issues related to this library, or to the Wix Media Platform API in general.

License

This library uses the Apache License, version 2.0.

About Wix

Wix.com is a leading cloud-based web development platform with more than 86 million registered users worldwide. Our powerful technology makes it simple for everyone to create a beautiful website and grow their business online.

About Google Cloud Platform

Google Cloud Platform enables developers to build, test and deploy applications on Google’s reliable infrastructure. It offers computing, storage and application services for web, mobile and backend solutions.