Multiple Image Upload

@evripides wrote:

Hello!

Below I am trying to upload image to server and with success 1 image is uploading each time, but I want to upload multiple images, any ideas?

                const options: CameraOptions = {
                    quality: 100,
                    sourceType : this.camera.PictureSourceType.PHOTOLIBRARY,
                    destinationType: this.camera.DestinationType.FILE_URI,
                    encodingType: this.camera.EncodingType.JPEG,
                    mediaType: this.camera.MediaType.PICTURE,
                    saveToPhotoAlbum: false,
                    correctOrientation: true
                  }

                      this.camera.getPicture(options).then((imageData) => {
                        this.file.resolveLocalFilesystemUrl(imageData).then((entry:any)=>{
                          entry.file((file1)=>{
                          var reader = new FileReader();
                          reader.onload =  (encodedFile: any)=>{
                            var src = encodedFile.target.result;
                            this.photos.push(src);
                            this.photos.reverse();
                          }
                          reader.readAsDataURL(file1);   
                        })
                      }).catch((error)=>{
                        console.log(error);
                      })
                        //this.getGpsData(imageData);
                        //this.base64var = "data:image/jpeg;base64," + imageData; 
                        //this.getGpsData(this.base64var);
                        this.uploadPhoto(imageData);
                        this.submit_photos.push(imageData);
                        console.log(this.submit_photos);
                        
                        //const timestamp = new Date().getTime();
                        //this.submit(imageData)
                        //let test = (<any>window).Ionic.WebView.convertFileSrc(imageData);                        
                        //this.sendData(imageData);
                       
                        //exif.getData(this.base64,"ANY");
                        //console.log(this.base64var);
                        
                    }, (err) => {
                     console.log(err);
                     
                    });
          }
        },
        {
          text: 'Cancel',
          role: 'cancel', // will always sort to be on the bottom
          icon: 'close',
          handler: () => {
            //console.log('Cancel clicked');
          }
        }
      ]
    });
    actionSheet.present();
      
  }

   uploadPhoto(imageFileUri: any): void {
      this.file.resolveLocalFilesystemUrl(imageFileUri)
            .then(entry => (<FileEntry>entry).file(file => this.array_photos.push(file)))
            .catch(err => console.log(err));
     
    }
readFile(file: any) {
      const formData = new FormData();
      console.log("reading file", this.array_photos);
      for (let i = 0; i < this.array_photos.length; i++) {
        const reader = new FileReader();
        reader.onloadend = () => {
        var imgBlob = new Blob([reader.result], {type: this.array_photos[i]['type']});
        console.log(imgBlob);
        
        formData.append('file[]', imgBlob, this.array_photos[i]['name']);
        console.log("formdata",formData.getAll('file[]'));

      };
      this.postData(formData);

      reader.readAsArrayBuffer(this.array_photos[i]);
      }
    postData(formData: FormData) {
      console.log('postData',formData.getAll('file[]'));
      
      this.uploadImage(formData, 2, "title", "comments").then((result: ApiResponse) => { //userid 1 
        console.log('SUCCESS!')
          }, (err) => {
        console.log(err);
      });
    }
    uploadImage(formData, userid, title, comments) {
      console.log('uploadImage',formData.getAll('file[]'));

      return new Promise((resolve, reject) => {
      this.post('imagedata/userImage', {
                userid: userid,
                title: title,
                comments: comments,
              }, formData
            ).subscribe(response => {
      resolve(response);
            }, err => {
      console.log(err);
      reject(err);
            });
          })
    }
    post(endpoint: string, params: any = null, body: any = null) {
      return this.http.post<ApiResponse>('http://127.0.0.1:8003/api/' + '/' + endpoint, body, {
            params: params
          });
    }

The code is not waiting to finish the loop in readFile function

Thank you

Posts: 1

Participants: 1

Read full topic