Angular / Firebase - How to resize an image before uploading

Question

What I'm Using

• Angular
• Firebase

What I'm trying to achieve

• Uploading an image to firebase (got this down)

• Resizing the image before uploading

Where I'm stuck

• So I can successfully upload an image to firebase storage

• What I'd like to avoid is users uploading images larger than 300 x 300

Question

1. How can i ensure that any image someone uploads is resized appropriately so that my storage / costs aren't increased with 4000px images?

My Upload Service

Below is how my component successfully uploads to firebase. If anyone can assist on how to resize / reduce the image size before it gets uploaded, I would be exceptionally grateful!

uploadImage(upload: Upload) {
    this._subscription = this.authService.user.subscribe(user => {
      if (user) {

        // Generate a new firebase key 
        let newPostKey = firebase.database().ref().child('albums').push().key;


        // Create a reference to the firebase storage
        this.imagePathString = 'thumbnail/' + newPostKey + '/thumbnails';

        const storageRef = firebase.storage().ref();
        const uploadTask = storageRef.child(this.imagePathString).put(upload.file);

        // Upload task initiated - View progress and update real time database
        uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED,
          (snapshot) => {
            upload.progress = (uploadTask.snapshot.bytesTransferred / uploadTask.snapshot.totalBytes) * 100;
            console.log(upload.progress);
          },
          (error) => {
            // upload failed
            console.log(error)
          },
          () => {
            return undefined;
          }
        );
      }
    });
  }

Answer 1

Have you tried ng2-img-cropper ? For demo check this plunkr