I’m trying to add an UPLOAD BUTTON to a form that i’m creating - the button does not give me the option to link it, like the rest of my form fields.
Please see attached. Any help is appreciated!
I don’t have to ability to connect this button to data…
I am going to need this to work nicely as well and can confirm I do not see a db connection icon/popup either for this element from the user input fields (upload button). #bugreport
I moved the post to feature request and can tell you it is not a bug and is coming soon.
Meantime, you can use code to connect an upload button to the form while connecting the rest of the elements the regular way.
Follow the next steps:
$w('#myButton').onClick( () => {
if ($w("#myUploadButton").value.length > 0) {
// user chose a file
console.log(`Uploading '${$w("#myUploadButton").value[0].name}'`);
$w("#myUploadButton").startUpload()
.then( (uploadedFile) => {
console.log("Upload successful. File is available here:");
console.log(uploadedFile.url);
$w("#myDataset").setFieldValue("image", uploadedFile.url);
$w("#myDataset").save()
.then( (item) => {
console.log("Save successful");
let fieldValue = item.fieldName;
} )
.catch( (err) => {
let errMsg = err;
} );
} )
.catch( (uploadError) => {
console.log(`File upload error: ${uploadError.errorCode}`);
console.log(uploadError.errorDescription);
} );
} else {
// user clicked button but didn't chose a file
console.log("Please choose a file to upload.")
}
} );
Hi Shay,
Thank you for your response. I look forward to seeing this feature come to life!
I appreciate your help.
I’ve been confused by this missing feature too and need it.
It is coming soon. We will let you know.
I’m not sure where this code would go? I’m rather confused by the instructions and where to implement this code?
Hi Jason,
In the page that contains your upload button, open the code editor (the bar at the bottom) and paste the code there. Make sure the element IDs for your page elements correspond to the IDs in the code (submit button, upload button and dataset).
You can of course change the IDs in code or for the elements to suit your needs.
Check out the coding section and upload button article for more information:
Ah ok, I’ll try it out with changing the ID’s 
Would you think that the instructions of this Wix Article may be better: Velo Tutorial: Using the Upload Button with Code | Help Center | Wix.com?
There’s always room for improvement 
If you have any specific parts that are not understood I can pass it to our documentation team.
Yeah, I submitted a feedback form, I and some other people on the Facebok Wix Design Experts group agree that the instructional articles not clear enough are.
I hope the upload button is soon to work 
Tomer,
I went ahead and did what you said with updating the ID’s yet it still says there are errors in my Javascript, here’s and example of what I did to the code, does it look right or did I oversee something:
Can you post the code here in a “code block” and also the errors you are getting?
Hello Tomer,
In the properties panel my Select File button is called ‘Upload’ and the Submit button is called ‘Submit’. Here is the modified code where I inputed all of the new ID’s:
$w('#submit').onClick( () => {
if ($w("#upload").value.length > 0) {
// user chose a file
console.log(`Uploading '${$w("upload").value[0].name}'`);
$w("#upload").startUpload()
.then( (uploadedFile) => {
console.log("Upload successful. File is available here:");
console.log(uploadedFile.url);
$w("#Submit-Organizations").setFieldValue("image", uploadedFile.url);
$w("#Submit-Organizations").save()
.then( (item) => {
console.log("Save successful");
let fieldValue = item.fieldName;
} )
.catch( (err) => {
let errMsg = err;
} );
} )
.catch( (uploadError) => {
console.log(`File upload error: ${uploadError.errorCode}`);
console.log(uploadError.errorDescription);
} );
} else {
// user clicked button but didn't chose a file
console.log("Please choose a file to upload.");
}
} );
And then here are the following errors that I get (which I get normally no matter what code from the Wix documentation I have attempted to use):
There was an error in your script
Error: Can't use $w for selection components before the page is ready
There was an error in your script
Error: Can't use $w for selection components before the page is ready
I really hope the upload button ‘connect to database’ will soon be available,
You are getting the error because you are using “$w” before the page is ready.
In order to fix that, you need to put your code inside the onReady callback:
$w.onReady(function () {
// Paste your code here:
});
Let me know if it solved the problem.
Hey Tomer,
Sadly, it didn’t fix the issue, see this close-up picture:
and it also says with the semicolin is an ‘unexpected token’ but when I remove it other errors come and it says it’s missing a semicolon…odd
Oh, and here are the new errors with new code added:
public/pages/qv1nm.js: Unexpected token (29:3) 27 | console.log("Please choose a file to upload."); 28 | } > 29 | }); | ^
There was an error in your script
Error: Can't use $w for selection components before the page is ready
There was an error in your script
TypeError: e is not a function
Looks like you are missing the closing braces and parenthesis for the onReady callback, maybe it got deleted somehow.
The following code is your code that I pasted in the onReady callback, you can delete everything and use it:
$w.onReady(function () {
$w('#submit').onClick( () => {
if ($w("#upload").value.length > 0) {
// user chose a file
console.log(`Uploading '${$w("upload").value[0].name}'`);
$w("#upload").startUpload()
.then( (uploadedFile) => {
console.log("Upload successful. File is available here:");
console.log(uploadedFile.url);
$w("#Submit-Organizations").setFieldValue("image", uploadedFile.url);
$w("#Submit-Organizations").save()
.then( (item) => {
console.log("Save successful");
let fieldValue = item.fieldName;
} )
.catch( (err) => {
let errMsg = err;
} );
} )
.catch( (uploadError) => {
console.log(`File upload error: ${uploadError.errorCode}`);
console.log(uploadError.errorDescription);
} );
} else {
// user clicked button but didn't chose a file
console.log("Please choose a file to upload.");
}
} );
});
Hey Tomer,
This time it said the code was fine but when I ran it, it still encountered one error. I tried to use the form nevertheless and the image didn’t work. Here’s the new error:
There was an error in your script
Error: Can't use $w for selection components before the page is ready
Spoke with Jason and we resolved the issues in the code, it is now working as expected.