How to save an uploaded image in a collection image field in JS code?

Ask the community
, ,
1

When using a Submit Button in a form, the image is stored perfectly in the collection image field by just connecting the Upload Button to the dataset image field.
For certain reasons, I need to code the Insert. I have the same upload button with the same connection. The below code just store the filename uploaded by the user. I need to store the image itself.

let toInsert = {
“image1”: $w(“#uploadButton1”).value,
}
wixData.save(“sellers”, toInsert)

2

Hi,
I recommend checking out this article about How to Use the Upload Button with Code.
After using the startUpload function, it returns an object with a url field of the image uploaded:

$w("#uploadButton1").startUpload()       
.then( (uploadedFile) => {         
    $w("#text1").text = "Upload successful";        
    $w("#image1").src = uploadedFile.url;     
 })

You can save this URL to your collection.

Good luck,
Tal.

3

Thanks, it works perfectly. The article was excellent as well.

4

Hi how would i save the url of the uploaded file to a collection?

5

Hi how would i save the url of the uploaded file to a collection?

6

I have used the following code, the let toInsert element is the code in focus. What should i do here please?

import wixData from ‘wix-data’;
export function uploadButton4_mouseIn(event) {
$w(‘#text73’).expand();
}
export function uploadButton4_change(event) {
$w(‘#button17’).expand();
$w(‘#text71’).expand();
$w(‘#text73’).hide();
}

export function button17_click(event) {
if ($w(“#uploadButton4”).value.length > 0) {
$w(“#text71”).text = Uploading ${$w("#uploadButton4").value[0].name};
$w(“#uploadButton4”).startUpload()
.then( (uploadedFile) => {
$w(“#text71”).text = “Upload successful”;
$w(“#image37”).src = uploadedFile.url;

let toInsert = {= {“image37”: $w(“#uploadButton4”).value,

};

wixData.insert(“freeImageUpload”, toInsert)
.then( (results) => {
let item = results; //see item below
} )
. catch ( (err) => {
let errorMsg = err;
} );

  }) 
  . **catch** ( (uploadError) => { 
    $w("#text71").text = "File upload error"; 
    console.log(`Error: ${uploadError.errorCode}`); 
    console.log(uploadError.errorDescription); 
  });

}
else {
$w(“#text71”).text = “Please choose a file to upload.”;
}
$w(‘#button17’).hide();
$w(‘#button18’).expand();
$w(‘#text72’).expand();

}

7

Fix your toInsert object up a bit!

 let toInsert = {"PROPERTY_ID_OF_FIELD":  uploadedFile.url  };
8

@christopher-derrell Hi Chris, i have added / changed the code. There are no errors but the image i’m uploading is not finding its way into the collection ?

9

export function button17_click(event) {
if ($w(“#uploadButton4”).value.length > 0) {
$w(“#text71”).text = Uploading ${$w("#uploadButton4").value[0].name};
$w(“#uploadButton4”).startUpload()
.then( (uploadedFile) => {
$w(“#text71”).text = “Upload successful”;
let toInsert =
{“freeImageUpload”:
uploadedFile.url };
$w(“#image37”).src = uploadedFile.url;

wixData.insert(“freeImageUpload”, toInsert)
.then( (results) => {
let item = results; //see item below
} )
. catch ( (err) => {
let errorMsg = err;
} );

  }) 
  . **catch** ( (uploadError) => { 
    $w("#text71").text = "File upload error"; 
    console.log(`Error: ${uploadError.errorCode}`); 
    console.log(uploadError.errorDescription); 
  });

}
else {
$w(“#text71”).text = “Please choose a file to upload.”;
}
$w(‘#button17’).hide();
$w(‘#button18’).expand();
$w(‘#text72’).expand();

}

10

sorted thanks, Chris

11

Ok great! No problem

12

A related question: I cannot simply use a URL field in a form to enter an image URL in an image field in a datasource, although with the datasource manager I can manually enter a URL in an image field.
Can I instead use an event trigger on the form submit button to grab an image URL that is entered in a text field and insert it by code as an image URL in a datasource image field? I’m interested in having data entered using provided image URLs from a central image CDN, rather than the data entry operator uploading actual images.
Thanks for your insights about this approach.