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.
This endpoint uses the uploadToken
from the response for authorization.
No additional authorization is needed.
PUT {{generateFileResumableUploadUrlResponse.uploadUrl}}/{{generateFileResumableUploadUrlResponse.uploadToken}}
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. |
In this example we use tus-js-client to implement a resumable upload using the TUS protocol.
async function resumableFileUpload(
resumableUploadUrlResponse: GenerateFileResumableUploadUrlResponse,
mimeType: string,
): Upload {
// Get the file content to upload.
const fileName = "imageExample.jpg";
const fileContent = await fs.createReadStream(
path.join(__dirname, "..", "files", fileName),
);
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 axios.put(
`${resumableUploadUrlResponse.uploadUrl}/${resumableUploadUrlResponse.uploadToken}`,
{},
{ params: { filename: fileName } },
);
}
Notes:
onFileDescriptorFileReady()
and onFileDescriptorFileFailed()
events. Learn more about knowing when a file is ready.axios
.{
"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"
}
}
Errors from this endpoint will include an HTTP status code.
After making the REST HTTP request, you can either display the media on your site directly from the Media Manager, or you can set the uploaded media to $w
elements.
To display the media files on the frontend of your site with code, you first need to retrieve the file's Media Manager URL.
To retrieve the Media Manager URL:
getFileDescriptor()
, passing in file.id
from the Upload API's response object as its only parameter.media
property in the FileDescriptor
object that was returned in the previous step.$w
element, set the value of the associated media
property to the element's src
property.