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

tanaychatterji
@tanaychatterji
Just trying to be in sync with programming world :)
Latest posts made by tanaychatterji
-
RE: How to upload photos just taken with the cordova camera plugin
-
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 asnull 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
-
RE: How to upload photos just taken with the cordova camera plugin
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 scenariotakepicture: 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 -
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