How can i upload image from camera/files like multipart/form-data?

Ionic Framework ionic-v3
1

hello every one.

I am trying to upload picture like multipart/form-data .

My postman is this :

setPhoto_Postman
setPhoto_Postman.png1585×383 29.5 KB

And i need to upload image using this URI .

At present I am use this in my component:

public takePicture(sourceType) {
    // Create options for the Camera Dialog
    var options = {
      quality: 50,
      sourceType: sourceType,
      saveToPhotoAlbum: false,
      correctOrientation: true
    };
    // Get the data of an image
    this.camera.getPicture(options).then((imagePath) => {
      // Special handling for Android library
      if (this.platform.is('android') && sourceType === this.camera.PictureSourceType.PHOTOLIBRARY) {
        this.filePath.resolveNativePath(imagePath)
          .then(filePath => {
            let correctPath = filePath.substr(0, filePath.lastIndexOf('/') + 1);
            let currentName = imagePath.substring(imagePath.lastIndexOf('/') + 1, imagePath.lastIndexOf('?'));
            this.copyFileToLocalDir(correctPath, currentName, this.createFileName());
          });
      } else {
        var currentName = imagePath.substr(imagePath.lastIndexOf('/') + 1);
        var correctPath = imagePath.substr(0, imagePath.lastIndexOf('/') + 1);
        this.copyFileToLocalDir(correctPath, currentName, this.createFileName());
      }
    }, (err) => {
      this.presentToast('No se cargo ninguna imagen.Inténtalo de nuevo.');
    });
  }

And this function to call service:

public uploadImage() {
    //this.navCtrl.setRoot(ChangeLocationPage);
   // File for Upload
    var targetPath = this.pathForImage(this.lastImage);
    // File name only
    var filename = this.lastImage;

    this.loading = this.loadingCtrl.create({
      content: 'Subiendo Imagen...',
    });
    this.loading.present();

    alert("TargetPath"+targetPath);
    alert("filename"+filename);
     this._up.uploadUserPicture(targetPath).then(rest=>{
       console.log(rest);
       this.loading.dismissAll()
       this.presentToast('Imagen Subida Correctamente');

     }, err => {
       this.loading.dismissAll();
       this.presentToast('ERR Imagen no subida');
     }).catch((err) => {
       this.loading.dismissAll()
       this.presentToast('Imagen no subida');
       this.presentAlertFailText("Error al Subir Imagen","Inténtalo otra vez");
       })
  }

My service is

 uploadUserPicture(userPicture) {
    console.log("uploadUserPicture");
    let url = URL_SERVICIOS + "/users/profile/photo";
    let token = localStorage.getItem("TOKEN");
    console.log("TOKENNN" + token);
    token="eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJyb2xlcyI6IltdIiwiaXNzIjoiQmx1dWxpbmsiLCJpZCI6IjI0MTQwMjkiLCJleHAiOjE1MjY0Nzg1MzF9.ylU7Z-JCPhxxn-bs0VMAaP2Xl8QtPEAUL6MV5hXbzz4";

    alert(typeof userPicture);

    let formData: FormData = new FormData();
    formData.append('profile', userPicture);
    let headers = new Headers();
    headers.append('Content-Type', 'application/x-www-form-urlencoded');
    headers.append('Authorization', 'Bearer ' + token);
    let options = new RequestOptions({headers: headers});

    return new Promise((resolve, reject) => {
      this.http.put(url, userPicture, options).subscribe((response: any) => {
        alert("Update PHOTO OK");
        console.log(response);
        console.log(typeof response);
        //JSON
        let js = response.json();
        console.log(typeof js);
        console.log(js.result);
        resolve(response);
      }, (error: any) => {
        alert("Update PHOTO SERVICE NOOK" + error.mensaje);
        reject(error.mensaje);
      })
    })
  }

So my service receive an string, when it should receive an image to upload toy my server.

How can i pass the image from my coomponent to my service ?

I’ve checked this tutorial

https://devdactic.com/ionic-2-images/

Thank you in advance

2

Hi, You got solution?

3 
import { Http, Headers, RequestOptions } from '@angular/http';
import 'rxjs/add/operator/map';

ImgUp(data,url,token)
  {
    var param = data;
    var headers = new Headers();
    headers.append('content-type','multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW');
    headers.append('Authorization','Bearer ' + token);
    let options = new RequestOptions({ headers: headers, withCredentials: true });
    return new Promise((response,error)=>{
      this.http.post(url,param,options)
      .subscribe( (res) => {
        console.log(res);
        response(res);
      },(err) => {
        error(err);
      });
    });
  }

hope this will help

1 Like