Can I upload few image using one upload button to database in one times?
1 Like
Hey
Do you want to uploads more images at a time to your database?
Hey Andreas,
i have the same doubt. Is there a simple way to upload multiple images with a single uplad button programmatically?
For example, the user chooses a image using the button, then it uploads it to the database automatically or manually by clicking another button, then the user can click the upload button to choose another pic agan and so onā¦
Hey
Of course you can use the same button and upload mecanism to perform that. It is a bit of coding but it is doable. If you want my help of coding such a routine for you please go to wixshow.com/shop/ and buy 2 coding blocks and you will have the code in 48 hours.
Hi Iām also interested in this code. The way I see it is for example to add several images directly into a āGalleryā of a dynamic page.
Hey everyoneā¦
Now I can upload multiple images with a single upload button using few lines of code. Just needed few minutes and wix api reference to achieve this. Here is the code. If you have any doubts let me know. Happy New Year!!!
Can you please paste in code as code as not image? That would be nice and nice work by the way.
Hi Andreas ,
Here is the codeā¦
export function uploadButton_change(event, $w) {
//Delay Function Call Start
delay(function () {
$w("#uploadButton").startUpload($w("#uploadButton").buttonLabel = "Uploading")
.then((uploadedFile) => {
//$w("#uploadButton").buttonLabel = "Finished";
var uploadfileurl = uploadedFile.url;
let items = $w("#gallery").items;
items.push({
"src": uploadfileurl,
"description": "Description",
"title": "Title"
});
$w("#gallery").items = items;
$w("#uploadButton").reset();
$w("#uploadButton").buttonLabel = "Upload";
$w("#gallery").play();
$w("#imagedeletebutton").show();
console.log(items.length);
if (items.length >= 3) {
console.log("yes");
$w("#uploadButton").hide();
}
})
.catch((uploadError) => {
console.log(`Error: ${uploadError.errorCode}`);
console.log(uploadError.errorDescription);
});
}, 500);
}
///Function for delaying other function
var delay = (function () {
var timer = 0;
return function (callback, ms) {
clearTimeout(timer);
timer = setTimeout(callback, ms);
};
})();
///Function for delaying other function
By using the above code it is possible to upload any number of images to a gallery (currently set as 3 images) using a single upload button.
I have also added a button to delete the images uploaded as the cross mark in the upload button only deletes the current images not the older ones. I use that delete button to delete the images from the gallery. and I reset the the upload button after each upload to remove that cross mark.
it is then possible to set the images in the gallery to a fieldvalue of a database using the setfieldvalue command while clicking a form submit button like this:
export function submitbutton_click(event, $w) {
$w("#dataset1").onReady(() => {
$w("#dataset1").setFieldValues({
"pic1": $w("#gallery").items[0].src,
"pic2": $w("#gallery").items[1].src,
"pic3": $w("#gallery").items[2].src
});
});
}
Now in the dynamic data page we can set this src address available in the database to the gallery item src value to display the images there.
Todo
Now my database has the links to images instead of real images. So I canāt display an image in a table. So is there a way to convert the image link to real images in the database using hooks? I am working on that now. If any one have any idea,please share here. Thanks
Hello Everyone,
Now the table images are working. Didnāt used any hooksā¦ But did some string operations on the src link of gallery images and copied that to a new filed in database as a image and accessed it using the table.
Maybe you can post your updated code? Thanks.
This discussion iterests me but Iām not sure youāre doing what I would like.
This discussion interests me but Iām not sure youāre doing what I would like. type in the url to the image location. In Wix tables Iāve ben able t0 set up csv files to up load all the info except the image into a database, and then to ad the images I set-up an input page for the database (read/write ) so I could upload the images. (thatās ok for a few dat points but for a 100 or so not so good. Iāve downloaded the database to see what the urlās to the images might be which yes were there but I could see no way in which to predetermine what they would be fro an upload.
In doing this I also couldnāt see how to re-upload the database without duplicating all that was already in the database, except to delete all the existing data?
Hello everyone, Iām a newbie here. Iāve been searching a tutorial on how to or if I can add gallery into a database collection but I couldnāt find one. Iām thankful I found this post. I can simply copy and paste the code but I donāt know how or where should I paste it. I tried it in a page but it didnāt work. I am not familiar with coding so I find it hard to understand. I only rely on drag or drop elements and the tutorials. My website is about selling real estate property so i need to upload multiple images and its hard for me to do it uploading 10 or more images at a time. I need to add 10 fields of images if I have to upload 10 images and I have to do it one by one, very time consuming. I really need this in my site. Please help or advise anyone. Thank you.
I have images that are named by the company number.
and have created a database as follows:
Is there code that will move the images from a file folder to the database automatically. Any suggestions are welcomed as I have hundreds of images that need to be moved.
Hi Nithin
Your codes great! Iāve got it all up and working! But, how do you link up your image delete button?
Cheers, for any help!
Thomas
Hi there
Im trying to add an Upload button to my site. I only want users to be able to add one image at a time. I have copied the code from the WIX instructions but lots of errors appear. Can anyone help?
this is the code wix gives me :
export function button1_click(event) { if($w(ā#uploadButton1ā).value.length > 0) { $w(ā#text1ā).text = Uploading ${$w("#uploadButton1").value[0].name}; $w(ā#uploadButton1ā).startUpload() .then( (uploadedFile) => { $w(ā#text1ā).text = āUpload successfulā; $w(ā#image1ā).src = uploadedFile.url; }) .catch( (uploadError) => { $w(ā#text1ā).text = āFile upload errorā; console.log(Error: ${uploadError.errorCode}); console.log(uploadError.errorDescription); }); } else { $w(ā#text1ā).text = āPlease choose a file to upload.ā; } }
but it says #text1 isnt valid and #image1 isnt valid?
Hi thomas,
I know i am little late.But if u still want to know ā¦let me know
Hi thereā¦
Nithin, thank You so much for showing us this code. I searched for weeks for something like this.
The code runs pefectly customized on my site.
I have still one problem: If the user uploads one or two pictures instead of 3, then it runs into a failure:
āTypeError: Cannot read property āsrcā of undefinedā
I think, it is a problem if some Galleryitems are empty. Can i bypass this somehow?
Regards
Andy
I step in for thomas and looking forward to know how to setup the delete buttonā¦ 
Somebody a little hint for me?
Can you be more specific @andreas ? What do you need to know?