Hello there,
I have been trying for a couple of days now to upload multiple photos from an input form with multiple uploadbuttons to a datacollection.
I want to have the photos in one row of the datacollection. Since it is a member area i also want to automaticly have the member name in that row so i can identify later who uploaded which photos. So far i got:
1) just using wixforms and connecting it to db: I can upload multiple photos but i cant get the user name to insert.
2) using wixcode: i can upload multiple photos but each photo is inserted in a seperate row.
Any ideas how to get that problem solved?
Can i chain multiple .startUpload ?
Can i get the username to be inserted when i just use the forms?
Is there a workaround where I can use a dummy db and insert all into one db?
Below is my code so far which adds the pictures in different rows.
Thank you,
Jakob
export function button1_click(event) {
//Add your code for this event here: submit button should save all the information in database
let lastName;
let firstName;
let fullName;
//gets user id and compares it with members db..then it gets the name out of memebrs db
wixData.query("Members/PrivateMembersData").eq("_id", wixUsers.currentUser.id).find().then( (results) => {
// Getting the name of the member
fullName = results.items[0].lastName;
//gets the input of the textboxes
let type = $w("#dropdown1").value;
let brand = $w("#textBox1").value;
let description = $w("#textBox2").value;
let condition = $w("#textBox3").value;
let image1 = $w("#uploadButton1").value;
//Upload image 1
if($w("#uploadButton1").value.length > 0) {
$w("#uploadButton1").startUpload($w("#uploadButton1").buttonLabel = "Uploading")
.then((uploadedFile) => {
$w("#uploadButton1").buttonLabel = "Finished";
let toInsert = {
"title": type,
'user':fullName,
'brand' : brand,
'condition':condition,
'description': description,
"image1": uploadedFile.url};
wixData.insert("ConsignedItemsDB",toInsert);
})
.catch( (uploadError) => {
$w("#uploadButton1").buttonLabel = "File upload error";
console.log(`Error: ${uploadError.errorCode}`);
console.log(uploadError.errorDescription);
});
}
else {
("#uploadButton1").buttonLabel = "Select File";
}
//Upload image 2
if($w("#uploadButton2").value.length > 0) {
$w("#uploadButton2").startUpload($w("#uploadButton2").buttonLabel = "Uploading")
.then((uploadedFile) => {
$w("#uploadButton2").buttonLabel = "Finished";
let toInsert = {
"title": type,
'user':fullName,
'brand' : brand,
'condition':condition,
'description': description,
"image2": uploadedFile.url};
wixData.insert("ConsignedItemsDB",toInsert);
})
.catch( (uploadError) => {
$w("#uploadButton2").buttonLabel = "File upload error";
console.log(`Error: ${uploadError.errorCode}`);
console.log(uploadError.errorDescription);
});
}
else {
("#uploadButton2").buttonLabel = "Select File";
}
.catch((err) => {
let errorMsg = err;
});
}
Too many nestings and not a very good performance from BigO I'd suggestion something like this one that we built for one of our clients:
let workImages = []; export async function uploadWork_change(event) { let greenFlag = false; let file = $w('#uploadWork').value; if(file.length > 0){ let response = await $w('#uploadWork').startUpload($w('#uploadWork').buttonLabel = 'Uploading ...'); greenFlag = response; if(greenFlag){ workImages.push(response.url); greenFlag = false; console.log(workImages, file[0].name); $w('#uploadWork').buttonLabel = 'Add another picture' $w('#uploadedTxt').expand(); $w('#uploadedTxt').text = `Done, Uploaded ${file[0].name}`; } } }
@J.D. Hi There, Unfortunatly your awnsers were erased for some spam reason.. I was not able to read your last comment that you posted. Maybe you can repost it? I would really appreciate it.
Please see below my latest version. It seems to be working good now and I didnt got any error messages.
Best, Jakob
// For full API documentation, including code examples, visit http://wix.to/94BuAAs import wixUsers from 'wix-users'; import wixData from 'wix-data'; import wixWindow from 'wix-window'; import wixLocation from 'wix-location'; let toInsert = {}; // getting the curent member name and insert it in toInsert wixData.query("Members/PrivateMembersData").eq("_id", wixUsers.currentUser.id).find() .then((results) => { // Getting the name of the member let lastName = results.items[0].lastName; toInsert.user = lastName; }).catch((err) => { let errorMsg = err; }); $w.onReady(function () { // Setting Default values toInsert.title = $w("#dropdown1").value; toInsert.brand = $w("#textBox1").value; // getting the values onChange and writing it in toInsert $w("#dropdown1").onChange((event, $w) => { toInsert.title = event.target.value; }); $w("#textBox1").onChange((event, $w) => { toInsert.brand = event.target.value; }); export function button1_click(event) { let allPromises = []; //function upload : checks if upload is not empty and pushes a new upload promises to allpromises //input: name of uploadbutton, function uploadPicture(uploadButton) { console.log(uploadButton.value.length); if (uploadButton.value.length > 0) { allPromises.push(uploadButton.startUpload(uploadButton.buttonLabel = "Uploading") .then((uploadedFile) => { uploadButton.buttonLabel = "Finished"; return uploadedFile.url; }) .catch((uploadError) => { uploadButton.buttonLabel = "File upload error test"; console.log(`Error: ${uploadError.errorCode}`); console.log(uploadError.errorDescription); }) ); } else { uploadButton.buttonLabel = "No File Selected"; } } //starting the uploadpromises uploadPicture($w("#uploadButton1")); uploadPicture($w("#uploadButton2")); uploadPicture($w("#uploadButton3")); uploadPicture($w("#uploadButton4")); let galleryItem = []; //waiting for all promises to end and writing it to db Promise.all(allPromises).then(values => { //creating the keyNames for (var i = 0; i < values.length; i++) { let keyName = 'image' + (i + 1); toInsert[keyName] = values[i]; galleryItem.push({ "src": values[i], "description": "Description", "title": "Title" }); } toInsert.gallery = galleryItem; console.log(toInsert); wixData.insert("ConsignedItemsDB", toInsert).then((results) => { let item = results; //see item below console.log(results) }) .catch((err) => { let errorMsg = err; }); delete toInsert._id; $w("#dropdown1").value = ''; $w("#textBox1").value = ''; $w("#textBox2").value = ''; $w("#textBox3").value = ''; wixWindow.openLightbox("ConfirmSubmisson"); }); }