Search code examples
angularimageionic-frameworkuploadform-data

Ionic upload an image from camera to server with additional form data

I've been searching around and I've read my topics about this issue but I believe I'm a bit stuck in disbelieve.

My use case: a user takes a picture with the camera, adds a title to it and sends it to a remote API.

From what I've read I either have to add a bunch of Cordova plugins (File, FilePath and FileTransfer ("Ionic2 tut, but I believe this would be the same for Ionic3"). Or I would have to set the camera capture mode from FILE_URI to FILE_URL but it leads to a possible performance drag on older phones but also the back-end (but that's not really a concern (yet) since I'm on a VPS and not a cloud service provider).

So, I ended up with two possible approaches.

  1. The simple way; just do a FILE_URL, don't care about the user experience possible being affected and send the data using http.post...
  2. The somewhat complexer way. First send the file using the file-mechanism I described by the link and plugins, send a custom header with the user_id from the signed in User, wait for the response which has created an entry in the table I need and then send a http.post.. with the form data to complete the record in the table.

I've also read about the FormData object, but since a significant portion of my users will have an iOS device, I think that will not suite my case? At least according to the mobile specs from MSDN. Mobile Safari support is not there. But I must admit I'm not really sure if iOS considers a compiled Cordova/Ionic app as a browser app. So possible this could be a third option?

How would best implement the use case? Or are there no more choices than the above described?

I don't think I'm unique in asking this question but I hope I've added enough context future readers end up to think question or questions alike and might find an answer. My back-end is PHP (Laravel), but that doesn't really matter in this case.

Solution

  • I overlooked the FileUploadOptions documentation which allows for a params property, which is exactly what I need.