How to upload photos just taken with the cordova camera plugin



  • @matroskin same issue , do you solved it?



  • Sir, I tried this using Cordova media capture and Axios to send an image to API which is working perfectly on postman

    data () {
        return {
          id: [],
          program: [],
          imagecapture : [],
          get_photos:[],
          pos:[],
        }
      },
    
    takepicture:  function (){
            
           navigator.device.capture.captureImage((mediaFiles)=>{
             this.imagecapture = mediaFiles;
            this.processPicture();
           });
    
        },
    async processPicture(){
    
          console.log(this.imagecapture[0]);
              var file = this.imagecapture[0];
              console.log(typeof file);
              
    
             var filePath = file.fullPath;
             var fileName = file.name;
             console.log(typeof fileName)
             console.log(typeof filePath)
             
             const imgFileEntry = await this.getFileEntry(filePath)
              // get the File object  
              const imgFile = await this.readFile(imgFileEntry)
              console.log(typeof imgFile);
    
             let form = new FormData();
                   form.append('photos',imgFile);
                  console.log(form);
    
                   var id = this.id;
                   //alert(id);
                   var tokentemp = localStorage.getItem("apitoken");
                  var finaltoken = tokentemp.replace('__q_strn|','');
                  alert(finaltoken);
                  console.log(finaltoken);
    
                  const headers = {
                        'content-type': 'multipart/form-data',
                        'Accept': 'application/json',
                        'Authorization': 'Bearer '+finaltoken,
                  
                  };
                  //alert(headers);
                  console.log(headers);
                
                   this.$axios.post(this.$baseURL+"addPhoto/"+id,form,{headers:headers}).then((response)  =>  {                   
                      console.log(response);
                    })
                    .catch((error)=>{
                      alert(error)
                      console.log(error)
                    });
    
        },
    
        
    
    getFileEntry (fileURL) {
          return new Promise((resolve, reject) => {
            window.resolveLocalFileSystemURL(
              fileURL,
              fileEntry => {
                resolve(fileEntry)
              },
              err => {
                reject(err)
              }
            )
          })
        }, 
        readFile (fileEntry) {
          return new Promise((resolve, reject) => {
            fileEntry.file(
              file => {
                let reader = new FileReader()
                reader.readAsArrayBuffer(file)
                reader.onload = () => resolve(reader.result)
                reader.onerror = error => reject(error)
              },
              err => {
                reject(err)
              }
            )
          })
        },
    

    but getting an array as this 500 internal server as it a Laravel server (Call to a member function getClientOriginalName() on null) due to proper blob not passed

    my postman request as javascript

    var form = new FormData();
    form.append("photos", "home/Pictures/testimage uploads/8.jpg");
    
    var settings = {
      "async": true,
      "crossDomain": true,
      "url": "https://sampleapi.com/api/v1/addPhoto/2",
      "method": "POST",
      "headers": {
        "Accept": "application/json",
        "Authorization": "Bearer eyJ.....",
        "cache-control": "no-cache",
        "Postman-Token": "6...."
      },
      "processData": false,
      "contentType": false,
      "mimeType": "multipart/form-data",
      "data": form
    }
    
    $.ajax(settings).done(function (response) {
      console.log(response);
    });
    

    I would appreciate if anyone can help me๐Ÿ˜„



  • @tanaychatterji the error is coming from your server, check there if you are really receiving a file. if itโ€™s a blob issue, check the file, maybe you need to convert it to one. iโ€™m using the code i sited above in production, to upload the image to aws S3, no problem with it.



  • @matroskin @seaton same here



  • I have the same problem struggling to get a work around. It works fine using uploader. My requirement is same as @neithanmo. My server api runs on flask/python and it strictly expecting a form with enctype multipart. On submit I donโ€™t receive any files in server side any help on this really appreciated.





  • @metalsadman

    sir, I solved it my self by searching more forums and so sorry for replying late and thank you for replying so fast ๐Ÿ™‚

    this is not from the server end but I think we have to first convert the file to base64 then to blob object then upload it to the server and it does work even with 30mb file sizes ๐Ÿ™‚

    tried the API with KOTLIN on android to upload image it works perfectly ๐Ÿ™‚ so outcome server is fine

    my code please have a look if I am doing something wrong?
    my takepicture() function with upload to server and working fine in every scenario

        takepicture: function (){
            /* This is for Codepen (using UMD) to work */
          const spinner = typeof QSpinnerGears !== 'undefined'
            ? QSpinnerGears // Non-UMD, imported above
            : Quasar.components.QSpinnerGears // eslint-disable-line
          /* End of Codepen workaround */
          
          
            var options = {quality: 50 };
           navigator.device.capture.captureImage((mediaFiles,options)=>{
             
            //  console.log(captureSuccess);
             this.imagecapture = mediaFiles;
              console.log(this.imagecapture[0]);
              var file = this.imagecapture[0];
              console.log(JSON.stringify(file));
             
    
             var filePath = file.fullPath;
             var fileName = file.name;
             console.log(fileName)
             console.log( filePath)
    
             this.$q.loading.show({
                            spinner,
                            spinnerColor: 'red-3',
                            spinnerSize: 200,
                            
                          delay: 400 ,
                          message: '<span class="text-h4">CONVERTING IMAGE</span><br><span class="text-h6">Please Wait</span>'
                        })
    
    function getFileContentAsBase64(path,callback){
        window.resolveLocalFileSystemURL(path, gotFile, fail);
                
        function fail(e) {
              alert('Cannot found requested file');
        }
    
        function gotFile(fileEntry) {
               fileEntry.file(function(file) {
                  var reader = new FileReader();
                  reader.onloadend = function(e) {
                       var content = this.result;
                       callback(content);
                  };
                  // The most important point, use the readAsDatURL Method from the file plugin
                  reader.readAsDataURL(file);
               });
        }
    }
             getFileContentAsBase64(filePath,function(base64Image){
      //window.open(base64Image);
      console.log(base64Image); 
      
    
    
      // Then you'll be able to handle the myimage.png file as base64
      var ImageURL = base64Image; 
      var block = ImageURL.split(";");
      var contentType = block[0].split(":")[1];
      var realData = block[1].split(",")[1];
      var blob = b64toBlob(realData, contentType);
    
    
    function b64toBlob(b64Data, contentType, sliceSize) {
            contentType = contentType || '';
            sliceSize = sliceSize || 512;
    
            var byteCharacters = atob(b64Data);
            var byteArrays = [];
    
            for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
                var slice = byteCharacters.slice(offset, offset + sliceSize);
    
                var byteNumbers = new Array(slice.length);
                for (var i = 0; i < slice.length; i++) {
                    byteNumbers[i] = slice.charCodeAt(i);
                }
    
                var byteArray = new Uint8Array(byteNumbers);
    
                byteArrays.push(byteArray);
            }
    
          var blob = new Blob(byteArrays, {type: contentType});
          return blob;
    }
      
      upload(blob);
      
    });
             
    
                                  
    
    
    //TODO: GET THE BLOB VARUIABLE OUTSIDE AVAILABE TO UPLOAD 
    var vm = this;
    function upload (data){
    var blob = data;
    console.log(blob);
    var coordinates = vm.latitude+'/'+vm.longitude;
    
    console.log(vm);
    
                        let form = new FormData();
                        form.append('photos',blob);
                        form.append('filename',fileName);
                        form.append('coordinates',coordinates);
                        console.log(form);
    
                        var id = vm.id;
                        //alert(id);
                        var tokentemp = localStorage.getItem("apitoken");
                        var finaltoken = tokentemp.replace('__q_strn|','');
                        //alert(finaltoken);
                        console.log(finaltoken);
    
                        const headers = {
                              'content-type': 'multipart/form-data',
                              'Accept': 'application/json',
                              'Authorization': 'Bearer '+finaltoken,
                        
                        };
                        //alert(headers);
                        console.log(headers);
                        vm.$q.loading.hide();
                        
                        vm.$q.dialog({
                                title: 'Confirm',
                                message: 'Would you like to Upload recently taken picture',
                                cancel: true,
                                 ok: {
                                    push: true
                                  },
                                  cancel: {
                                    push: true,
                                    color: 'negative'
                                  },
                                  persistent: true,
                              }).onOk(() => {
                                   
                                  LoadingBar.setDefaults({
                                      color: 'green',
                                      size: '15px',
                                      position: 'bottom'
                                    })
                                  LoadingBar.start()
                                  vm.$axios.post(vm.$baseURL+"addPhoto/"+id,form,{headers:headers}).then((response)  =>  {                   
                                  console.log(response);
                                   LoadingBar.stop()
                                  
    
                                          vm.$q.dialog({
                                                
                                                title: 'Alert',
                                                  message: 'Image uploaded'
                                              }).onOk(() => {
                                                vm.get_program_info();
                                              })
    
                                  
                                })
                                .catch((error)=>{
                                  alert(error)
                                  console.log(error)
                                });
                                console.log('ok pressed')
                              }).onCancel(() => {
                                vm.get_program_info();
                              }).onDismiss(() => {
                                vm.get_program_info();
                              })
    
                        
    
    
    }
    
     
    
            
    
           });
           
           
            
        },
            
    

    hope I am doing it right? and please forgive me for the references I have made in a hurry ๐Ÿ˜ž
    And Thank you sir for your guidance as i am a noob in this ๐Ÿคฃ



  • Hi @metalsadman @tanaychatterji , It worked when I convert the file as blob. I am able to upload without any issues.
    By the way @tanaychatterji we donโ€™t need o convert to base64, we can directly read the file as data url and convert to blob.
    I lost 48 hours on this. This forum helped me narrow down the issue. Appreciate your help. I love Quasar.



  • @saro199
    Hi, I tried without converting it to base64 but I got error in laravel Logs API endpoint as

    null in getClientOriginalName()
    

    because mediaFiles only return file URL, not an absolute one full Path, thatโ€™s why I converted it to base64 then blob then upload. But thank you for notifying the usual thing hope my code helped you ๐Ÿ™‚



  • @tanaychatterji
    You are absolutely correct. My API says it got the files, but there is no content. Realized after seeing your comment :).
    Thank you so much for the help and I really appreciate it. After changing to base64, I see the content in API.



  • @saro199 Welcome, thank god it helped you ๐Ÿคฃ
    I thought I have to again code this logic ๐Ÿคฃ


Log in to reply