CODEWITHSUNDEEP
angularfirebaseimage-processingfirebase-storage
MegaTron
MegaTron

Reputation: 3393

Angular / Firebase - How to resize an image before uploading

What I'm Using

What I'm trying to achieve

Where I'm stuck

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;
          }
        );
      }
    });
  }

Upvotes: 2

Views: 1763

Answers (1)

notnotundefined
notnotundefined

Reputation: 3771

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

Upvotes: 0

Related Questions