How to use the aws-amplify.Storage.put function in aws-amplify

saveImageFromCanvas = () => {
    this.setState({ processing: true })
    var image = new Image()
    image.id = "pic" + getRandomInt()
    var canvas = document.getElementById("canvas");
    image.src = canvas.toDataURL();

    var blobBin = atob(image.src.split(',')[1]);
    var array = [];
    for(var i = 0; i < blobBin.length; i++) {
        array.push(blobBin.charCodeAt(i));
    }
    var file = new Blob([new Uint8Array(array)], {type: 'image/png'});

    const fileName = getRandomInt() + 'user_picture.png'
    Storage.put(fileName, file)
      .then(res => {
        const imageInfo = { imageName: fileName }
        API.graphql(graphqlOperation(Query, imageInfo))
          .then(data => {
            console.log('data:', data)
            const parsedData = JSON.parse(data.data.process.results)
            this.setState({
              processing: false,
              rekognitionData: parsedData.FaceDetails
            })
        })
        .catch(error => {
          console.log('error: ', error)
          this.setState({
            processing: false,
          })

handleBlob(blob, type, name) {
    const key = fileToKey({ type, name: sanitizeFilename(name.replace(/ /g, "_")) }, this.props.story.id);
    Storage.put(`files/${this.props.user.id}/${this.props.story.id}/${key}`, blob, {
      bucket: "data.interviewjs.io",
      level: "public",
      contentType: type,
    })
      .then(async result => {
        console.log(result);
        this.setState(
          {
            draft: {
              ...this.state.draft,
              value: `https://story.interviewjs.io/files/${this.props.user.id}/${this.props.story.id}/${key}`,
            },
          },
          () => this.props.updateDraft(this.state.draft)
        );
      })

pick: function(e) {
      const file = e.target.files[0];
      const { name, size, type } = file;
      logger.debug(file);

      logger.debug('upload photo to ' + this.path)
      Storage.put(this.path, file, { contentType: type })
        .then(data => {
          logger.debug(data)
          this.getPhoto()
        })
        .catch(err => logger.error(err));
    },
    imageError: function(e) {

saveFile = (labels) => {
    if (this.state.imageName === '') return
    this.setState({ processing: true })
    Storage.put(this.state.imageName, this.state.imageInfo)
    .then (result => {
      const image = {
        imageName: this.state.imageName
      }
      if (labels) {
        image.type = 'labels'
      }
      API.graphql(graphqlOperation(Query, image))
        .then(data => {
          const parsedData = JSON.parse(data.data.process.results)
          if (parsedData.FaceDetails) {
            this.setState({
              processing: false,
              rekognitionData: parsedData.FaceDetails
            })
          }

uploadFromFile(event) {
    const files = event.target.files;
    logger.debug('Uploading', files)

    const file = files[0];
    const { type } = file;
    Storage.put(this.userId + '/avatar', file, { contentType: type })
      .then(() => this.refreshAvatar())
      .catch(err => logger.error(err));
  }

load() {
        const { imgKey, body, contentType, level } = this.props;
        if (!imgKey) {
            logger.debug('empty imgKey');
            return;
        }

        const that = this;
        logger.debug('loading ' + imgKey + '...');
        if (body) {
            const type = contentType ? contentType : 'binary/octet-stream';
            const opt = {
                contentType: type,
                level: level ? level : 'public'
            };
            const ret = Storage.put(imgKey, body, opt);
            ret.then(data => {
                logger.debug(data);
                that.getImageSource();
            }).catch(err => logger.warn(err));
        } else {
            that.getImageSource();
        }
    }

const storage = file_arr.map(file => {
    let options: { [opts: string]: any } = { contentType: 'image/jpeg' };

    if (gallery) {
      options.metadata = {
        gallery
      }
    }

    return Storage.put(`temp/${file.name}`, file, options);
  });

load() {
        const { imgKey, body, contentType, level } = this.props;
        if (!imgKey) {
            logger.debug('empty imgKey');
            return ;
        }

        const that = this;
        logger.debug('loading ' + imgKey + '...');
        if (body) {
            const type = contentType? contentType : 'binary/octet-stream';
            const opt = {
                contentType: type,
                level: level? level : 'public'
            }
            const ret = Storage.put(imgKey, body, opt);
            ret.then(data => {
                logger.debug(data);
                that.getImageSource();
            })
            .catch(err => logger.warn(err));
        } else {
            that.getImageSource();
        }
    }