File Upload Scenario The typical file upload scenario is a two-part process. First your site visitor chooses the file to upload and then they trigger the actual upload. This usually requires at least two page elements, an upload button element and a regular button. The site visitor chooses which file to upload by clicking the upload button and selecting the file in a native file chooser dialog. (The site visitor can only choose from the specified file type.) Then the site visitor clicks the regular button to trigger some code that performs the upload. Note The file types of the images, documents, videos, and audios that can be uploaded are listed here . Upload Example Let's create a simple form that uploads an image to better understand how this process works. We'll add elements to a page, wire some elements to a bit of code, and then test the form. Prerequisites Before you create an upload form, you'll need to be somewhat comfortable with JavaScript code, especially and Promises. event handlers Add Page Elements Add the following elements to the page: An upload button for choosing a file. The upload buttons are found in the section of the menu. User Input Add A regular button to trigger the upload code. A text element to display messages to the site visitor. An image element. Any image is fine. We're only using it as a placeholder for the uploaded image. Feel free to change the design and text of any of the elements we've just added. The complete form should look something like this: Wire Upload Code The upload button takes care of the site visitor choosing the file for us. But we have to wire code to the regular button to perform the actual upload. We'll start by an onClick event handler for the button. adding Next, we'll add the code that performs the upload. In the onClick event handler add the following code so the full function is as follows: { ($w( ).value.length > ) {
    $w( ).text = + $w( ).value[ ].name;
    $w( ).startUpload()
      .then( {
        $w( ).text = ;
        $w( ).src = uploadedFile.url;
      })
      .catch( {
        $w( ).text = ; .log( + uploadError.errorCode); .log(uploadError.errorDescription);
      });
  } {
    $w( ).text = ;
  }
} export ( ) function button1_click event if "#uploadButton1" 0 "#text1" "Uploading " "#uploadButton1" 0 "#uploadButton1" ( ) => uploadedFile "#text1" "Upload successful" "#image1" ( ) => uploadError "#text1" "File upload error" console "File upload error: " console else "#text1" "Please choose a file to upload." Let's take a look at this code piece by piece to understand what it's doing. First, on line 2, we check to see if the site visitor has chosen a file. We did not specify a file type, so "image" is assumed. ($w( ).value.length > ) { if "#uploadButton1" 0 The property of the upload button returns an array of objects, each representing a file the site visitor has chosen to upload. So we check its to see if this array has at least one item in it, meaning the site visitor has chosen at least one file. value File length If the array returned by is empty, we move to the on lines 15-17 to display a message to the site visitor in the text element. value else {
  $w( ).text = ;
} else "#text1" "Please choose a file to upload." That ends the upload attempt. The site visitor can then choose a file and start the upload again. If the array has a element in it, meaning the site visitor chose a file to upload, we continue with the upload process. File On line 3, we start the upload process by displaying a message to the site visitor that we are uploading the chosen file. $w( ).text = + $w( ).value[ ].name; "#text1" "Uploading " "#uploadButton1" 0 Next, on line 4, we call the upload button's function, which performs the actual upload. startUpload() $w( ).startUpload() "#uploadButton1" It returns a Promise that resolves to an object with information about the uploaded file if the upload was successful or rejects to an object with information about the error that occurred if the upload was not successful. UploadedFile UploadError If the upload is successful, the Promise continues with the on lines 5-8. then() .then( {
  $w( ).text = ;
  $w( ).src = uploadedFile.url;
}) ( ) => uploadedFile "#text1" "Upload successful" "#image1" Here we display a message to the site visitor saying that the upload was successful and we display the uploaded image. We display the image by getting the property of , which returns the Wix URL where the uploaded file is stored. url uploadedFile If the upload is unsuccessful, the Promise rejects with the on lines 9-13. catch() .catch( {
  $w( ).text = ; .log( + uploadError.errorCode); .log(uploadError.errorDescription);
}); ( ) => uploadError "#text1" "File upload error" console "File upload error: " console Here we display a message to the site visitor saying that the upload was not successful. We also log the error information from the object using its and properties. uploadError errorCode errorDescription Testing Now we can test our form by publishing the site and attempting to upload an image. First, on the live site, let's try to click the button before we choose a file. We should see the status line change to . Start Upload Please choose a file to upload Next, let's use the upload button to choose a file and then click the button. We should see the status line change to and then after a few moments change again to . The image we uploaded should also be displayed on the page. Start Upload Uploading some_file.png Upload successful Finally, let's return to the Editor and find the uploaded file. Select the upload button and click . In the Upload Button Settings panel, click , which opens the images that have been received by your site. There you should see the image you just uploaded. Manage Upload Button Go to File Previously published at https://support.wix.com/en/article/velo-tutorial-using-the-upload-button-with-code

5 Hot Velo Practices to Test and Debug Your Website Code

How To Setup Event Tracking with Velo by Wix

Develop Smarter, Deliver Faster

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

Velo How-To: Setting Up The File Upload Field With Custom Form Handler

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

5 Hot Velo Practices to Test and Debug Your Website Code

48 Stories To Learn About Coding With Velo

5 Hot Velo Practices to Test and Debug Your Website Code

73 Stories To Learn About Velo

A Custom Chart by Using the HTML Component Plainly Explained

5 Hot Velo Practices to Test and Debug Your Website Code

48 Stories To Learn About Coding With Velo

5 Hot Velo Practices to Test and Debug Your Website Code

73 Stories To Learn About Velo

A Custom Chart by Using the HTML Component Plainly Explained

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps