Upload multiple files with formdata please guide

Ionic Framework ionic-v3
1

here please check below code

public takePicture(sourceType, DestinationType) {
    var options = {
      quality: 100,
      sourceType: sourceType,
      destinationType: DestinationType,
      saveToPhotoAlbum: true,
      correctOrientation: true,
      mediaType: 2
      // allowEdit : true
    };


    this.camera.getPicture(options).then((imagePath) => {
      if (this.platform.is('android') && sourceType === this.camera.PictureSourceType.PHOTOLIBRARY) {
        this.filePath.resolveNativePath(imagePath)
          .then(filePath => {            
            this.lastImage = this.createFileName();           
            this.tempPath = "data:image/jpeg;base64," + imagePath;
            this.selectedImagePath = imagePath;
            this.signaturePad.fromDataURL(this.tempPath);
          });

      } else {
       
        this.lastImage = this.createFileName();

        this.tempPath = "data:image/jpeg;base64," + imagePath;
        this.selectedImagePath = imagePath;
        this.signaturePad.fromDataURL(this.tempPath);
      }
    }, (err) => {
      this.presentToast(err);
    });
  }

  private createFileName() {
    var d = new Date(),
      n = d.getTime(),
      newFileName = n + ".jpg";
    return newFileName;
  }

The above code will give me the images and and the path in “imagePath” that I am storing in an array and the “tempPath” is for displaying on signature that is working fine now but for uploading the multiple files like in below code how to send that I am not getting
Please check below code;;

public uploadImage() {
   
    let body: string = JSON.stringify({'postData': this.postData}); //here post data is like this this.postData.push({key:this.selectedImagePath},{key:this.selectedImagePath});
    // type: 'application/json',        
    let headers: any = new Headers({ 'Content-Type': 'application/json' }),
      options: any = new RequestOptions({ headers: headers }),
      url: any = this.uploadUrl;

    this.http.post(url, body, options)
      .subscribe((data) => {
        let message = data["_body"];
        message = JSON.parse(message);
        if (message.success == true) {
          window.localStorage.setItem("id", message.user_id);
          window.location.reload();
        }

        else {
          let alert = this.alertCtrl.create({
            title: 'Error',
            subTitle: message.message,
            buttons: ['OK']
          });
          alert.present();
        }
      });
  }
2

Hi @Nikhil_dhar123

Can you try

You can add multiple image in try below code and pass the array to api
handle all image separate and store

   var options = {
            quality: 50,
            destinationType: Camera.DestinationType.FILE_URI,
            sourceType: Camera.PictureSourceType.CAMERA,
            targetWidth: 200,
            targetHeight: 200
        };

        $cordovaCamera.getPicture(options).then(function(imageUri) {
            console.log('img', imageUri);
            $scope.images.push(imageUri);
                    
        }, function(err) {
        // error
        });

Thanks

3

Hey Hi thanks for replying ,
please check the below code I am already doing the same what I need to do howt to send in formData

public presentActionSheet(indx) {
    this.index = indx;
    let actionSheet = this.actionSheetCtrl.create({
      title: 'Select Image Source',
      buttons: [
      
        {
          text: 'Use Camera',
          handler: () => {
            this.takePicture(this.camera.PictureSourceType.CAMERA, this.camera.DestinationType.DATA_URL);
          }
        },
        {
          text: 'Cancel',
          role: 'cancel'
        }
      ]
    });
    actionSheet.present();
  }
4

Please suggest some one not getting …

 this.camera.getPicture(options).then((imagePath) => {
      if (this.platform.is('android') && sourceType === this.camera.PictureSourceType.PHOTOLIBRARY) {
        this.filePath.resolveNativePath(imagePath)
          .then(filePath => {                  
            this.formData.append('general_canvas',imagePath);                 
          });

the below is upload

 let body: string = JSON.stringify({'formData': this.formData});
    // type: 'application/json',        
    let headers: any = new Headers({'Content-Type': 'multipart/form-data'}),
      options: any = new RequestOptions({ headers: headers }),
      url: any = this.uploadUrl;

    this.http.post(url,this.formData, options).map(res => res.json())
      .subscribe((data) => {
2 Likes
5

Hi, do you have find the solution? I have the problem with uploading multiple images