Search.../

uploadFiles( )

Uploads the files that the site visitor has chosen.

Description

The uploadFiles() function triggers the upload of the files in the upload button's value property.

The uploadFiles() function allows you to upload image, video, audio, document, and gallery (both images and video) files. You can upload multiple image, video, and gallery files at a time. Use the fileLimit property to set the number of files you can upload at a time.

Note that this function does not yet support multiple audio and document file uploads. You can only upload audio and document files one at a time, and the fileLimit property is restricted to 1.

The upload button does not accept files larger than certain sizes, depending on the file type. Maximum allowed file sizes are listed here.

uploadFiles() returns promptly (meaning, it does not attempt to contact the upload server) with UploadError when either the validityState's fileSizeExceedsLimit or fileTypeNotAllowed property is true.

Note: This function replaces the deprecated startUpload(). The deprecated function will continue to work, but it will not receive updates. To keep any existing code compatible with future changes, see the migration instructions.

Syntax

function uploadFiles(): Promise<Array<UploadedFile>>

uploadFiles Parameters

This function does not take any parameters.

Returns

Fulfilled - Resolves when the file upload is completed and returns an array of UploadedFile objects. Rejected - Rejects if the file upload fails and returns an UploadError object, which contains the error code and description.

Return Type:

Promise<Array<UploadedFile>>
NAME
TYPE
DESCRIPTION
width
number

Width of an uploaded image or video file.

height
number

Height of an uploaded image or video file.

duration
number

Duration (in milliseconds) of an uploaded audio file.

fileUrl
string

URL of the successfully uploaded file.

fileName
string

Internal file name of the uploaded file, generated by the Media Manager. The name is the string located in the file's URL. Click here to learn more.

originalFileName
string

Original name of the uploaded file.

Was this helpful?

Start a file upload

Copy Code
1$w("#myUploadButton").uploadFiles()
2 .then( (uploadedFiles) => {
3 uploadedFiles.forEach(uploadedFile => {
4 console.log('File url:', uploadedFile.fileUrl);
5 })
6 })
7 .catch( (uploadError) => {
8 let errCode = uploadError.errorCode; // 7751
9 let errDesc = uploadError.errorDescription; // "Error description"
10} );
Typical file upload scenario

This example uploads multiple files when the site visitor clicks a button. First it sets the type of file a site visitor can choose (in this case, an image). Then the example checks to see if the site visitor chose files using the upload button. If files were chosen, it triggers the uploadFiles() function and logs the status of the file upload when it completes successfully or with an error.

Copy Code
1const files = $w("#myUploadButton").value;
2$w("#myUploadButton").fileType = "Image"; // Site visitor can choose an image fileType
3$w('#myButton').onClick( () => {
4 if (files.length > 0) { // Site visitor chose files
5 console.log("Uploading the following files:", files);
6 $w("#myUploadButton").uploadFiles()
7 .then( (uploadedFiles) => {
8 uploadedFiles.forEach(uploadedFile => {
9 console.log("File url:" + uploadedFile.fileUrl);
10 })
11 console.log("Upload successful.");
12 })
13 .catch( (uploadError) => {
14 console.log("File upload error: " + uploadError.errorCode);
15 console.log(uploadError.errorDescription);
16 } );
17 }
18 else { // Site visitor clicked button but didn't choose any files
19 console.log("Please choose a file to upload.")
20 }
21} );
22
23