Firebase/Ionic4 upload and Crop Images to storage

Question

Heyy, i am trying to upload a cropped image to firebase. I would prefer to use the ionic native "image-picker" and "Crop". I really dont know how to upload the image after cropping it, because it only returns the path of the new image.

I have already tryed something like this. This worked, but i was not able to crop the image. But as i mentioned, i would prefer using the native tools anyways.

      export interface UploadData {
        name: string;
        filepath: string;
        size: number;
      }
  uploadFile(event: FileList) {        
      // The File object
      const file = event.item(0);        
      // Validation for Images Only
      if (file.type.split('/')[0] !== 'image') {
       console.error('unsupported file');
       return;
      }        
      // The storage path
      const path = `whatever/${new Date().getTime()}_${file.name}`;        
      // File reference
      const fileRef = this.storage.ref(path);        
      // The main task
      this.task = this.storage.upload(path, file, { customMetadata });        
      this.snapshot = this.task.snapshotChanges().pipe(        
        finalize(() => {
          // Get uploaded file storage path
          this.UploadedFileURL = fileRef.getDownloadURL();
          this.UploadedFileURL.subscribe(resp => {
            this.addImagetoDB({
              name: file.name,
              filepath: resp,
              size: this.fileSize
            });
          }, error => {
            console.error(error);
          });
        }),
        tap(snap => {
            this.fileSize = snap.totalBytes;
        })
      );
    }

    addImagetoDB(image: UploadData) {
        const id = this.db.createId();

        // Set document id with value in database
        this.imageCollection.doc(id).set(image).then(resp => {
          console.log(resp);
        }).catch(error => {
          console.log('error ' + error);
        });
    }
}

This is how i would like to do it. But i really have no idea, how to upload it at this point.

    pickImage() {
      this.imagePicker.getPictures(this.imagePickerOptions).then((results) 
    => {
        // tslint:disable-next-line: prefer-for-of
        for (let i = 0; i < results.length; i++) {
          this.cropImage(results[i]);
        }
      }, (err) => {
        alert(err);
      });
    }     
    cropImage(imgPath) {
      this.crop.crop(imgPath, { quality: 50 })
        .then(
          newPath => {
            // ?????
          },
          error => {
            alert('Error cropping image' + error);
          }
        );
    }

Sorry, i am very new to this stuff. Thanks for your help :)

Answer 1

It seems that you might be able to do this without the crop feature being needed.

These are the options according to the docs:

options = {
    // Android only. Max images to be selected, defaults to 15. If this is set to 1, upon
    // selection of a single image, the plugin will return it.
    maximumImagesCount: int,

    // max width and height to allow the images to be.  Will keep aspect
    // ratio no matter what.  So if both are 800, the returned image
    // will be at most 800 pixels wide and 800 pixels tall.  If the width is
    // 800 and height 0 the image will be 800 pixels wide if the source
    // is at least that wide.
    width: int,
    height: int,

    // quality of resized image, defaults to 100
    quality: int (0-100),

    // output type, defaults to FILE_URIs.
    // available options are 
    // window.imagePicker.OutputType.FILE_URI (0) or 
    // window.imagePicker.OutputType.BASE64_STRING (1)
    outputType: int
};

So you could use:

options = {
    maximumImagesCount: 3,
    width: 800,
    height: 600,
    quality: 50,
    outputType: 1
};

From what I've been researching you could then put the image into Firebase Storage using:

storageRef.putString("Your base64 string substring variable", 'base64');

I'm not sure if this is enough to get you fixed up but I thought I would post what I had found anyway.

Answer 2

I just tried this, but it dosn´t work too. I have no idea why...

constructor(private imagePicker: ImagePicker, private crop: Crop,
    private file: File) {
      let storageDb = firebase.storage();
      this.storageRef = storageDb.ref();
  }


pickImage() {
  this.imagePicker.getPictures(this.imagePickerOptions).then((results) 
=> {
    // tslint:disable-next-line: prefer-for-of
    for (let i = 0; i < results.length; i++) {
      this.cropImage(results[i]);
    }
  }, (err) => {
    alert(err);
  });
}  


cropImage(imgPath) {
    this.crop.crop(imgPath, { quality: 50 })
      .then(
        newPath => {
          try {
            let n = newPath.lastIndexOf("/");
            let x = newPath.lastIndexOf("g");
            let nameFile = newPath.substring(n + 1, x + 1);
            this.file.readAsArrayBuffer(newPath, nameFile).then((res) => {
              let blob = new Blob([res], { type: "image/jpeg" });
              var uploadTask = this.storageRef.child('images/' + this.event.id).put(blob);
              uploadTask.on('state_changed', (snapshot) => {
                let url = uploadTask.snapshot.downloadURL;
                this.croppedImagepath = url;
              }, (error) => {
                alert("error: " + error);
              }, () => { 
                alert("uploaded");
                let url = uploadTask.snapshot.downloadURL;
                this.croppedImagepath = url;
              })
            })
          }
          catch (z) {
            alert('error beim erstellen des blobs' + z);
          }
        },
        error => {
          alert('Error cropping image' + error);
        }
      );
  }