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!
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.
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?
@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… 
@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.
@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! 
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
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();
}
}
Link to page that uses this so can see how the title, description and delete images are set up and working?
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.
@sebastian308 At the top of your page code you need to add
let uploadedImageSizeLimit = 400000; or what limit you want
let databaseNumberOfImages = 4; or what limit you want
@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(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();
}
}
Hi @ivana_machado , 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
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)
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?
Looking for this as well
@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?
In trying to work this, an upload button can not be connected to a gallery field…am I missed something?
how can send this images for a GALLEY FIELD IN MY DATABASE??
Hi Andreas,
Could you try to explained a little bit your code please.
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