Image Upload Problem

I have written a function to upload a bunch of stuff to a collection, including a rich text block in CKEditor, as Editor X doesn’t have a rich text input field (ARRGH!).

It all works except the image which is showing on the page, so it’s been uploaded, yet the toSave array shows image: false…so I guess it hasn’t?

I am confused. Is it maybe a timing issue on the actual upload of the image and returning of the URL?..or have I just done something dumb here that I can’t see? (it’s often the latter).

Wix, if you’re watching, please add a Rich Text Input Box in Editor-X. Using CKEditor has cost me so much extra work.

Simon.

function nonmemberSubmit(receivedData){

//upload image
 $w("#uploadButton1").uploadFiles()
 .then( (uploadedFiles) => {
 uploadedFiles.forEach(uploadedFile => {
 $w("#hiddenImage").src = uploadedFile.fileUrl;
 })
 })
 .catch( (uploadError) => {
 console.log("File upload error: " + uploadError.errorCode);
 console.log(uploadError.errorDescription);
 });

//submit data to collection
let toSave = {
"title": $w('#title').value,
"longDescription": receivedData,
"shortDescription": $w('#shortDescription').value,
"closingDate": $w('#closingDate').value,
"salary": $w('#salary').value,
"contractType": $w('#contractType').value,
"hours": $w('#hours').value,
"location": $w('#location').value,
"company": $w('#orgName').value,
"applicationUrl": $w('#applicationUrl').value,
"applicationEmail": $w('#applicationEmail').value,
"author": $w('#author').value,
"authorEmail": $w('#authorEmail').value,
//"organisation":     $w('#orgName').value,
"image": $w('#hiddenImage').src,
};

console.log(toSave);

wixData.save("JobPage", toSave)
 .then( (results) => {
 let item = results; //see item below
 //is user logged in?
 let user = wixUsers.currentUser;
 let isLoggedIn = user.loggedIn; // true
 if (isLoggedIn){
 wixWindow.openLightbox("MemberJobPayment");
 }
 else {
 wixWindow.openLightbox("NonMemberJobPayment");
 }
 } )
 .catch( (err) => {
 let errorMsg = err;
 wixWindow.openLightbox("FailedPost");
 } );
}

You’re saving it before the image got uploaded.
It’s a Promise and you should wait for it.
for example move the save into the .then() part of the uploadButton.

(But I’d suggest to upload the image before the user clicks Submit to save time, and to disable the Submit button until the image is uploaded).

The image is very small so I’m not going to implement that second piece of advice but I will fix the promise issue right away. thanks for your help again!

Once I learned a bit more about promises, this was easy to fix. Thanks!

You’re welcome :slight_smile: