Ionic 5 Image Upload with NestJS & Capacitor: Capacitor App

This is the second part of a mini series on Image upload with Ionic. In this part we'll create an Ionic app with Capacitor so we can upload image files from the browser and iOS & Android apps!

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

👨‍💻Want to read instead of watch?

🤷‍♂️Want more Ionic tutorials?

⚡️Take my 7 Day Ionic Crash Course

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

❤️You can also find me...

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

[paragbhide]

Simon, every time I get any Ionic issue and after trying for days finally when I am about to give up on that or start thinking that there's no straight solution to it, your video solves it like a charm. The most important thing about your video is the way you explain it is so simple and easy to understand and the small coding hacks that turns out to be immensely essential which otherwise would have sunk the ship, is really awesome

[keuvy]

This video was very helpful, it helped me to get rid of some cordova plugins that I had on my capacitor project, thank you Simon, since I started working with Ionic (8 months ago), you have been very helpful.

[KonstantinStanchev]

Thanks for the amazing tutorial, Simon!!

[miner-vdqt]

rocking rocking ... I did image upload using three or four different plugin ... Thanks for the video

[thisisthelogic]

Simon, you're helping me more with Angular content than other "experts" with Ionic Vue content. Incredible! FYI I'm developing an ionic vue app. ¬¬´ Thanks a lot!

[swapnilburde]

Please make video on OCR with latest ionic

[SuryakantSoniIndia]

A video on architecture and structure of an enterprise level ionic smartphone app, please.

[hugoramos]

hello Simon, could you help me with a issue? I would like to send more than one image to back end selected with the input type="file" by pc, I hava sent the imgs at the backend yet a save these but I don't know how I can put this array in the home.page.html I have tried a lot of things but....
thank you so much for your videos!

[amarnathnani]

I need file upload only any avoid camera option in iOS and Android can you tell me any capacitor or Cordova plugin

[motodankz]

Hey Simon! Great video as always. Can you use capacitor along with cordova? Trying to open the gallery to select image and then upload it, however even after npx cap sync etc.. Still says that plugin is not installed! Maybe you can make a video on how to integrate capacitor plugins along with cordova plugins?

EDIT: If you do it, I would appreciate if you used this example of the cordova camera plugin along with the capacitor. Cheers!

[scottmcmahon]

If I was to build an app with ionic, do I have to use something like capacitor or Cordova to access images from the phone and upload them to the app so they can be sent to the server?

[exaigd]

I want you to teach how to make a data release button from the firebase as a video.
Thank you please

[piyushvashist]

How do we can resize the image while uploading?

[marwansalem]

great video! but I got issue while upload ! this one:

[Error] Origin capacitor://localhost is not allowed by Access-Control-Allow-Origin.
[Error] Failed to load resource: Origin capacitor://localhost is not allowed by Access-Control-Allow-Origin. (profile, line 0)

any suggestion for that ?

thanks and regards,

[Les_decouvertes]

Hi mister. It's awesome. I would like to create in my application a part (in tab3) discussions as for wathsapp that is to say send simple and voice messages with my contacts but I can not do it? I need your help. Thank you.

[abbasloda]

I love ionic and flutter, don't have to choose, the debate is healthy don't get me wrong. I think as a developer you should just enjoy all these technologies

[arunm]

Followed the code I can see this.b64toBlob(image.base64String, `image/${image.format}`) returns empty object on IOS simulator. and with camera plugin I can select one image at a time not able to select multiple images at same time.

[jared]

I tried it your way as I wasn't able to get it to work my way.

But your way also produces the same issue: "TypeError: Cannot read property 'click' of undefined".

This is in browser mode:
// Only allow file selection inside a browser
if (!this.platform.is('hybrid')) {
buttons.push({
text: 'Choose a File',
icon: 'attach',
handler: () => {

}
});
}