How to Upload to Wix and Use the File
Velo How-To: Setting Up The File Upload Field With Custom Form Handler
The typical file upload scenario is a two-office process. Start your site visitor chooses the file to upload and then they trigger the actual upload. This normally requires at least two folio elements, an upload button element and a regular button. The file types of the images, documents, videos, and audios that tin can be uploaded are listed here. Let'southward create a simple form that uploads an image to improve understand how this procedure works. We'll add elements to a page, wire some elements to lawmaking, and then test the form.
@ velo
Velo by WixVelo is a full-stack development platform that empowers you to chop-chop build, manage and deploy professional person web apps.
File Upload Scenario
The typical file upload scenario is a 2-function procedure. Commencement your site visitor chooses the file to upload and then they trigger the actual upload. This ordinarily requires at least two folio elements, an upload push element and a regular push button. The site visitor chooses which file to upload by clicking the upload push button and selecting the file in a native file chooser dialog. (The site visitor can merely cull from the specified file type.) And then the site visitor clicks the regular push 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 class that uploads an prototype to better sympathise how this process works. We'll add together elements to a page, wire some elements to a fleck of code, so test the form.
Prerequisites
Earlier you create an upload form, y'all'll need to be somewhat comfortable with JavaScript lawmaking, especially event handlers and Promises.
Add together Page Elements
Add the following elements to the folio:
- An upload button for choosing a file. The upload buttons are establish in theUser Input section of theAdd together carte.
- A regular push to trigger the upload code.
- A text element to display messages to the site company.
- An image element. Any image is fine. Nosotros're only using it as a placeholder for the uploaded paradigm.
Feel free to change the blueprint and text of whatsoever of the elements nosotros've simply added.
The complete form should look something like this:
Wire Upload Code
The upload button takes care of the site company choosing the file for us. But we have to wire code to the regular button to perform the actual upload.
We'll start by calculation an onClick effect handler for the button.
Next, we'll add the code that performs the upload. In the onClick result handler add the following code so the full function is equally follows:
export function button1_click(effect) { if($w("#uploadButton1").value.length > 0) { $w("#text1").text = "Uploading " + $w("#uploadButton1").value[0].name; $w("#uploadButton1").startUpload() .then( (uploadedFile) => { $due west("#text1").text = "Upload successful"; $w("#image1").src = uploadedFile.url; }) .grab( (uploadError) => { $w("#text1").text = "File upload error"; console.log("File upload error: " + uploadError.errorCode); panel.log(uploadError.errorDescription); }); } else { $w("#text1").text = "Please choose a file to upload."; } } Let's take a wait at this code piece by piece to understand what information technology's doing.
Commencement, on line ii, nosotros check to see if the site visitor has chosen a file. We did non specify a file type, so "image" is causeless.
if($w("#uploadButton1").value.length > 0) { The
value property of the upload push returns an assortment of
File objects, each representing a file the site visitor has chosen to upload. So nosotros check its
length to come across if this array has at to the lowest degree one particular in it, meaning the site visitor has chosen at least one file.
If the array returned by
value is empty, we move to the
else on lines 15-17 to brandish a message to the site visitor in the text element.
else { $w("#text1").text = "Delight choose a file to upload."; } That ends the upload attempt. The site visitor can then cull a file and start the upload over again.
If the array has a
File element in it, meaning the site visitor chose a file to upload, we continue with the upload process.
On line 3, we offset the upload process by displaying a message to the site visitor that we are uploading the chosen file.
$west("#text1").text = "Uploading " + $w("#uploadButton1").value[0].name; Next, on line 4, nosotros telephone call the upload button's
startUpload() office, which performs the bodily upload.
$west("#uploadButton1").startUpload() Information technology returns a Promise that resolves to an
UploadedFile object with information nigh the uploaded file if the upload was successful or rejects to an
UploadError object with data almost the error that occurred if the upload was not successful.
If the upload is successful, the Promise continues with the
so() on lines 5-viii.
.so( (uploadedFile) => { $due west("#text1").text = "Upload successful"; $westward("#image1").src = uploadedFile.url; }) Hither we display a message to the site visitor saying that the upload was successful and we display the uploaded image. We display the paradigm by getting the
url property of
uploadedFile , which returns the Wix URL where the uploaded file is stored.
If the upload is unsuccessful, the Hope rejects with the
catch() on lines ix-13.
.catch( (uploadError) => { $w("#text1").text = "File upload error"; panel.log("File upload error: " + uploadError.errorCode); panel.log(uploadError.errorDescription); }); Here we display a message to the site visitor saying that the upload was not successful. Nosotros as well log the error information from the
uploadError object using its
errorCode and
errorDescription properties.
Testing
Now nosotros tin can test our form by publishing the site and attempting to upload an paradigm.
First, on the live site, permit'southward try to click theBeginning Upload push before we cull a file. We should encounter the status line change toPlease choose a file to upload.
Side by side, permit's use the upload button to choose a file and and then click theStart Upload button. We should encounter the status line alter toUploading some_file.png and then after a few moments change over again toUpload successful. The prototype we uploaded should besides be displayed on the page.
Finally, let's return to the Editor and discover the uploaded file. Select the upload push and clickManage Upload Button. In the Upload Push Settings panel, clickGet to File, which opens the images that have been received by your site. At that place you should see the epitome you just uploaded.
Previously published at https://support.wix.com/en/article/velo-tutorial-using-the-upload-push-with-lawmaking
Tags
Related Stories
Source: https://hackernoon.com/velo-how-to-setting-up-the-file-upload-field-with-custom-form-handler-uv2k34jy
0 Response to "How to Upload to Wix and Use the File"
Publicar un comentario