Wix Code To Loop Thru Database and Insert an Image

Ask the community
,
1

I have a database with about 3000 entries already loaded. These were loaded from a CSV file.
What I need it to insert a Thumbnail image into each record. Each record has a unique ID that I have loaded into the Wix ID field. I have searched for a while and have not found a way to do this other than one at a time, which is totally unfeasible for this many records.

I assume I would have to first upload all these images to my Wix Image Library and then connect each one to their respective database entry.

Thanks
JD

2

Hi,
“I assume I would have to first upload all these images to my Wix Image Library and then connect each one to their respective database entry.”
That is correct.
Roi.

3

Roi,
What I was asking is HOW to add the uploaded images into the database fields. I know I could upload them to the image library but that does not get them into the database?

4

Ahhh, ok.
Just click on the plus sign and it opens the media manager.
Don’t forget to set the type of the field to image.
Roi.

5

Roi,
You are not understanding…, Yes, I know I can click plus sign and add the image. I have over 3000 images I need connected to the database. I don’t want to do this by clicking + sign, locating image 3000 times. Looking for Wix code to do this.

6

Unfortunately it’s not possible to access the media manager using code.
It is possible to upload all images to the media manager, connect it to a galley and get all urls of the images using code.
Unless you have an unique identifier of those images like file name or title that matches to the new entry, It has to be done semi-manually.
Roi.

7

Yes, the image name will be the same as a database field. For example:

PartNo in database(a text field): 12345
Imagename will be: 12345.jpg

8

Hi,
My suggestion is to add a button element and create an onClick event.
The code should look similar to this but you need to adapt it to your site:
import wixData from ‘wix-data’;

export function makeUpload_click(event, $w) {
	const images = $w('#gallery1').items;
	images.forEach(image => {
		uploadImageToDatabaseByTitle(image);
	})

}

function uploadImageToDatabaseByTitle(image) {
	console.log('log')
	wixData.query('yourDatabase').eq('imageTitle', image.title).find()
		.then(results => {
			const item = results.items[0];
			item.imageSrc = image.src;
			wixData.update('yourDatabase', item)
		})
		.then(() => {
			console.log('done to upload image')
		})
		.catch(err => {
			console.log('error: ', err);
		})
}

Please update in your progress.
Roi.

9

Hello, i want to do similar!
Send multply images for a Midia Galley field in my database
Code that dosent work well

import wixData from ‘wix-data’;
import wixLocation from ‘wix-location’;
export function uploadButton_change(event, $w) {
$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();
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);
});
}
export function submitbutton_click(event, $w) {
$w(‘#dataset1’).setFieldValue(‘album’, $w(‘#gallery’).galleryCapabilities);
}

Page link: https://gruporbyachts.wixsite.com/meusite/resgistro-teste

Any help???