Hi! i’m new to wix. I noticed that WIX recently released the option to select multiple images and that’s really cool. I’m trying to allow users on my site to upload multiple images and view them on a repeater before uploading to the database. I honestly have no idea how I can do this. Has anyone tried this? thanks!
I assume this won’t be possible to make a preview before upload.
Normally you can preview your image after upload.
If you want to do the preview before upload, you will have to use either the HTML-Component or create your own custom element to generate an image-preview by using a blob (file-selector) and get the base64-URI of the image.
I don’t think I explained it very well. sorry! 
these are the steps:
•The user clicks the upload button.
•The images that the user uploaded appear on the repeater (preview).
•The user clicks the send button the images go to the database.
It is possible?
@mark81365
This is possible!
could you help me with this problem? I don’t know how to start doing this! what should i do first?
After you do an upload, …
$w('#btnUpload').onChange(()=>{
$w('#btnUpload').startUpload()
.then((res)=>{console.log("RESULTS: ", res);
$w('#imgID').src=res.url;
}).catch((ERR)=>{console.log(ERR);});
});
…you normaly should get someting like this in console…
But this example will be the depricated one!!!
You should use this one instead, especialy if you want to upload multiple images at once.
$w("#myUploadButton").uploadFiles()
.then((uploadedFiles)=> {console.log(uploadedFiles);
uploadedFiles.forEach(uploadedFile => {
console.log('File url:', uploadedFile.fileUrl);
})
})
.catch( (uploadError)=> {
let errCode = uploadError.errorCode;
let errDesc = uploadError.errorDescription;
});
To fill your REPEATER, you will need to generate the right data-format first, which would look like this example… (the ID is a → MUST !)
[
{
"_id": "1",
"firstName": "John",
"lastName": "Doe",
"image": "http://someImageUrl/john.jpg"
},
{
"_id": "2",
"firstName": "Jane",
"lastName": "Doe",
"image": "http://someImageUrl/jane.jpg"
}
]
So in your case the data-structure for your repeater would look like this
[
{
"_id": "1",
"image": "http://someImageUrl/x1.jpg"
},
{
"_id": "2",
"image": "http://someImageUrl/x2.jpg"
},
{
"_id": "3",
"image": "http://someImageUrl/x3.jpg"
}
]
You can generate/prepare the REPEATER-DATA directly inside the For-Each-Loop…
let myRepeaterData=[], counter=0;
uploadedFiles.forEach(uploadedFile => {
console.log('File url:', uploadedFile.fileUrl);
myRepeaterData.push({_id:counter, url:uploadedFile.fileUrl})
counter=counter+1
})
console.log(myRepeaterData);
After you have your REPEATER-DATA ready, you can load it on your REPEATER…
$w('#myRepeaterIDhere').data = myRepeaterData
Of course do not forget to place everything inside —> onReady() !!!
$w.onReady(()=>{
$w("#myUploadButton").uploadFiles()
.then((uploadedFiles)=> {console.log(uploadedFiles);
let myRepeaterData=[], counter=0;
uploadedFiles.forEach(uploadedFile => {
console.log('File url:', uploadedFile.fileUrl);
myRepeaterData.push({_id:counter, url:uploadedFile.fileUrl});
counter=counter+1;
})
console.log(myRepeaterData);
$w('#myRepeaterIDhere').data = myRepeaterData
})
.catch( (uploadError)=> {
let errCode = uploadError.errorCode;
let errDesc = uploadError.errorDescription;
});
});
Good luck!
Take a look at the THUMBNAILS page in the Upload Pictures example.
@russian-dima
I added your code but the images are not showing up on the repeater. I tried using this code too but it didn’t work:
$w(“#repeater1”).onItemReady(($item, itemData, index) => {
$item(‘#image1’).src = itemData.url;
What am I doing wrong?
your example is really what i need! I noticed that you use the onChange event and this allows the user to change the image that was added to the repeater (preview). I don’t want to allow the user to change the image he added in the repeater, if the user wanted to change the image he will have to click on the icon (x) and add another image again. it is possible? thanks!
$w.onReady(()=>{
$w("#uploadButton1").onChange(()=>{
$w("#uploadButton1").uploadFiles()
.then((uploadedFiles)=> {console.log(uploadedFiles);
let myRepeaterData=[], counter=0;
uploadedFiles.forEach(uploadedFile => {
console.log('File url:', uploadedFile.fileUrl);
myRepeaterData.push({_id:counter.toString(), url:uploadedFile.fileUrl});
counter=counter+1;
});
console.log(myRepeaterData);
$w('#repeater1').data = myRepeaterData;
})
.catch( (uploadError)=> {
let errCode = uploadError.errorCode;
let errDesc = uploadError.errorDescription;
});
});
$w("#repeater1").onItemReady(($item, itemData, index) => {
$item('#image1').src = itemData.url;
});
});
Not tested!
It worked out! from here, I can already know how to do it. Thank you!
Do not forget to like it, if you realy liked it 
Fantastic! been after this solution for months!
I have a question: How do I add a ‘Remove’ button to a repeater item (preview)? Thanks!!!
The question is → Which functionality should have exactly your REMOVE-BUTTON?
How would work your REMOVE-FUCNTION?
What and where would you want to remove something?
If you want to use your REMOVE-button → INSIDE-REPIEATER → $item
If you want to use your REMOVE-button → OUTSIDE-REPEATER → $w
inside repeater!!
I want a button that removes only one image from the repeater at a time.
something similar to the photo in the post of @_mark .
@cleytonbsb009
Tehere are 2-ways of how to remove an image.
-Remove it completely from DATABASE.
-Hide or collapse it.
$w("#repeater1").onItemReady(($item,itemData,index)=>{
$item('#myCloseButton').onClick(()=>{
$item('#image1').hide();
});
});