Upload button doesn't send image in right format to my field in database.

Ask the community
,
1

Hello, i have a form in my site to register a boat. In that form i have some inputs two upload buttons
#uploadbutton1 ( that upload multiply pictures and send it for a MIDIA GALLEY field **album** on my db) that work perfect and a #uploadbutton2 that is set to upload only one image and send it for a IMAGE field **foto** in my db, but this is sending to my db in a wrong format .

Appreciate thank you very much if someone can help me

Page / https://www.bnycharter.com/formtest

Here is my code.

1280×960 173 KB

import wixUsers from “wix-users” ;
import wixData from “wix-data” ;
import wixLocation from ‘wix-location’ ;

let userId = wixUsers.currentUser.id;
let galleryItems = ;
let toSave = {userId: userId, album: };
let toSave2 = {userId: userId, foto: };

$w.onReady( function () {

$w( “#uploadButton1” ).fileType = “Image” ;
$w( “#uploadButton1” ).onChange( () => {

if ($w( “#uploadButton1” ).value.length > 0 ) {
$w( “#submit” ).disable();
$w( “#uploadButton1” ).buttonLabel = “Loading…” ;
$w( “#uploadButton1” ).startUpload()

.then( (uploadedFile) => {
galleryItems.push({type: “image” , src: uploadedFile.url});
$w( “#gallery1” ).items = galleryItems;
$w( “#gallery1” ).expand();
toSave.album.push({ “type” : “image” , “src” : uploadedFile.url});
$w( “#submit” ).enable();

 toSave.album.length >  1  ? $w( "#submit" ).label =  "Submit data"  : $w( "#submit" ).label =  "Submit data" ;

$w( “#uploadButton1” ).buttonLabel = “Add another image” ;
$w( “#uploadButton1” ).reset();
} )

. catch ( (uploadError) => {
console.log(File upload error: ${uploadError.errorCode});
console.log(uploadError.errorDescription);
} );
}
} );

let userInputs = [ $w( “#dropdown1” ), $w( “#dropdown2” ), $w( “#dropdown3” ), $w( “#dropdown4” ), $w( “#input1” ), $w( “#input2” ), $w( “#input5” ), $w( “#input6” ), $w( “#input7” ), $w( “#checkboxGroup1” ), $w( “#checkboxGroup2” ), $w( “#checkboxGroup3” ), $w( “#checkboxGroup4” ), $w( “#textBox1” ), $w( “#uploadButton2” ), ];
userInputs.forEach(e => {
e.onChange(event => {
userInputs.every(i => i.valid) ? $w( “#submit” ).enable() :$w( “#submit” ).disable();

})
})

$w( “#submit” ).onClick((event) => {

toSave.title = $w( “#input1” ).value;
toSave.year = $w( “#input2” ).value;
toSave.beam = $w( “#input5” ).value;
toSave.halfTime = $w( “#input6” ).value;
toSave.fullTime = $w( “#input7” ).value;
toSave.listedFor = $w( “#dropdown1” ).value;
toSave.cabins = $w( “#dropdown2” ).value;
toSave.toilets = $w( “#dropdown3” ).value;
toSave.guests = $w( “#dropdown4” ).value;
toSave.features = $w( “#checkboxGroup1” ).value;
toSave.features2 = $w( “#checkboxGroup2” ).value;
toSave.features3 = $w( “#checkboxGroup3” ).value;
toSave.features4 = $w( “#checkboxGroup4” ).value;
toSave.about = $w( “#textBox1” ).value;
toSave.foto = $w( “#uploadButton2” ).value;

$w( “#submit” ).label = “saving…” ;
$w( “#uploadButton1” ).disable();
$w( “#uploadButton2” ).disable();

$w( “#submit” ).disable();
wixData.save( “EstoqueMiami” , toSave, toSave2)

.then(() => {

$w( '#input1' ).value =  "" ; 
$w( '#input2' ).value =  "" ; 
$w( '#input5' ).value =  "" ; 
$w( '#input6' ).value =  "" ; 
$w( '#input7' ).value =  "" ; 
$w( '#dropdown1' ).value =  "" ; 
$w( '#dropdown2' ).value =  "" ; 
$w( '#dropdown3' ).value =  "" ; 
$w( '#dropdown4' ).value =  "" ; 
$w( '#checkboxGroup1' ).value =  "" ; 
$w( '#checkboxGroup2' ).value =  "" ; 
$w( '#checkboxGroup3' ).value =  "" ; 
$w( '#checkboxGroup4' ).value =  "" ; 
$w( '#textBox1' ).value =  "" ; 
$w( '#textBox1' ).value =  "" ; 

$w( "#submit" ).label =  "✓ Saved" ; 
$w( "#submit" ).disable(); 
$w( "#gallery1" ).items = []; 
$w( "#gallery1" ).collapse(); 
galleryItems = []; 
toSave = {userId: userId, album: []}; 
$w( "#uploadButton1" ).buttonLabel =  "Add an Image" ; 
$w( "#uploadButton1" ).enable();

})

})

})

2

You should only save the url string to this field, not the full image object.

3

.value only gets the image VALUE. You should check this post:
https://www.wix.com/corvid/forum/tips-tutorials-examples/create-a-photo-upload-form-fast

4

great link thanks , but im not very good coding, would like to know if someone here know where and what should i change in my code

5

how do i do that ?

6

@tfigueiracosta In order to save an uploaded image, you should do something like this:

import wixData from 'wix-data';
$w.onReady(() => {
$w('#uploadButton').onChange(event => {         
  if ($w("#uploadButton").value.length > 0) {  
  $w("#uploadButton").startUpload()
 .then(uploadedFile => {
const toSave = {photo: uploadedFile.url, /*other data such as userId etc...*/}
return wixData.save("CollectionName", toSave);
})
.then(r => {console.log(r)})
.catch(err => {console.log(err)});
}
  })
})