The Ionic 4 Images Guide (Capture, Store & Upload with POST)

In this tutorial we implement all image capturing functionalities for our Ionic 4 app!

#############################

#############################

You can also find me

#############################

[anroswell]

Simmon hellou, i have a question, how i do for take the image for the storage with capacitor and send to backend???...

[sivasankarchimata]

thank you for the tutorial, but please make a videos on ionic 4 with capacitor images upload

[joupomoti]

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

[ercelpetersotto]

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.

[danielchirinosr]

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!

[yoppysantoso]

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

[ElterSouza]

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.

[fariskp]

Awesome.... thanks for this tutorial Simon

[gergelygruda]

It seems like my [src]=img.path not correct because i can't see any images just the default icon instead.

[sasquelle]

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?

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

[santiagolopera]

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

[sameerahmed]

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

[rezwansaki]

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'.

[wilsondouglas]

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)

[vertobookavis]

thank you simon for this videos, would you mind to do video tutorial on woocommerce api in ionic 4

[Mohammed_AlAwlaqi]

Simon .. how i can upload files in background tasks and not cancel operation when close app?

[Felipecuevas]

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

[cpadilla]

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

[ensleydarku]

Have you considered doing one with Firestone??