How to Interpret Uploaded images into Array

Ask the community
,
1

Good day, pls I am trying to call image from uploader into and array.

I know text_Num_Arr is use for input numbers.
Pls what can i use for image from uploader?? is it name_img_Arr or name_FILES_Arr or name_UploadFile_Arr

e.g. in a code like
let uploader_UploadFile_Arr = [];
uploader_UploadFile_Arr[0] = 1;

2

With this code to get image URL value from uploader:

//UPLOADED IMAGES
$w(“#uploader”).onChange(() => {
calculator();
uploader_UploadFile_Arr[0] = $w(“#uploader”).value;
if ($w(“#uploader”).value.length > 0) {
quoteSummary_Arr[5] = 🧾Image Uploaded: ${uploader_UploadFile_Arr[0]};
calculator();
} else {
quoteSummary_Arr.splice(5, 1);
calculator();
}
});

3

$w (“#myUploadButton”). uploadFiles ()
. then ( ( uploadedFiles ) => {
uploadedFiles . forEach ( uploadedFile => {
console . log (‘File url:’, uploadedFile . fileUrl );
})
})

4

Sir pls can you help me correct this code. I am new to Velo and I have been able to gather all these codes online using my little html and php knowledge to understand it. All I want the code to do is get the image and add it to quotesummary array. Also i want the pay button to force user to upload an image before showing the checkout page. When I tested the code it doesn’t force me to upload it just skip upload and move to checkout. Also, the image to display just show object instead of image url or preview. Thanks in advance

import { createMyPayment } from ‘backend/payment’ ;
import wixPay from ‘wix-pay’ ;
import wixData from ‘wix-data’ ;

$w . onReady ( function () {

let uploader_UploadFile_Arr = [];
uploader_UploadFile_Arr [ 0 ] = 1 ;

quoteSummary_Arr [ 0 ] = “:clock12: Order Summary” ;

let price ;

//UPLOADED IMAGES
$w ( “#uploader” ). onChange (() => {
calculator ();
uploader_UploadFile_Arr [ 0 ] = $w ( “#uploader” ). value ;
if ( $w ( “#uploader” ). value . length > 0 ) {
quoteSummary_Arr [ 5 ] = 🧾Image Uploaded: ${ uploader_UploadFile_Arr [ 0 ]};
calculator ();
} else {
quoteSummary_Arr . splice ( 5 , 1 );
calculator ();
}

});

//GENERAL CALCULATOR FUNCTION📌
const calculator = function () {

//CALCULATOR
price = ( Number ( lpages_Num_Arr [ 0 ]) * Number ( wpages_Num_Arr [ 0 ]) * Number ( measurement_price_Arr . reduce (( a , b ) => a + b , 0 )) * Number ( qtypages_Num_Arr [ 0 ])). toFixed ( 2 );

$w ( “#totalPriceText” ). text = £ ${ Number ( price ). toLocaleString ( 'en-US' )};
$w ( ‘#totalPriceText’ ). text = £ ${ parseFloat ( price ). toFixed ( 2 )};

//SUMMARY TEXTS📖
$w ( “#quoteSummaryText” ). text = quoteSummary_Arr . join ( " " );

}

//WIX PAY API💳
$w ( “#paymentButton” ). onClick (() => {

if ( $w ( “#uploader” ). value . length > 0 )
{
$w ( ‘#uploader’ ). startUpload ()
. then (( UploadFile )=>{
let imgurl = UploadFile . url ;
let toInsert ={
“image” : imgurl
};
wixData . insert ( “SingleTransferUploads” , toInsert )
. then (( results )=>{
$w ( ‘#msg’ ). text = “Image Submitted Successfully” ;
$w ( ‘#msg’ ). expand ();
})
. catch (( err )=>{
$w ( ‘#msg’ ). text = err ,
$w ( ‘#msg’ ). expand ();
})

})
} else {
$w ( ‘#msg’ ). text = “Please choose an image” ;
$w ( ‘#msg’ ). expand ();
}

createMyPayment ( quoteSummary_Arr . join ( " " ), price )
. then (( payment ) => {
wixPay . startPayment ( payment . id ). then (( result ) => {

});
});
});

});

5

Try check each function’s responses, determine response type and depends on the response type move onto next function, use async if necessary when await for other function to be executed. (not necessary in this case, but its good practise)

$w ( “#paymentButton” ). onClick ( async () => {
if ( $w ( “#uploader” ). value . length > 0 ) {

  let  uploader  =  $w ( "#uploader" ) 
    . startUpload () 
    . then ( async  ( *UploadFile* )  =>  { 
      let  response  =  {}; 
      response . status  =  "Ok" ; 
      response . url  =  *UploadFile* . fileUrl ; 
      return  response ; 
    }); 

    if  ( uploader ?. status  !==  undefined ) { 
    if  ( uploader . status  ===  "Ok" ) { 


      let  toInsert  =  { 
        image :  uploader . url 
      }; 

      let  updateDb  =  wixData 
        . insert ( "SingleTransferUploads" ,  toInsert ) 
        . then (( *results* )  =>  { 
                  
          $w ( "#msg" ). text  =  "Image Submitted Successfully" ; 
          $w ( "#msg" ). expand (); 

          let  response  =  {} 
          response . status  =  "success" ; 
          return  response ; 
        }) 
        . catch (( *err* )  =>  { 
          ( $w ( "#msg" ). text  =  *err* ),  $w ( "#msg" ). expand (); 
          let  response  =  {} 
          response . status  =  "error" ; 
          return  response ; 
        }); 

        if ( updateDb ?. status  !==  undefined ) { 
            if ( updateDb . status  === "success" ) { 


                quoteSummary_Arr . push ( uploader . url ); 
                
                createMyPayment ( quoteSummary_Arr . join ( " " ),  price ). then (( *payment* )  =>  { 
                    wixPay . startPayment ( *payment* . id ). then (( *result* )  =>  {}); 
                  }); 


            } 
        } 


    } 
  } 
}  else  { 
  $w ( "#msg" ). text  =  "Please choose an image" ; 
  $w ( "#msg" ). expand (); 
}

});

Codedays
https://www.codedays-digital.com/

6

Thanks for the response bro but this code isn’t correct in my case sir. The code i sent have length input, width input, measurement input(dropdown), qty input, uploader and payment button all on same page. All the inputs and its quote summary are working fine. I only want to fix issue with image from uploader been attached to the quote summary along with other input quote summary. I sent the full code foe better understanding.

The uploader is also working but it is hard to know which image is uploaded to a particular order number. Pls kindly recheck my code well sir. Thanks sir.