React-draft-wysiwyg: How to upload images to Firebase Storage

[udarts]

I want to know how we can upload images from within the editor, directly to Firebase Storage?

[thefinnomenon]

I am using S3 but I think it should be similar.

Essentially the upload image callback function needs to return a promise resolving with { data: { link: 'url-to-the-image-here' } }. I wrapped my S3 upload in a promise & resolve with the image url. Back in the uploadImageCallBack function, in my then, I take the link & resolve, passing it to the editor.

function uploadImageCallBack(file) {
  return new Promise(
    (resolve, reject) => {
      console.log('Uploading image...');
      const filename = `${questionId}_${imageNum}`;
      uploadImage(file, filename)
      .then(link => {
        imageNum += 1;
        resolve({ data: { link } });
      })
      .catch( error => {
        reject(error);
      })
    }
  );
}

...

export function uploadImage(file, filename) {
  return new Promise(
    (resolve, reject) => {      
      if (!file) {
        reject('Invalid file.');
      }

      s3.upload({
        Key: `images/${filename}.png`,
        Bucket: bucket,
        Body: file,
        ACL: 'public-read'
      }, function(err, data) {
        if (err) {
          console.log('Error! ', err);
          return reject('There was an error uploading your image: ', err.message);
        }
        resolve(data.Location);
      });
    }
  );
}

[BrightonNgema]

Using the logic above,

uploadImageCallBack = (file) =>{
        return new Promise(
            (resolve, reject) => {
                console.log('Uploading image...');
                this.firebaseUpload(file)
                    .then(link => {

                        resolve({ data: { link } });
                    })
                    .catch(error => {
                        reject(error);
                    })
            }
        );
    }

    firebaseUpload = (file) =>{
        return new Promise(
            (resolve, reject) => {
                if (!image) {
                    reject('Invalid file.');
                }
                const uploadTask = storage.ref(`images/${file.name}`).put(file)
                uploadTask.on('state_changed',
                    (snapshot) => {
                        console.log(snapshot)
                    },
                    (error) => {
                        console.log(error)
                    }, (complete) => {
                        //Gets link back
                        storage.ref('images').child(file.name).getDownloadURL()
                            .then(url => resolve(url))
                    })
            }
        );
    }