CODEWITHSUNDEEP
androidangularionic-frameworkionic3
user280960
user280960

Reputation: 721

Unable to Upload Image to Server from ionic 3 Application

I am developing an app in ionic 3. I have a work flow where you can upload pictures using either camera or by selecting from gallery. First scenario is you choose camera and then send will upload the image directly to the server. Second scenario is you choose from gallery then select different name and parameter and click upload to upload the image.

Both are using the same concept of having a base64 image as below

this.uploadPicture = 'data:image/jpeg;base64,' + imageData;

the only difference in the options are : for Upload Picture:

let options: CameraOptions = {
  quality: 50,
  destinationType: this.camera.DestinationType.DATA_URL,
  encodingType: this.camera.EncodingType.JPEG,
  mediaType: this.camera.MediaType.PICTURE,
  sourceType : this.camera.PictureSourceType.PHOTOLIBRARY
};

for camera :

options: CameraOptions = {
   quality: 50,
   destinationType: this.camera.DestinationType.DATA_URL,
   encodingType: this.camera.EncodingType.JPEG,
   mediaType: this.camera.MediaType.PICTURE
};

Both uses same function to upload the images

Upload(image,latitude,longitude,token) {
    let url = this.appConfig.apiBaseUrl+"deals";
    let requestoptions = this.buildRequest(url,'POST');
    requestoptions.body = {
        'image':image
    };

    let params: URLSearchParams = new URLSearchParams();
    params.set('latitude', latitude);
    params.set('longitude', longitude);
    params.set('token',token);
    requestoptions.params = params;
    return this.http.request(new Request(requestoptions))
      .map(
          (response: Response) => {
            let res: Object = response.json();
            return res;
         }
      ).catch(error => {
          return Observable.throw(error.json());
     });
  }

The Problem is really weird:

1) When i click from camera directly, it works fine.

2) When i upload an image which is saved from internet to device ( e.g. whatsApp ), it works fine.

3) But When i take a image from gallery which is taken by phone Camera, The Request does not hit the api, with no errors. WEIRD !!!!, No Logs on Server Side, i can see the request have correct format.

Please Help me.

UPDATE

I found that the base64 string length from downloaded image is very much less than that of image from gallery.

Can someone tell me how to save copy of image (using options) from gallery before uploading then deleting it, so that the base64 string length is less, which may cause loop in uploading.

Upvotes: 2

Views: 695

Answers (1)

Sergey Rudenko
Sergey Rudenko

Reputation: 9235

I am not too familiar with your approach in doing http requests, but for the same tasks you have I used httpclient (Angular 5). I used formData to post blob type in this case:

uploadSnippetBlob(blob: Blob, snippetId: string) {
console.log("uploading to Azure blob storage...")
let headers = new HttpHeaders().set('Authorization', this.userData.token);
let formData = new FormData(); 
formData.append("snippet", blob);
return this.http.post(this.apiBaseUrl+`/api/my/snippets/${snippetId}/thumbnail`, formData, { headers })
    .pipe(
        retry(1),
        timeoutWith(7000, Observable.throw(new Error('uploadSnippetThumbnailImage API call timed out'))),
        catchError(this.handleError('uploadSnippetThumbnailImage'))
    )

};

Then in your component you subscribe to this method and deal with response/ error.

Upvotes: 2

Related Questions