User File Upload

Ask the community
,
1

I would like to offer site visitors the ability/option to upload a file (resume). I am attempting to use the process and code provided from “How to use the Upload Button with Code” help. I have the buttons and text box/image in place as directed. I’ve placed the provided code and modified it, seemingly appropriately, to match the particulars of my site, ie, .text24. All of the warning banners are gone, except the top line still reports an unused parameter, “event”. I do not have experience with this coding, so sorry in advance. Here is the code provided, including my variable name changes:

export function button6_click(event) {
if($w(“#uploadButton1”).value.length > 0) {
$w(“#text24”).text = Uploading ${$w("#uploadButton1").value[0].name};
$w(“#uploadButton1”).startUpload()
.then( (uploadedFile) => {
$w(“#text24”).text = “Upload successful”;
$w(“#image10”).src = uploadedFile.url;
})
.catch( (uploadError) => {
$w(“#text24”).text = “File upload error”;
console.log(Error: ${uploadError.errorCode});
console.log(uploadError.errorDescription);
});
}
else {
$w(“#text24”).text = “Please choose a file to upload.”;
}
}

2

Hi rhoward,

Maybe you can try to use an " Upload Button " instead of a regular " Button ". See screenshot below.

1156×477 142 KB

Then, make sure to add the " onChange " event to the new " uploadButton1 ". See screenshot below.

973×581 204 KB

Lastly, add your code above into the function body:

export function uploadButton1_change(event, $w) { … code here }

Here is your revised code:

export function uploadButton1_change(event, $w) { // ONLY CODE CHANGE NEEDED
if($w(" #uploadButton1 “).value.length > 0) {
$w(” #text24 “).text = Uploading ${$w(" [#uploadButton1](https://www.wix.com/code/home/forum/search/posts%3Fquery=%23uploadButton1) ").value[0].name};
$w(” #uploadButton1 “).startUpload()
.then( (uploadedFile) => {
$w(” #text24 “).text = “Upload successful”;
$w(” #image10 “).src = uploadedFile.url;
})
.catch( (uploadError) => {
$w(” #text24 “).text = “File upload error”;
console.log(Error: ${uploadError.errorCode});
console.log(uploadError.errorDescription);
});
}
else {
$w(” #text24 ").text = “Please choose a file to upload.”;
}
}

Hope this helps.

Nick

3

Hello Nick. Thank you very much for your response. I ended up creating a form and establishing a link to a dataset. I did end up using the Upload Button. It was rather confusing about how to use it, but with the form, it fell together nicely. Thanks again!
Richard