Best way to transfer a picture it to a server

Ionic Framework ionic-v3
21

I would want to do the same i.e., shrink the image and save it to amazon servers. can you share any code snippet for the same?

22

You shouldn’t need to use the Cordova plugin for file uploads anymore. When I wrote the first version of that six years ago, XHR2 wasn’t widely supported, but it is now so you can do it in the browser. You can either use the File or Blob directly, or add it to a FormData object if you want to send it as multipart/form-data with extra variables (this is probably easier to handle with PHP). You can even use the Angular Http class. The Blob can either be a File which you can grab using the FileReader API, or an actual Blob constructed some other way (File is a subclass of Blob). For example:

upload(http:Http, file:Blob, name:string, url:string){
    let formData: FormData = new FormData();
    formData.append("somevariable", this.myextravar);
    formData.append("photo", file, name);
    this.subscription = http.post(url, formData, {withCredentials: true}).map(o => o.json()).subscribe(o => {
        console.log('uploaded', o); 
    }, (err) => {
        console.error('upload err', err);
    })
}

Currently you’re not able to get access to progress events with the Http class. You can see the GitHub issue that tracks this below. There seems to be a pull request that fixes this waiting to be merged. You can do it now if you replace the XhrBackend with your own version or just use the XmlHttpRequest directly.

2 Likes
23

As far as resizing the image beforehand, here’s a jsfiddle. It also shows how to grab a blob from an HTML form input:

https://jsfiddle.net/ascorbic/wn655txt/2/

24

Hi what if I want to upload multiple files , from camera if I will take picture and store all images in one object then how would I transfer