Uploading images from multiple upload buttons

Ask the community
,
1

I need to upload an image from multiple upload buttons to a database via let toInsert.

I’ve had a little help and this is where I’m up to, but it’s not working. I also need to be able to add more upload button code stuff in. Here’s the code for now:

function saveProperties() {
    $w('#buttonSubmit').disable()
    let uniqueClicks = 0
    let user = wixUsers.currentUser;
    let userId = user.id;

    let familyPic1;
    $w("#uploadButton13").startUpload()
    .then((uploadedFile) => {
    let url = uploadedFile.url;
    })

    let toInsert = {
        "industry2": $w("#checkboxGroup1").value,
        "title": $w("#input2").value,
        "agentEmail": $w("#input3").value,
        "mapLocation": $w("#input36").value,
        "businessWebsite": $w("#input35").value,
        "facebook": $w("#input33").value,
        "instagramLink": $w("#input34").value,
        "hoursOfOperation": $w("#input37").value,
        "description": $w("#richTextBox1").value,
        "familyPic1": familyPic1,
        "amenities": $w("#selectionTags1").value,
        "uniqueClick": uniqueClicks,
        "_userId": userId
    };

    wixData.insert("Properties", toInsert)
    .then ((results) => {
        let item = results;
        console.log(item);
        $w("#textErr").text = "Your information has been submitted"
        $w("#textErr").show().then(() => {
            $w("#buttonSubmit").enable()
            setTimeout(() => {
                $w("#textErr").hide()
                wixLocation.to("/update-pics-and-links");
            }, 5000
            )
        })
    })
    .catch((err) => {
        let errorMsg = err;
        console.log(errorMsg)
    });
    }

I think it’s the final hurdle in this part of my project and any help would be appreciated. (To think this time last week the best I could code was showing and hiding on a click event)

2

You aren’t handling the unsynchonized functions well. Also you’re using the deprecated upload button API.
It should be something like:

function saveProperties(){
//..your code code...
 let toInsert = {
//the properties as you wrote
};
 $w("#uploadButton13").uploadFiles()
  .then(uploadedFiles => {
	toInsert.url = uploadedFiles[0].fileUrl;
	return wixData.insert("Properties", toInsert);
    })
.then(results => {
//code code...
})
}
3

Thanks for the reply. I’m fairly knew to code; would you be able to explain what you mean by unsynchronised functions.

Also, I’ve added that in and it doesn’t seem to be working :sweat_smile:

4

@noahlovell I made a small fix. It should be toInsert.url = uploadedFiles[0]. fileUrl

What I meant is that the uploadFiles() method is a Promise meaning it runs in parallel to the next code line and therefore you have to wait for the upload to finish before you save it. In my code it does it.

5

@jonatandor35 Thanks for the help. With some help, I’ve found a way of uploading the image when they are uploaded and the submitting them to the database.

The page for submitting the information is perfect. The next and last issue I have is the page for updating the database, of which I’ve made a new post - https://www.wix.com/velo/forum/coding-with-velo/pre-fill-form-and-then-let-toupdate