Resumable Upload API

This article demonstrates how to use the response object from generateFileResumableUploadUrl() to upload a file to a site's Media Manager.

Note: Due to limits on the size and duration of files that you can upload, we recommend using importFile(). See Wix Media: Supported Media File Types and File Sizes for more details.

Authorization

This endpoint uses the uploadToken from the response for authorization. No additional authorization is needed.

Syntax

PUT {{generateFileResumableUploadUrlResponse.uploadUrl}}/{{generateFileResumableUploadUrlResponse.uploadToken}}

html | Copy Code

Query Params

Name	Type	Optional	Description
filename	string	no	File name that appears in the Media Manager. Include the file's extension in the name to prevent potential errors.

Example

Implement a Resumable Upload Client using TUS Protocol

In this example we use tus-js-client to implement a resumable upload using the TUS protocol.

Request

async function resumableFileUpload(resumableUploadUrlResponse: GenerateFileResumableUploadUrlResponse): Upload {
  // get the file content to upload
  const fileName = 'imageExample.jpg';
  const fileContent = await fs.createReadStream(path.join(__dirname, '..', 'files', fileName));

  const mimeType = 'image/jpeg';

  const params = {
    filename: fileName,
    contentType: mimeType,
    token: resumableUploadUrlResponse.uploadToken
  };

  // Wrap the resumable upload session in a promise to wait for the upload to finish.
  await new Promise(async (resolve, reject) => {
    // Create a new TUS upload.
    const upload = new tus.Upload(fileContent, {
      // Use the uploadUrl from the response of the generate URL endpoint.
      endpoint: resumableUploadUrlResponse.uploadUrl,
      // Enable tus-js-client to automatically retry on errors.
      retryDelays: [0, 3000, 5000, 10000, 20000],
      // TSend parameters to the upload server to indentify the file and authentication token.
      metadata: {
        filename: fileName,
        contentType: mimeType,
        token: resumableUploadUrlResponse.uploadToken
      },
      // Callback for errors that can't be fixed using retries.
      onError: function (error) {
        console.log('Failed because: ' + error);
        reject(error);
      },
      // Callback for reporting upload progress.
      onProgress: function (bytesUploaded, bytesTotal) {
        var percentage = (bytesUploaded / bytesTotal * 100).toFixed(2);
        console.log(bytesUploaded, bytesTotal, percentage + '%');
      },
      // Callback for once the upload is completed.
      onSuccess: function () {
        console.log('Download %s from %s', fileName, upload.url);
        resolve(true);
      }
    });

    upload.start();
  });

  // PUT request to finalize the upload.
  // Note that we concatenate the URL and token of the resumable upload response.
  const result = await httpClient.put(
    `${resumableUploadUrlResponse.uploadUrl}/${resumableUploadUrlResponse.uploadToken}`,
    {}, { params: { filename: fileName } }
  );
}

typescript | Copy Code

Response

{
  "file": {
    "id": "2acbb8_86485e224dd84143ba2f228777217bb7~mv2.jpeg",
    "displayName": "file.jpg",
    "url": "https://static.wixstatic.com/media/2acbb8_86485e224dd84143ba2f228777217bb7~mv2.jpeg",
    "parentFolderId": "media-root",
    "hash": "cf96f0567ed967f02bc9580ab8db86be",
    "sizeInBytes": "15359",
    "private": false,
    "mediaType": "IMAGE",
    "media": {
      "image": {
        "image": "wix:image://v1/0abec0_b291a9349a0b4da59067f76287e386fb~mv2.jpg/leon.jpg#originWidth=3024&originHeight=4032",
        "faces": []
      }
    },
    "operationStatus": "READY",
    "thumbnailUrl": "https://static.wixstatic.com/media/2acbb8_86485e224dd84143ba2f228777217bb7~mv2.jpeg",
    "labels": [],
    "createdDate": "2022-09-11T15:13:24.000Z",
    "updatedDate": "2022-09-11T15:13:24.000Z"
  }
}

json | Copy Code

Status/Error Codes

Errors from this endpoint will include an HTTP status code.

Was this helpful?