# User Member Add Media to Gallery - by Code

**URL:** <https://forum.wixstudio.com/t/user-member-add-media-to-gallery-by-code/15327>\
**Category:** Ask the community\
**Tags:** code, question\
**Created:** [October 28, 2018, 10:22am UTC](https://forum.wixstudio.com/t/user-member-add-media-to-gallery-by-code/15327 "2018-10-28T10:22:02Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![ivana-machado](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/ivana-machado/32/1877_2.png) [@ivana-machado](https://forum.wixstudio.com/u/ivana-machado)\
**Post date:** [October 28, 2018, 10:22am UTC](https://forum.wixstudio.com/t/user-member-add-media-to-gallery-by-code/15327/1 "2018-10-28T10:22:02Z")

</div>

Hi!  
I am super excited to finally have an option of gallery media on database (yaay!)

In my case, I need the user member to be able to add the images to a gallery (media gallery field type on database).

Is there a way to do it so the user can upload multiple images at the same time, to be uploaded to the database media gallery field?

Thank you!

---

<div class="post-metadata">

**Author:** ![andreas-kviby](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/andreas-kviby/32/790_2.png) [@andreas-kviby](https://forum.wixstudio.com/u/andreas-kviby)\
**Post date:** [October 28, 2018, 11:14am UTC](https://forum.wixstudio.com/t/user-member-add-media-to-gallery-by-code/15327/2 "2018-10-28T11:14:55Z")

</div>

hey  
Yes, loop at the API Docs and the samples in that for UploadButton and then you can have them upload several images and connect them to that field.

---

<div class="post-metadata">

**Author:** ![ivana-machado](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/ivana-machado/32/1877_2.png) [@ivana-machado](https://forum.wixstudio.com/u/ivana-machado)\
**Post date:** [October 28, 2018, 11:21am UTC](https://forum.wixstudio.com/t/user-member-add-media-to-gallery-by-code/15327/3 "2018-10-28T11:21:38Z")

</div>

Thank you Andreas! I swear I couldn’t find anything on uploading several images on a media gallery field (found lots on database gallery or single images though…

Is there any chance you could help me finding the right APIs or Samples? Pretty please?

---

<div class="post-metadata">

**Author:** ![andreas-kviby](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/andreas-kviby/32/790_2.png) [@andreas-kviby](https://forum.wixstudio.com/u/andreas-kviby)\
**Post date:** [October 28, 2018, 11:28am UTC](https://forum.wixstudio.com/t/user-member-add-media-to-gallery-by-code/15327/4 "2018-10-28T11:28:35Z")

</div>

@ivana-machado Look here first [https://www.wix.com/code/reference/$w.UploadButton.html](https://www.wix.com/code/reference/$w.UploadButton.html)

---

<div class="post-metadata">

**Author:** ![ivana-machado](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/ivana-machado/32/1877_2.png) [@ivana-machado](https://forum.wixstudio.com/u/ivana-machado)\
**Post date:** [October 28, 2018, 11:41am UTC](https://forum.wixstudio.com/t/user-member-add-media-to-gallery-by-code/15327/5 "2018-10-28T11:41:02Z")

</div>

@andreas-kviby I have already, and it didn’t help me much.

I have an upload button (#selectimages) and a button (#upload). The upload button doesn’t let the user select more than an image at time. Have tried the standard code for the upload button, but doesn’t know how to upload the image to the media gallery field.

The gallery field I want to populate with the images is called “gallery” on database “Tradesman”.

Code that doesn’t work:

export function upload\_click(event) {

**if** ($w(“#selectimages”).value.length \> 0) {  
$w(“#text32”).text = `Uploading ${$w("#selectimages").value[0].name}`;  
$w(“#selectimages”).startUpload()  
.then( (uploadedFile) =\> {  
wixData.insert(“gallery”, uploadedFile).then(() =\> {  
$w(“#text32”).text = “Upload successful”;  
});  
})  
. **catch** ( (uploadError) =\> {  
$w(“#text32”).text = “File upload error”;  
console.log(`Error: ${uploadError.errorCode}`);  
console.log(uploadError.errorDescription);  
});  
}  
**else** {  
$w(“#text32”).text = “Please choose a file to upload.”;  
}

}

Any help is much appreciated… 🙂

---

<div class="post-metadata">

**Author:** ![andreas-kviby](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/andreas-kviby/32/790_2.png) [@andreas-kviby](https://forum.wixstudio.com/u/andreas-kviby)\
**Post date:** [October 28, 2018, 12:12pm UTC](https://forum.wixstudio.com/t/user-member-add-media-to-gallery-by-code/15327/6 "2018-10-28T12:12:34Z")

</div>

@ivana-machado Yes you will need to make the user upload an image, then select if they want to upload one more and so on… there is no element that I am aware of that supports selecting multiple images at the same time the file picker is open.

---

<div class="post-metadata">

**Author:** ![ivana-machado](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/ivana-machado/32/1877_2.png) [@ivana-machado](https://forum.wixstudio.com/u/ivana-machado)\
**Post date:** [October 28, 2018, 1:48pm UTC](https://forum.wixstudio.com/t/user-member-add-media-to-gallery-by-code/15327/7 "2018-10-28T13:48:19Z")

</div>

@andreas-kviby If this is the only way, is there an example of how to do it code wise?

Also, how do you send an item that has been updated to the gallery media field by code? Insert, .tems, ??

Thanks! 🙂

---

<div class="post-metadata">

**Author:** ![thrishtilabs](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/thrishtilabs/32/950_2.png) [@thrishtilabs](https://forum.wixstudio.com/u/thrishtilabs)\
**Post date:** [October 28, 2018, 3:12pm UTC](https://forum.wixstudio.com/t/user-member-add-media-to-gallery-by-code/15327/8 "2018-10-28T15:12:03Z")

</div>

Hi @ivana-machado ,  
You have asked me to share the code for uploading images in a different post. But i guess its better to share it here… So here is the code… This code is unedited and u need to change it a lot according to your use case

```javascript
export function uploadButton_change(event, $w) {
    
 if ($w("#gallery").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 selectedFile = $w("#uploadButton").value;
 let selectedFileSize = selectedFile[0].size;
 if (selectedFileSize < uploadedImageSizeLimit) {
            $w("#uploadStatusText").hide();
            $w("#uploadButton").startUpload($w("#uploadButton").buttonLabel = "Uploading")
                .then((uploadedFile) => {
 let uploadfileurl = uploadedFile.url;
 let items = $w("#gallery").items;
                    items.push({
 "src": uploadfileurl,
 "description": "",
 "title": ""
                    });
                    $w("#gallery").items = items;

                    $w("#uploadButton").reset();
                    $w("#uploadButton").buttonLabel = "Upload";
                    $w("#imagedeletebutton").show();
 if (items.length >= databaseNumberOfImages) {
                        $w("#uploadButton").hide();
                    }
                })
                .catch((uploadError) => {
                    console.log(`Error: ${uploadError.errorCode}`);
 //console.log(uploadError.errorDescription);
                    $w("#uploadButton").reset();
                    $w("#uploadButton").buttonLabel = "Upload";
                    $w("#uploadStatusText").text = "File type not supported";
                    $w("#uploadStatusText").show();
                });
        } else {
            $w("#uploadButton").reset();
            $w("#uploadStatusText").text = " Max FIle Size : 15 Mb";
            $w("#uploadStatusText").show();
        }
    
}

```

---

<div class="post-metadata">

**Author:** ![jeff-haskins](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/jeff-haskins/32/1864_2.png) [@jeff-haskins](https://forum.wixstudio.com/u/jeff-haskins)\
**Post date:** [November 24, 2018, 8:06pm UTC](https://forum.wixstudio.com/t/user-member-add-media-to-gallery-by-code/15327/9 "2018-11-24T20:06:58Z")

</div>

Link to page that uses this so can see how the title, description and delete images are set up and working?

---

<div class="post-metadata">

**Author:** ![sebastian308](https://avatars.discourse-cdn.com/v4/letter/s/73ab20/32.png) [@sebastian308](https://forum.wixstudio.com/u/sebastian308)\
**Post date:** [November 29, 2018, 9:08am UTC](https://forum.wixstudio.com/t/user-member-add-media-to-gallery-by-code/15327/10 "2018-11-29T09:08:17Z")

</div>

I get some errors with this code:

uploadedImageSizeLimit is not defined

databaseNumberOfImages is not defined

Also I am having a hard time figuring out what goes where… As Jeff says, it would be so nice if we could see the collection and input fields that it is connected to.

---

<div class="post-metadata">

**Author:** ![andreas-kviby](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/andreas-kviby/32/790_2.png) [@andreas-kviby](https://forum.wixstudio.com/u/andreas-kviby)\
**Post date:** [November 29, 2018, 10:46am UTC](https://forum.wixstudio.com/t/user-member-add-media-to-gallery-by-code/15327/11 "2018-11-29T10:46:37Z")

</div>

@sebastian308 At the top of your page code you need to add

```javascript
let uploadedImageSizeLimit = 400000; or what limit you want
let databaseNumberOfImages = 4; or what limit you want

```

---

<div class="post-metadata">

**Author:** ![sebastian308](https://avatars.discourse-cdn.com/v4/letter/s/73ab20/32.png) [@sebastian308](https://forum.wixstudio.com/u/sebastian308)\
**Post date:** [December 3, 2018, 4:19pm UTC](https://forum.wixstudio.com/t/user-member-add-media-to-gallery-by-code/15327/12 "2018-12-03T16:19:57Z")

</div>

@andreas-kviby When I apply this to the code, I get no errors, but when I select a file with the “uploadButton”, nothing really happens on the front end, but in my collection, it adds a black row to the collection.

* * *

**let** uploadedImageSizeLimit = 400000;  
**let** databaseNumberOfImages = 4;  
export function uploadButton\_change(event, $w) {

**if** ($w(“#media”).items.length \> 0) {  
**if** ($w(“#media”).items[0].title === “noImageUploadedImage”) {  
**let** items = $w(“#media”).items;  
items.splice($w(“#media”).items[0], 1);  
$w(“#media”).items = items;  
}  
}  
$w(“#media”).show();  
**let** selectedFile = $w(“#uploadButton”).value;  
**let** selectedFileSize = selectedFile[0].size;  
**if** (selectedFileSize \< uploadedImageSizeLimit) {  
$w(“#uploadStatusText”).hide();  
$w(“#uploadButton”).startUpload($w(“#uploadButton”).buttonLabel = “Uploading”)  
.then((uploadedFile) =\> {  
**let** uploadfileurl = uploadedFile.url;  
**let** items = $w(“#media”).items;  
items.push({  
“src”: uploadfileurl,  
“description”: “”,  
“title”: “”  
});  
$w(“#media”).items = items;

```
                $w("#uploadButton").reset(); 
                $w("#uploadButton").buttonLabel = "Upload"; 
                $w("#imagedeletebutton").show(); 

```

**if** (items.length \>= databaseNumberOfImages) {  
$w(“#uploadButton”).hide();  
}  
})  
. **catch** ((uploadError) =\> {  
console.log(`Error: ${uploadError.errorCode}`);  
[//console.log](https://console.log)(uploadError.errorDescription);  
$w(“#uploadButton”).reset();  
$w(“#uploadButton”).buttonLabel = “Upload”;  
$w(“#uploadStatusText”).text = “File type not supported”;  
$w(“#uploadStatusText”).show();  
});  
} **else** {  
$w(“#uploadButton”).reset();  
$w(“#uploadStatusText”).text = " Max FIle Size : 15 Mb";  
$w(“#uploadStatusText”).show();  
}

}

---

<div class="post-metadata">

**Author:** ![mdfahimtajbir](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/mdfahimtajbir/32/7775_2.png) [@mdfahimtajbir](https://forum.wixstudio.com/u/mdfahimtajbir)\
**Post date:** [December 26, 2018, 12:30am UTC](https://forum.wixstudio.com/t/user-member-add-media-to-gallery-by-code/15327/13 "2018-12-26T00:30:56Z")

</div>

Hi [@ivana\_machado](https://forums.wixapps.net/community-discussion/user-member-add-media-to-gallery-by-code?cacheKiller=1545739895891&compId=TPASection_j5ggxs3g&deviceType=desktop&height=626&instance=XOiUit2raje_DpWD_RooM2aunK7GY9dUbt5zjRKbFpg.eyJpbnN0YW5jZUlkIjoiMjViODlmMmItM2JmYy00NmNiLTg5NzgtODJiNGMwYTEyN2U3IiwiYXBwRGVmSWQiOiIxNDcyNGYzNS02Nzk0LWNkMWEtMDI0NC0yNWZkMTM4ZjkyNDIiLCJtZXRhU2l0ZUlkIjoiOTA2NDI1MmQtMTEyMi00YzNkLWE2NDctOTViMTJmYjM0YjJlIiwic2lnbkRhdGUiOiIyMDE4LTEyLTI2VDAwOjEwOjA2Ljc5OFoiLCJ1aWQiOiJmN2NmZjI4MS1hZGExLTQzZWQtODhmMS1mYWMxNzM4ZTRkNTUiLCJwZXJtaXNzaW9ucyI6bnVsbCwiaXBBbmRQb3J0IjoiMTkzLjExOS42Ny4yMTkvNTIzNTgiLCJ2ZW5kb3JQcm9kdWN0SWQiOm51bGwsImRlbW9Nb2RlIjpmYWxzZSwib3JpZ2luSW5zdGFuY2VJZCI6IjRhYzhlZTI1LTQ4YWUtNDExMC04MGFjLWI5Njc2ZGJhN2Y1YyIsImFpZCI6IjY0MzIxMGE1LWRjMzEtNDc4MC1hZjY4LWVkYjI4YTk3NWVhNyIsImJpVG9rZW4iOiJiNWRjYmEwNi0yYWRlLTBhZjYtMmYzZi0xNzA1ZWYxMjZjYzkiLCJzaXRlT3duZXJJZCI6IjM3NTg4MjNjLWVhZjMtNDY5NC05YzA5LWNiNzBmOTU5N2VjMyJ9&locale=en&pageId=atumo&section-url=https%3A%2F%2Fwww.wix.com%2Fcode%2Fhome%2Fforum%2F&target=_top&viewMode=site&vsi=1cb1b487-d526-4042-8e2e-02ebac6e8ee9&width=980#) , I have created a dynamic page which has cover photo ( filed image ) , profile photo (field image). I have created a different dynamic page where they can edit and submit these images. I have another FIELD of photos (media gallery field) , I cant use any upload button for the (media gallery field). I want my site users to Upload pictures to (media gallery field) so it can appear on the gallery of the user profile. When they will hit upload button, the image will be stored at media gallery field of the user. I have uploaded few picture manually to the gallery field, which has appeared on the user profile gallery. I need some coding so that they can upload, edit, and delete picture from the media gallery field. My website is [www.nettoll.net](http://www.nettoll.net)

![](https://us1.discourse-cdn.com/wix/original/3X/3/3/33bd872c2629fc1d9c32a6ffadba968d82f2365c.png)  
The picture where uploaded manually by me because i dont have a button which can connect and upload picture the (photos) filed .( Media gallery field)

---

<div class="post-metadata">

**Author:** ![jeff-haskins](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/jeff-haskins/32/1864_2.png) [@jeff-haskins](https://forum.wixstudio.com/u/jeff-haskins)\
**Post date:** [January 1, 2019, 10:18pm UTC](https://forum.wixstudio.com/t/user-member-add-media-to-gallery-by-code/15327/14 "2019-01-01T22:18:12Z")

</div>

Do you have a link to a page that runs this code? Does this code allow update to previously uploaded images…if not, any work been done in that regard?

---

<div class="post-metadata">

**Author:** ![jeff-haskins](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/jeff-haskins/32/1864_2.png) [@jeff-haskins](https://forum.wixstudio.com/u/jeff-haskins)\
**Post date:** [January 1, 2019, 10:22pm UTC](https://forum.wixstudio.com/t/user-member-add-media-to-gallery-by-code/15327/15 "2019-01-01T22:22:54Z")

</div>

Looking for this as well

---

<div class="post-metadata">

**Author:** ![jeff-haskins](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/jeff-haskins/32/1864_2.png) [@jeff-haskins](https://forum.wixstudio.com/u/jeff-haskins)\
**Post date:** [January 1, 2019, 10:40pm UTC](https://forum.wixstudio.com/t/user-member-add-media-to-gallery-by-code/15327/16 "2019-01-01T22:40:34Z")

</div>

@sebastian308#gallery not seeing it defined to a database, but that would be because it is defined by the connection to the database?

Confused as not sure of what #gallery and #media are for this code. Can you define the fields or items defined by these?

---

<div class="post-metadata">

**Author:** ![jeff-haskins](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/jeff-haskins/32/1864_2.png) [@jeff-haskins](https://forum.wixstudio.com/u/jeff-haskins)\
**Post date:** [January 1, 2019, 10:52pm UTC](https://forum.wixstudio.com/t/user-member-add-media-to-gallery-by-code/15327/17 "2019-01-01T22:52:41Z")

</div>

In trying to work this, an upload button can not be connected to a gallery field…am I missed something?

---

<div class="post-metadata">

**Author:** ![tfigueiracosta](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/tfigueiracosta/32/15047_2.png) [@tfigueiracosta](https://forum.wixstudio.com/u/tfigueiracosta)\
**Post date:** [November 14, 2019, 8:18pm UTC](https://forum.wixstudio.com/t/user-member-add-media-to-gallery-by-code/15327/18 "2019-11-14T20:18:30Z")

</div>

how can send this images for a GALLEY FIELD IN MY DATABASE??

---

<div class="post-metadata">

**Author:** ![daybreakinperu](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/daybreakinperu/32/10531_2.png) [@daybreakinperu](https://forum.wixstudio.com/u/daybreakinperu)\
**Post date:** [November 20, 2019, 5:28am UTC](https://forum.wixstudio.com/t/user-member-add-media-to-gallery-by-code/15327/19 "2019-11-20T05:28:11Z")

</div>

Hi Andreas,  
Could you try to explained a little bit your code please.

---

<div class="post-metadata">

**Author:** ![salesnelux](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/salesnelux/32/11853_2.png) [@salesnelux](https://forum.wixstudio.com/u/salesnelux)\
**Post date:** [January 4, 2020, 11:44am UTC](https://forum.wixstudio.com/t/user-member-add-media-to-gallery-by-code/15327/20 "2020-01-04T11:44:43Z")

</div>

My question is once uploaded how to submit, it is needed also some code? because i connect gallery with media gallery but it doesnt work, waiting for your reply, thank you

[Next page](https://forum.wixstudio.com/t/user-member-add-media-to-gallery-by-code/15327.md?page=2)