Upload multiple photos in datacollection

Ask the community
, , ,
1

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;
                });
 
}
2

@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");
    });

}
3

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}`;
        }
    }
}