How to resize image before upload to server #720

New Issue

2017-03-31T10:41:02Z

tungphamsolver commented

2017-03-31 10:41:02 +00:00

(Migrated from github.com)

In express JS I use multer storage. And Angular 2 side I use ng2-file-upload but I can't find the way resize image. Thank for your attention.

👍 8

ravishan110 commented

2017-06-25 05:51:42 +00:00

(Migrated from github.com)

+1

EnchanterZero commented

2017-08-11 11:02:06 +00:00

(Migrated from github.com)

+1
Still looking for solutions.
I can get base64 and convert image and redraw a compressed one by canvas, then get a new base64.But I have no idea to add this new base64 into uploader.queue

+1 Still looking for solutions. I can get base64 and convert image and redraw a compressed one by canvas, then get a new base64.But I have no idea to add this new base64 into uploader.queue

Nicholas-Westley commented

2018-01-10 02:16:17 +00:00

(Migrated from github.com)

I used ng2-file-upload in conjunction with ng2-img-max.

  <input
    type="file"
    name="upname"
    ng2FileSelect
    [uploader]="uploader"
    (change)="handleUpload($event)"
  />

  handleUpload(event) {
    this._ng2ImgMax.resizeImage(event.target.files[0], 100, 100).subscribe(
      result => {
        const newImage = new File([result], result.name);
        this.uploader.clearQueue();
        this.uploader.addToQueue([newImage]);
        this.uploader.uploadAll();
      },
      error => console.log(error)
    );
  }

I used ng2-file-upload in conjunction with ng2-img-max. ``` <input type="file" name="upname" ng2FileSelect [uploader]="uploader" (change)="handleUpload($event)" /> ``` ``` handleUpload(event) { this._ng2ImgMax.resizeImage(event.target.files[0], 100, 100).subscribe( result => { const newImage = new File([result], result.name); this.uploader.clearQueue(); this.uploader.addToQueue([newImage]); this.uploader.uploadAll(); }, error => console.log(error) ); } ```

👍 1

nsahu123 commented

2019-03-11 08:39:26 +00:00

(Migrated from github.com)

Hi I am getting global.service.ts:68 Cannot read property 'name' of undefined

onFileChange(event): void{
// console.log('resize');
//console.log(event);
let self = this;
let extension: string = '';

    let fileDetailsObj: any = {};
    self.pageData.errMsg = "";
    self.pageData.isError = false;
    let fileList: FileList = event.target.files;
    //console.log('resize'); 
    // console.log(event.target.files);
    // self.resizeImage = this.ng2ImgMax.resizeImage(event.target.files,1500, 375);
   //  self.uploadedImage = new File([self.resizeImage ], self.resizeImage.name);
   self.ng2ImgMax.resizeImage(event.target.files[0], 1500, 100).subscribe(
    result => {
      const newImage = new File([result], result.name);
      if(fileList.length > 0) {
        let imgCount = 0;
        self.addImg(imgCount, newImage, fileDetailsObj, extension);
    }
    },
    error => console.log(error)
  );
   // console.log(self.uploadedImage);
    
   // self.upload(fileDetailsObj);
   // console.log(fileList);
}

Hi I am getting global.service.ts:68 Cannot read property 'name' of undefined onFileChange(event): void{ // console.log('resize'); //console.log(event); let self = this; let extension: string = ''; let fileDetailsObj: any = {}; self.pageData.errMsg = ""; self.pageData.isError = false; let fileList: FileList = event.target.files; //console.log('resize'); // console.log(event.target.files); // self.resizeImage = this.ng2ImgMax.resizeImage(event.target.files,1500, 375); // self.uploadedImage = new File([self.resizeImage ], self.resizeImage.name); self.ng2ImgMax.resizeImage(event.target.files[0], 1500, 100).subscribe( result => { const newImage = new File([result], result.name); if(fileList.length > 0) { let imgCount = 0; self.addImg(imgCount, newImage, fileDetailsObj, extension); } }, error => console.log(error) ); // console.log(self.uploadedImage); // self.upload(fileDetailsObj); // console.log(fileList); }

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: dc/ng2-file-upload#720