# upload button

**URL:** <https://forum.wixstudio.com/t/upload-button/20302>\
**Category:** Ask the community\
**Tags:** code, question\
**Created:** [September 10, 2019, 7:38pm UTC](https://forum.wixstudio.com/t/upload-button/20302 "2019-09-10T19:38:27Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![talmizrah](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/talmizrah/32/14153_2.png) [@talmizrah](https://forum.wixstudio.com/u/talmizrah)\
**Post date:** [September 10, 2019, 7:38pm UTC](https://forum.wixstudio.com/t/upload-button/20302/1 "2019-09-10T19:38:27Z")

</div>

Hello everyone,  
Is there a way to add/code an upload input/button, where the user can add several images, as apposed to only one?  
Thank you  
Tal

---

<div class="post-metadata">

**Author:** ![givemeawhisky](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/givemeawhisky/32/5383_2.png) [@givemeawhisky](https://forum.wixstudio.com/u/givemeawhisky)\
**Post date:** [September 10, 2019, 8:05pm UTC](https://forum.wixstudio.com/t/upload-button/20302/2 "2019-09-10T20:05:54Z")

</div>

Yisrael has mentioned this in a previous post about the same question…  
_This is currently under development._  
_Meanwhile, you can add multiple UploadButton components to your page and then when you click your “Save files” button, have it do startUpload() for all buttons that have a selected file._

You can also look at using media gallery fields in your dataset.  
[https://support.wix.com/en/article/displaying-media-uploaded-in-your-media-gallery-field-type](https://support.wix.com/en/article/displaying-media-uploaded-in-your-media-gallery-field-type)

In the meanwhile have a read of this previous forum post here and see if this helps you.  
[https://www.wix.com/corvid/forum/community-discussion/uploading-multiple-images-to-a-collection-as-separate-items](https://www.wix.com/corvid/forum/community-discussion/uploading-multiple-images-to-a-collection-as-separate-items)

---

<div class="post-metadata">

**Author:** ![talmizrah](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/talmizrah/32/14153_2.png) [@talmizrah](https://forum.wixstudio.com/u/talmizrah)\
**Post date:** [September 11, 2019, 8:30pm UTC](https://forum.wixstudio.com/t/upload-button/20302/3 "2019-09-11T20:30:19Z")

</div>

Thank you for your thorough answer.

do you have any suggestion for a middle-way solution? the users in my website that fill up a form might upload one image but also might upload 10 images. I don’t want to add 10 upload button because it will be cumbersome and not UX/UI friendly for users who want to upload one image, but for others it is necessary.

Thank you  
Tal

---

<div class="post-metadata">

**Author:** ![talmizrah](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/talmizrah/32/14153_2.png) [@talmizrah](https://forum.wixstudio.com/u/talmizrah)\
**Post date:** [September 11, 2019, 8:45pm UTC](https://forum.wixstudio.com/t/upload-button/20302/4 "2019-09-11T20:45:53Z")

</div>

Thank you!

---

<div class="post-metadata">

**Author:** ![J.D](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/j.d/32/7312_2.png) [@J.D](https://forum.wixstudio.com/u/J.D)\
**Post date:** [September 11, 2019, 9:45pm UTC](https://forum.wixstudio.com/t/upload-button/20302/5 "2019-09-11T21:45:09Z")

</div>

You can also use 1 button, and once the first image is uploaded save it aside etc…  
something like:

```javascript
let images = [];
//........
$w("#button").startUpload()
  .then( (uploadedFile) => {
   images.push(uploadedFile.url);
})
//and save all the images from the array.

```

---

<div class="post-metadata">

**Author:** ![J.D](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/j.d/32/7312_2.png) [@J.D](https://forum.wixstudio.com/u/J.D)\
**Post date:** [September 11, 2019, 9:56pm UTC](https://forum.wixstudio.com/t/upload-button/20302/6 "2019-09-11T21:56:41Z")

</div>

Or even better: If they’re images, you can push them to a gallery one by one, so the users will be able to see what they’re going to save.  
Then on click, save all the images from the gallery.

---

<div class="post-metadata">

**Author:** ![talmizrah](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/talmizrah/32/14153_2.png) [@talmizrah](https://forum.wixstudio.com/u/talmizrah)\
**Post date:** [September 13, 2019, 10:59am UTC](https://forum.wixstudio.com/t/upload-button/20302/7 "2019-09-13T10:59:25Z")

</div>

Thanks again

---

<div class="post-metadata">

**Author:** ![J.D](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/j.d/32/7312_2.png) [@J.D](https://forum.wixstudio.com/u/J.D)\
**Post date:** [September 13, 2019, 11:24am UTC](https://forum.wixstudio.com/t/upload-button/20302/8 "2019-09-13T11:24:32Z")

</div>

You’re welcome

---

<div class="post-metadata">

**Author:** ![J.D](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/j.d/32/7312_2.png) [@J.D](https://forum.wixstudio.com/u/J.D)\
**Post date:** [September 24, 2019, 8:35pm UTC](https://forum.wixstudio.com/t/upload-button/20302/9 "2019-09-24T20:35:24Z")

</div>

See an example (for using a single button for loading image after image):  
[https://jonatandor35.wixsite.com/test/multiupload](https://jonatandor35.wixsite.com/test/multiupload)

---

<div class="post-metadata">

**Author:** ![cheryl](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/cheryl/32/3202_2.png) [@cheryl](https://forum.wixstudio.com/u/cheryl)\
**Post date:** [January 30, 2020, 9:33am UTC](https://forum.wixstudio.com/t/upload-button/20302/10 "2020-01-30T09:33:30Z")

</div>

I gave the multi-upload feature a try and it seems to work perfectly. But how should I modify the code for it to be able to accept multi-upload for videos instead?

this is the current set of code that enables to upload a single video file

* * *

export function button2\_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”;  
})

.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.”;  
}  
}

* * *

I’d be grateful for your kind assistance.

---

<div class="post-metadata">

**Author:** ![J.D](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/j.d/32/7312_2.png) [@J.D](https://forum.wixstudio.com/u/J.D)\
**Post date:** [January 30, 2020, 4:58pm UTC](https://forum.wixstudio.com/t/upload-button/20302/11 "2020-01-30T16:58:47Z")

</div>

Is that the entire code?

---

<div class="post-metadata">

**Author:** ![abigailx1](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/abigailx1/32/16040_2.png) [@abigailx1](https://forum.wixstudio.com/u/abigailx1)\
**Post date:** [January 30, 2020, 9:41pm UTC](https://forum.wixstudio.com/t/upload-button/20302/12 "2020-01-30T21:41:33Z")

</div>

here another option… [https://andreaskviby.wixsite.com/classifieds/new-ad](https://andreaskviby.wixsite.com/classifieds/new-ad)

---

<div class="post-metadata">

**Author:** ![cheryl](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/cheryl/32/3202_2.png) [@cheryl](https://forum.wixstudio.com/u/cheryl)\
**Post date:** [January 31, 2020, 2:26am UTC](https://forum.wixstudio.com/t/upload-button/20302/13 "2020-01-31T02:26:47Z")

</div>

@jonatandor35 yes. tested and seem to work for 1 video file.

---

<div class="post-metadata">

**Author:** ![J.D](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/j.d/32/7312_2.png) [@J.D](https://forum.wixstudio.com/u/J.D)\
**Post date:** [January 31, 2020, 11:21am UTC](https://forum.wixstudio.com/t/upload-button/20302/14 "2020-01-31T11:21:38Z")

</div>

@cheryl currently you can’t select many files at once, but you can let the user upload many files one after the other.  
Have a look at my link above.

---

<div class="post-metadata">

**Author:** ![nanami](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/nanami/32/1875_2.png) [@nanami](https://forum.wixstudio.com/u/nanami)\
**Post date:** [March 10, 2020, 11:06am UTC](https://forum.wixstudio.com/t/upload-button/20302/15 "2020-03-10T11:06:30Z")

</div>

It’s wonderful page! Very kind.

I try it but, its not work.  
please tell me the bad part.

[https://risa73.wixsite.com/kenjyukyo02/blank-9](https://risa73.wixsite.com/kenjyukyo02/blank-9)

 ![](https://us1.discourse-cdn.com/wix/original/3X/1/3/13fb0a8eb441eec00bf8fbf18c81f022d001aa32.jpeg)

```javascript
export function uploadButton_change(event, $w) {
if ($w('#galley').items.length > 0) {
if ($w('#gallery').items[0].title === "noImageUploadedImage") {
let items = $w('#gallery').items;
items.splice($w('#gallery').items[0], 1);
$w('#gallery').items = items;
}
}
$w('#gallery').show();
let selectfile = $w('#uploadButton').values;
let selectfilesize = selectfile[0].size;
console.log(selectfilesize);
if (selectfilesize < 150000) {
$w('#uploadStatusText').hide();
$w('#uploadButton').buttonLabel = "uploading...";
$w('#uploadButton').startUpload()
.then((uploadfile)=>{
let uploadfileurl=uploadfile.url;
console.log(uploadfileurl);
let items=$w('#gallery').items;
items.push({
"src":uploadfileurl,
"description":"",
"title":""
});
$w('#gallery').items=items;
$w('#uploadButton').reset();
$w('#uploadButton').buttonlabel="upload more";
if(items.length>10){
$w('#uploadButton').hide();
}else{
$w('#button1').enable();
$w('#dataset1').setFieldValue("image",items);
}
})
.catch((uploadError)=>{
console.log(uploadError);
$w('#uploadButton').reset();
$w('#uploadButton').buttonLabel="upload";
$w('#uploadStatusText').show();
});
}else{
$w('#uploadButton').reset();
$w('#uploadStatusText').text="Max file sise:15mb";
$w('#uploadStatusText').show();
}
}
export function submitButton_click(event){
let nrOfImages =$w('#gallery1').items.length;
if(nrOfImages>0){
$w('#dataset1').save()
.then((saved)=>{
console.log(saved);
})
}else{
$w('#uploadStatusText').text="appuro-doshitene"
}
}

```

---

<div class="post-metadata">

**Author:** ![ziyangzhou](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/ziyangzhou/32/21377_2.png) [@ziyangzhou](https://forum.wixstudio.com/u/ziyangzhou)\
**Post date:** [July 20, 2020, 9:54pm UTC](https://forum.wixstudio.com/t/upload-button/20302/16 "2020-07-20T21:54:38Z")

</div>

Hi guys! I just want you guys to know that [https://jonatandor35.wixsite.com/test/multiupload](https://jonatandor35.wixsite.com/test/multiupload) 's code worked fabulously! I really appreciated your help, J.D… That being said, the images uploaded into the gallery only shows up when the user is uploading, which disappears if the user reloads the page :(. Any fixes to this issue?

---

<div class="post-metadata">

**Author:** ![J.D](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/j.d/32/7312_2.png) [@J.D](https://forum.wixstudio.com/u/J.D)\
**Post date:** [July 20, 2020, 10:04pm UTC](https://forum.wixstudio.com/t/upload-button/20302/17 "2020-07-20T22:04:47Z")

</div>

You’ll have to run a query on page load, retrieve the images and push them to the gallery.

```javascript
//in the $w.onReady:
wixData.query(Pictures)
.eq("userId", userId)
.limit(100)
.distinct("image")
.then(r => {
let items = r.items.map(e => ({src: e}));
$w("#gallery1").items = items;
})

```

and make sure not to insert the existing images again when you save the new ones.

---

<div class="post-metadata">

**Author:** ![ziyangzhou](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/ziyangzhou/32/21377_2.png) [@ziyangzhou](https://forum.wixstudio.com/u/ziyangzhou)\
**Post date:** [July 20, 2020, 10:09pm UTC](https://forum.wixstudio.com/t/upload-button/20302/18 "2020-07-20T22:09:56Z")

</div>

Wow! Thank you so much for your fast response! I really appreciate it. I will try it out.

---

<div class="post-metadata">

**Author:** ![ziyangzhou](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/ziyangzhou/32/21377_2.png) [@ziyangzhou](https://forum.wixstudio.com/u/ziyangzhou)\
**Post date:** [July 20, 2020, 10:15pm UTC](https://forum.wixstudio.com/t/upload-button/20302/19 "2020-07-20T22:15:30Z")

</div>

I incorporated this portion of the code, but it is still not working. The gallery presenting the image mysteriously disappears after the image is saved. I checked back further up in the code and removed the command that collapses the gallery. Still no luck. In my other pages, however, I included a form that receives user inputs and presents it in a repeater down below. Is it okay to mix-match the two? (Here is the video I watched: [https://www.youtube.com/watch?v=FVARVy3YS74](https://www.youtube.com/watch?v=FVARVy3YS74) ).

---

<div class="post-metadata">

**Author:** ![J.D](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/j.d/32/7312_2.png) [@J.D](https://forum.wixstudio.com/u/J.D)\
**Post date:** [July 20, 2020, 10:21pm UTC](https://forum.wixstudio.com/t/upload-button/20302/20 "2020-07-20T22:21:28Z")

</div>

Because I deliberately emptied the gallery after saving.  
This line of code empties the gallery:

```javascript
 $w("#gallery1").items = [];

```

You should adjust the code to your specific needs.

[Next page](https://forum.wixstudio.com/t/upload-button/20302.md?page=2)