Hello Simon that's great tutorial, but i have a problem after take from camera and save to local storage, i try to close the app and open again then I get with same picture from my library, there is no object when convert to blob inside on readFile function with reader.onload
image upload with camera work but from library not upload images , give error "error while storing file" and also when app is close and then open it again what i see image not shown
Thanks for this tutorial Simon! Very handy especially with people starting up with Ionic. One thing though, have you encountered some issues with the updateStoredImages function during adding a new image? I had some sort of issue with the thumbnail displaying a broken image and threw some errors in debugger console saying "path" was null (resPath I think). I changed the line that concatenates the new value to the images variable from [newEntry, ...this.images] to this.images.concat(newEntry) and it worked fine now. Weird though because both approaches work the same way. Just sharing this in case anyone else had this issue.
How can I write a ionic function where I can upload an file and then returning its URL in service save a register whit other form data? I need an example code. Excuse my eanglish.. greatings
Great tutorial and help a lot. But I got stuck at uploading image. readFile(file: any) { const reader = new FileReader(); this.presentToast("readFile Data"); reader.onload = () => { this.presentToast("readFile inside onload"); const formData = new FormData(); const imgBlob = new Blob([reader.result], { type: file.type }); formData.append("file", imgBlob, file.name); this.uploadImageData(formData); }; // reader.readAsDataURL(file); reader.readAsArrayBuffer(file); } readfile inside onload toast never comes and it never goes inside reader.onload. What should I do? Please help. Thanks in advance.
Thanks for this tutorial. but how can I access files from sd card and phone memory of the android devices? actually, I want to know about 'android path - publi path and project path' and also 'android_asset'.
@ não... Eu vi num post que o ionic está com problemas em mostrar imagens da galeria. Só consigo mostrar as imagens quando tiramos fotografia com a câmera. Se calhar não há solução até ao momento 🤷🏻♀️ mas se descobrires diz-me por favor!
Thank you for this awesome tutorial, I'm still facing a problem: When using the Ionic DevApp and selecting an image from my iOS gallery I always get the following error message in the terminal: [ng] [console.warn]: "Native: tried calling WebView.convertFileSrc, but the WebView plugin is not installed." [ng] [console.warn]: "Install the WebView plugin: 'ionic cordova plugin add cordova-plugin-ionic-webview'" Everything works fine using the xCode iOS simulator but it't not working in the DevApp. I have installed the "cordova-plugin-ionic-webview" of course and also tried replacing the "CDVWKWebViewEngine.m". Could you please help here? Thank you so much in advance.
The Ionic DevApp has a fixed set of plugins, and for real testing I don't recommend to use it. It's a different environment that is nice and fast, but for a real test just build the app to a device and use it from there, that's a lot closer to reality then!
5 лет назад
I did the same a couple of weeks ago to upload to nodejs back-end, but much more simpler, using simple html type=file. No Cordoba modules or any image path problems. And it was compatible with the browser and Android. But I didn't include camera Cordova, on Android the menu was popping up to select file, camera, etc
nice tutorial Simon one issue when you quit the app and launch it again the app seems not to load the images also when we delete the photos and go to the cache folder the images are still there (Android)
Do you have a solution to automatically delete the image after successfully uploading it to the server? I am able to remove the value of the STORAGE_KEY but I can't figure out how to use this.file.removeFile() after file upload is finished. Basically I need the deleteImage() function to be executed right after upload but I can't figure out the right parameters. Thank you in advance!
What are the errors then? Because the function requires basically the same parameters like before (path to the folder, name of the file) so it can only be an issue of the wrong path!
Hello Simmon, Thanks for the tutorial. i have been watching you for a while and your content is really solid. is there an updated version of this tutorial for capacitor?
@@galaxies_dev hi Simon Please include selecting and uploading Multiple images . Also would this approach work for multiple image as well. I am using imagePicker to select images . Looking for way to upload all selected image in one go . Thanks a lot for all the content you put !!!
hello master, to include native sms throws me the following error, I think I should request permissions but nowhere do I get documentation about this, I am using ionic checkpermission and requestpermission but I still can't get the permissions, do you know anything about this?
I took the photos in ionic 3 with FILE_URI and I did not recognize the path of the iamgen on the device and in turn I could not move the files locally on the device. I do not see that you specify here the FILE_URI or DATA_URI but it works for you !! Thank you!
hi, the image is not uploaded ... and i notice that the URL es never called, i will make a debug with my phone and i report if i correct the issue .... by the way, in android it said that the image can not been recognized by the apk in the moment that i must save in to the storage
Apparently Cordova plugins only work inside an app, but there is already the Web API which allows access to the camera as well (or you could give Capacitor a try)
I used your code. But i got a problem pathForImage(img) { if (img === null) { return ''; } else {
let converted = this.webview.convertFileSrc(img); return converted; } } i dont got everything back from converted If use this.presentToast(img); before let converted = this.webview.convertFileSrc(img); i got the file:///..... back. But if i use this.presentToast(converted); after let converted = this.webview.convertFileSrc(img); i got nothing What can be the problem?
@@galaxies_dev Nein da kommt kein Fehler bzw. wüsste ich nicht wo ich den Fehler sehen würde! Es kommt einfach nix züruck. Es sollte doch auch mittlerweile funktionieren wenn ich die Plugins ohne Beta nutze. Wobei ich es auch mit den Beta Version probiert habe.
Hi there! Do any of you guys know how to obtan window.WEBVIEW_SERVER_URL from webView, to use it in a specific class? I've been trying several workarounds but I can't make convertFileSrc return nothing but emptiness :(
Thanks for the nice tutorial. But I am facing some issues with the plugin. For android selection from Gallery is not working. Application crashes after capturing image. stackoverflow.com/questions/55522482/ionic-4-native-camera-plugin-issues
Hello Sinon all right, thanks for your tutorial, it worked for me only on camera, in the gallery presents or error. {code: 1, message: "NOT_FOUND_ERR"}
Simmon hellou, i have a question, how i do for take the image for the storage with capacitor and send to backend???...
Awesome.... thanks for this tutorial Simon
Hello Simon
that's great tutorial, but i have a problem
after take from camera and save to local storage, i try to close the app and open again
then I get with same picture from my library, there is no object when convert to blob inside on readFile function with reader.onload
thank you for the tutorial , but please make a videos on ionic 4 with capacitor images upload
image upload with camera work but from library not upload images , give error "error while storing file" and also when app is close and then open it again what i see image not shown
I am having the same issue. and when i try to upload from camera, its not appending image in formData
Did you solve this? I really need the solution
awesome tutorial
Hello Sir,this is amazing..thank you so much. Please how to upload all the images taken not one at a time but a function to upload all
Thanks for this tutorial Simon! Very handy especially with people starting up with Ionic.
One thing though, have you encountered some issues with the updateStoredImages function during adding a new image? I had some sort of issue with the thumbnail displaying a broken image and threw some errors in debugger console saying "path" was null (resPath I think). I changed the line that concatenates the new value to the images variable from [newEntry, ...this.images] to this.images.concat(newEntry) and it worked fine now. Weird though because both approaches work the same way. Just sharing this in case anyone else had this issue.
no didn't encounter that but thanks for posting your way here for reference :)
How can I write a ionic function where I can upload an file and then returning its URL in service save a register whit other form data? I need an example code. Excuse my eanglish.. greatings
Awesome, thanks! I was struggling to do a similar approach, but with a few modifications of your tutorial I could achieve what I trying to do.
Elter Souza Glad it worked Elter!
Great tutorial and help a lot.
But I got stuck at uploading image.
readFile(file: any) {
const reader = new FileReader();
this.presentToast("readFile Data");
reader.onload = () => {
this.presentToast("readFile inside onload");
const formData = new FormData();
const imgBlob = new Blob([reader.result], {
type: file.type
});
formData.append("file", imgBlob, file.name);
this.uploadImageData(formData);
};
// reader.readAsDataURL(file);
reader.readAsArrayBuffer(file);
}
readfile inside onload toast never comes and it never goes inside reader.onload.
What should I do?
Please help.
Thanks in advance.
Perhaps the file at the path "file" doesn't exist?
@@galaxies_dev Okay. Let me check for that. But it does show the image in app.
I have done it in another method. But, thanks for your help. Now I am converting image to base 64 and sending it to my api.
Thanks for this tutorial.
but how can I access files from sd card and phone memory of the android devices? actually, I want to know about 'android path - publi path and project path' and also 'android_asset'.
Hi Sir,
I am getting "Error while storing file" This error
Did you solve this? I really need the solution
@@beatrizteixeira4220 oi, conseguiu resolver? o meu tmb da erro ao tentar injetar ChangeDetectorRef
@ não... Eu vi num post que o ionic está com problemas em mostrar imagens da galeria. Só consigo mostrar as imagens quando tiramos fotografia com a câmera. Se calhar não há solução até ao momento 🤷🏻♀️ mas se descobrires diz-me por favor!
i just start new application maybe it's android ressources probléme
Simon .. how i can upload files in background tasks and not cancel operation when close app?
Thank you for this awesome tutorial, I'm still facing a problem:
When using the Ionic DevApp and selecting an image from my iOS gallery I always get the following error message in the terminal:
[ng] [console.warn]: "Native: tried calling WebView.convertFileSrc, but the WebView plugin is not installed."
[ng] [console.warn]: "Install the WebView plugin: 'ionic cordova plugin add cordova-plugin-ionic-webview'"
Everything works fine using the xCode iOS simulator but it't not working in the DevApp.
I have installed the "cordova-plugin-ionic-webview" of course and also tried replacing the "CDVWKWebViewEngine.m".
Could you please help here? Thank you so much in advance.
The Ionic DevApp has a fixed set of plugins, and for real testing I don't recommend to use it. It's a different environment that is nice and fast, but for a real test just build the app to a device and use it from there, that's a lot closer to reality then!
I did the same a couple of weeks ago to upload to nodejs back-end, but much more simpler, using simple html type=file. No Cordoba modules or any image path problems. And it was compatible with the browser and Android. But I didn't include camera Cordova, on Android the menu was popping up to select file, camera, etc
nice tutorial Simon one issue when you quit the app and launch it again the app seems not to load the images also when we delete the photos and go to the cache folder the images are still there (Android)
Do you have a solution to automatically delete the image after successfully uploading it to the server? I am able to remove the value of the STORAGE_KEY but I can't figure out how to use this.file.removeFile() after file upload is finished.
Basically I need the deleteImage() function to be executed right after upload but I can't figure out the right parameters.
Thank you in advance!
What are the errors then? Because the function requires basically the same parameters like before (path to the folder, name of the file) so it can only be an issue of the wrong path!
Hello Simmon,
Thanks for the tutorial. i have been watching you for a while and your content is really solid.
is there an updated version of this tutorial for capacitor?
There'll soon be another tutorial for image upload from Ionic with Capacitor, yes!
Simon Grimm Thanks alot. I would be waiting for this tutorial 🙏🏾
@@galaxies_dev hi Simon Please include selecting and uploading Multiple images . Also would this approach work for multiple image as well. I am using imagePicker to select images . Looking for way to upload all selected image in one go . Thanks a lot for all the content you put !!!
Thanks so much, sorry I need some help to convert it to cloudinary storage image I am a little missed and I am not sure how covert to
Have you managed to do that Felipe? if so, would you mind sharing the steps? thanks
hello master, to include native sms throws me the following error, I think I should request permissions but nowhere do I get documentation about this, I am using ionic checkpermission and requestpermission but I still can't get the permissions, do you know anything about this?
You can directly use the SMS plugin to request permission, check the docs here: github.com/cordova-sms/cordova-sms-plugin
I took the photos in ionic 3 with FILE_URI and I did not recognize the path of the iamgen on the device and in turn I could not move the files locally on the device. I do not see that you specify here the FILE_URI or DATA_URI but it works for you !! Thank you!
It seems like my [src]=img.path not correct because i can't see any images just the default icon instead.
great tutorial..
but I want to upload photo with id,name,etc into mysql..
would tou like to give the tutorial ?
You can add all this data in your request to your backend and then handle the write operation to the SQL db on the server from there!
Have you considered doing one with Firestone??
for multiple images upload only once click can you give tutorial for same example
I'll see what I can do Trupti!
@@galaxies_dev its urgent i want to implement
hi, the image is not uploaded ... and i notice that the URL es never called, i will make a debug with my phone and i report if i correct the issue .... by the way, in android it said that the image can not been recognized by the apk in the moment that i must save in to the storage
Can this be done in ionic but in a browser instead of an app?
Apparently Cordova plugins only work inside an app, but there is already the Web API which allows access to the camera as well (or you could give Capacitor a try)
thank you simon for this videos, would you mind to do video tutorial on woocommerce api in ionic 4
Thanks, I am facing one problem.
In android it always give me error of CORS.
CAN YOU PLEASE HELP
are you using PHP on the server side?
Nope. We are using Java for the server side
I used your code. But i got a problem
pathForImage(img) {
if (img === null) {
return '';
} else {
let converted = this.webview.convertFileSrc(img);
return converted;
}
}
i dont got everything back from converted
If use this.presentToast(img); before let converted = this.webview.convertFileSrc(img);
i got the file:///..... back.
But if i use this.presentToast(converted); after let converted = this.webview.convertFileSrc(img);
i got nothing
What can be the problem?
Is there no error log? In general the function should convert and return something or at least throw an error!
@@galaxies_dev Nein da
kommt kein Fehler bzw. wüsste ich nicht wo ich den Fehler sehen würde! Es kommt einfach nix züruck. Es sollte doch auch mittlerweile funktionieren wenn ich die Plugins ohne Beta nutze. Wobei ich es auch mit den Beta Version probiert habe.
Yes, please use the plugin without beta as v4 is out of beta now!
Simon Grimm ok but i tried that already! Same Problem
@@mastershort I'm having the same issue here. Would you please share your solution if any found? Thanks a lot.
Hi there! Do any of you guys know how to obtan window.WEBVIEW_SERVER_URL from webView, to use it in a specific class? I've been trying several workarounds but I can't make convertFileSrc return nothing but emptiness :(
Nobody? I'm still stuck with this.
Thanks a lot for this video. You are the best!!!
Hi sir how to give a print option from mobile to printer?please sir
sois lo maximo amigo, gracias
The image is saved in my phones gallery, but not shown in app and not uploaded, no toasts shown either.
u found a solution
great vid... perfect length ... perfect format.
is this work for ionic 4 beta version???
v4 is released so you shouldn't have to use the beta anymore!
Help please !
Error: Cannot find module
My Readeer.onload Event Is Not Fireing can Any One Help in this
You can catch the errors with onerror as well, perhaps you can see a reason why it's not firing with an error message then!
I suffer from same problem
good explained! But your front camera section it's to big so it takes away space. Thanks for sharing!
Yes I messed up the editing for this video, I'm sorry :/
Big up !
Hi can u create a tutorial for ionic 4 map
Can you give me the code for asp.net instead of php uploading code
Thanks for the nice tutorial. But I am facing some issues with the plugin. For android selection from Gallery is not working. Application crashes after capturing image.
stackoverflow.com/questions/55522482/ionic-4-native-camera-plugin-issues
Hello Sinon all right, thanks for your tutorial, it worked for me only on camera, in the gallery presents or error.
{code: 1, message: "NOT_FOUND_ERR"}
Hmm does your app not have access to the photo library perhaps?
@@galaxies_dev
Hello Simon, I allow access, when I capture the camera it works, apnea a gallery that is not allowed.
did you fix it?
Invite us to drink coffee !
Hello sir good video
can u please tell me the dir of uploads folder and file how to save it in htdocs???
My image is not uploading
my neither .... :P and in android is not saved in to the storage ... :(
u could use nodejs btw..
Ujjwal Kumar you know, when I do it with nose people ask for PHP and vice versa x)
pls provide php also...
Ionic and php video continues sir
Uncaught (in promise): TypeError: Cannot read property 'is' of undefined
if (this.platform.is('android') && sourceType === this.camera.PictureSourceType.PHOTOLIBRARY)
ERR_CLEARTEXT_NOT_PERMITTED :(
In your config.xml add
Inside
@@meesvanwel256 Thank youuuuuuuuuuuuuuuuuuuuuuuuu
`ionic cordova run browser`
Simon, Hi. Thank you for your excellent tutorials. I have a question. Is that plant behin you a marihuana? LOL
Lol no but it always looked like it :D
make timestamps next time dude, i dont want to watch the whole video...
I'll try, thanks for the idea!
filePath undefined so upload not working,please Sir any help is much appreciated