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?
@ivana_machado Look here first https://www.wix.com/code/reference/$w.UploadButton.html
@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... :)
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.
@sebastian 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 wantHi @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)
Looking for this as well