I created a blank test page and copied the code directly from the API reference , then added an Upload Button (“#myUploadButton”), and a Themed Button (‘#myButton’).
Problems:
-
When #myUploadButton is clicked, I am unable to select more than one file. Selecting a file and then clicking #myUploadButton again to select another just replaces the first file. The upload buttons settings are set to allow 10 files. I tried .jpg and .png files, under 1MB.
-
The value of #myUploadButton is not set when a file is selected. After “uploading” a file and clicking #myButton, the function logs “Please choose a file to upload.”
Test Site
Code:
const files = $w("#myUploadButton").value;
$w("#myUploadButton").fileType = "Image"; // Site visitor can choose an image fileType
$w('#myButton').onClick( () => {
if (files.length > 0) { // Site visitor chose files
console.log("Uploading the following files:", files);
$w("#myUploadButton").uploadFiles()
.then( (uploadedFiles) => {
uploadedFiles.forEach(uploadedFile => {
console.log("File url:" + uploadedFile.fileUrl);
})
console.log("Upload successful.");
})
.catch( (uploadError) => {
console.log("File upload error: " + uploadError.errorCode);
console.log(uploadError.errorDescription);
} );
}
else { // Site visitor clicked button but didn't choose any files
console.log("Please choose a file to upload.")
}
} );
Tried to replicate on Wix editor. Got the same error. Cannot select multiple files. First file gets replaced.
Perhaps it is a bug? Try opening a support ticket. I can never really remember which was is the correct way in reporting a suspected bug. The forum and staff are frequently changing.
Thanks for checking the code. I submitted a request here . I’ll report back if I hear anything.
Did you set the max number of files in the Upload Button settings panel?
I tried this myself, and this is what I answered someone else in another thread:
Here’s what I did:
$w("#uploadButton").fileType = "Image";
$w("#uploadButton").onChange( async (event) => {
let files = event.target.value;
if (files.length > 0) { // Site visitor chose files
console.log("Uploading the following files:", files);
let uploadedFiles = await $w("#uploadButton").uploadFiles();
console.log(uploadedFiles);
} else {
console.log("Please choose a file to upload.")
}
});
I used the upload button’s onChange() event to ensure that there was something there. Maybe that’s the difference?
Oh, and btw - the above code was in my page’s onReady().
Did not use any code.
All I did was set the upload button to 10 files and tested it. It does not select multiple files. It only selects 1. I tested it on a secondary site again — still same result. I don’t think the upload button is working. It is not allowing for multiple files to be selected.
1 Like
@code-queen Strange. I’ve actually been working on a site using uploadFiles() and it’s been working fine for me all day - yesterday as well. In fact, the answer I posted above was in response to another post just a couple of hours ago. I cobbled together a quickie test, tried it out, it worked, and I posted the code as an answer.
Maybe 10 doesn’t work? Sounds stupid, but maybe try 4 or 3 or 5.
Looks like the async function does the trick, with any number (above 1) on a published site. Below is the modified code I used, keeping it as close as possible to the API example, using the two button approach.
A couple caveats:
This method seems a bit half-baked, but I think I can get it to work now. Thanks everyone!
$w.onReady(function () {
$w("#myUploadButton").fileType = "Image"; // Site visitor can choose an image fileType
$w("#myButton").onClick(async () => {
const files = await $w("#myUploadButton").value;
if (files.length > 0) {
// Site visitor chose files
console.log("Uploading the following files:", files);
$w("#myUploadButton")
.uploadFiles()
.then((uploadedFiles) => {
uploadedFiles.forEach((uploadedFile) => {
console.log(uploadedFile);
});
console.log("Upload successful.");
})
.catch((uploadError) => {
console.log("File upload error: " + uploadError.errorCode);
console.log(uploadError.errorDescription);
});
} else {
// Site visitor clicked button but didn't choose any files
console.log("Please choose a file to upload.");
}
});
});
@user234rdfg Glad you got it worked out.
Strange that multiple files doesn’t work in Preview. I put the example together testing in Preview and it all worked great.
Hate to open this back up, but after porting the working code from the dummy site in the original post to my actual site, the upload button still will not select more than one file at a time - in Preview or Live.
I copied the exact code, button/settings, and ID’s from the dummy site to the actual site, using both @yisrael-wix 's code and mine. Both work on the dummy site, both do not work on the other site.
I haven’t heard anything from Wix after submitting the support ticket, but I’m going to assume it’s a bug with the upload button.
Did you set the max number of files in the Upload Button settings panel?
@yisrael-wix yes, 3, 4, 5, 10… none of those work. Also tried replacing the button, and changing the max files setting.
I’m bringing this thread up again as I have the exact same issue. Only one file can be selected for upload. Any further selections replace the file previously selected.
The answers in this thread seems to me like they miss the point, they perform the upload directly upon click on the upload button which of course works as it always has for single files. That’s not what I nor (I assume) the OP need.
We need to be able to either select multiple files from the same file selector or press the upload button several times to select another file and add it to the Upload button’s value array. Then we want to press a regular button to actually perform the upload. The problem is, the value array of the Upload button only contains the last file selected so only that gets uploaded.
I hope someone can help getting this to work by selecting multiple files before the actual upload.
I tried this out myself (again) and it seems to work just fine. Here’s my test code (again):
$w.onReady(function () {
$w("#uploadButton").fileType = "Image";
$w("#uploadButton").onChange(async (event) => {
let files = event.target.value;
if (files.length > 0) { // Site visitor chose files
console.log("Uploading the following files:", files);
let uploadedFiles = await $w("#uploadButton").uploadFiles()
console.log(uploadedFiles);
} else { // Site visitor clicked button but didn't choose any files
console.log("Please choose a file to upload.")
}
});
});
I set the Max number of files to 4:
When I test my code, I select 3 images to upload, and all three images appear in the console for both console.log() statements.
Note: The multi-select feature of the Upload button requires that you select more than one file in the file selection pane. The onChange() event handler will then return all of the files selected. However, if you select only one file, and then again select only one other file, the onChange() event handler will only return the last file that was selected.
From your code I assume you click only once on the Upload button and select all 3 files at once in the same file selector? I can only select one file. Max number of files makes no difference.
@andreas39412 You are correct in your assumption. I do like this:
I don’t know why this isn’t working for you. If you suspect that there is some sort of bug, you should report this to Wix Customer Care for evaluation and escalation if a problem is found.
@yisrael-wix Thank you, I expect I will report it. It may be a Mac issue. Anyway, I don’t understand why the actual upload has to be called from the onChange event. I expected that one could add a number of files to the value array in the Upload button and then afterwards call the uploadFiles function from another button. If it only works the way you describe you can only upload files that you can select at once, meaning from the same directory. That hardly seems like a good solution.
@andreas39412 I use a Mac.
I only used onChange() for my test. How you implement is up to you.
You can add a number of files to the value array, but only by selecting all of the desired files at once. Each time you click the UploadButton, it clears the array and then fills with the selected files.
@yisrael-wix Ok, thanks for the clarification which should clearly have been part of the function documentation. It’s a strange limitation that we just have to accept. It’s not very intuitive and we’ll have to waste screen real estate to explain how it works to the user (if it even works on all platforms).
@andreas39412 Thank you for your feedback regarding this issue. I will bring this up with the relevant product managers.
@yisrael-wix I got it to work but the upload works only in published mode, not in preview. You might want to bring it to their attention also.
