Navigation

    Quasar Framework

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    1. Home
    2. tanaychatterji
    • Profile
    • Following 0
    • Followers 0
    • Topics 0
    • Posts 4
    • Best 0
    • Groups 0

    tanaychatterji

    @tanaychatterji

    Just trying to be in sync with programming world :)

    0
    Reputation
    7
    Profile views
    4
    Posts
    0
    Followers
    0
    Following
    Joined Last Online
    Location Bhopal Age 25

    tanaychatterji Follow

    Latest posts made by tanaychatterji

    • RE: How to upload photos just taken with the cordova camera plugin

      @saro199 Welcome, thank god it helped you 🀣
      I thought I have to again code this logic 🀣

      posted in Framework
      tanaychatterji
      tanaychatterji
    • RE: How to upload photos just taken with the cordova camera plugin

      @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 πŸ™‚

      posted in Framework
      tanaychatterji
      tanaychatterji
    • RE: How to upload photos just taken with the cordova camera plugin

      @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 🀣

      posted in Framework
      tanaychatterji
      tanaychatterji
    • RE: How to upload photos just taken with the cordova camera plugin

      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πŸ˜„

      posted in Framework
      tanaychatterji
      tanaychatterji