S3 Uploader

index.html

<div id="drag-drop-area"></div>

s3-uploader.markdown

S3 Uploader

A Pen by Danish Aziz Satkut on CodePen.

License.

script.js

const FIVE_GB = 5 * 1024 * 1024 * 1024;

class EncodingError extends Error {
  constructor(fileID, ...options) {
    super(...options)
    
    // Maintains proper stack trace for where our error was thrown (only available on V8)
    if (Error.captureStackTrace) {
      Error.captureStackTrace(this, EncodingError)
    }
    
    this.name = "EncodingError"
    this.fileID = fileID
  }
}

class Zencoder extends Uppy.Core.Plugin {
  constructor (uppy, opts) {
    opts ||= {}
    super(uppy, opts)
    this.id = opts.id || 'Zencoder'
    this.type = 'post-processor'
    
    this.messages = {
      startingEncoding: 'Starting encoding...',
      failedToStart: "Failed to initiate encoding process.",
      encodingProgress: "Encoding videos...",
      encodingFailed: "Failed to encode video."
    }
    
    this.startEncoding = this.startEncoding.bind(this); // ← this!
    this.checkStatus = this.checkStatus.bind(this); // ← this!
    this.onError = this.onError.bind(this);
  }

  encode (file) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        if(file.name.match("523")) {
          return resolve(file);
        } else {
          return reject(new EncodingError(file.id, this.messages.failedToStart));
        }
      }, 2000);
    })
  }
  
  startEncoding (fileIDs) {
    fileIDs = fileIDs.filter(fileID => !this.uppy.getFile(fileID).error)
    
    const promises = fileIDs.map(fileID => {
        const file = this.uppy.getFile(fileID)

        this.uppy.emit('postprocess-progress', file, {
          mode: 'indeterminate',
          message: this.messages.startingEncoding
        });

        return this.encode(file).then(file => {
          console.debug("Encoded: ", file.name);
          
          // this.uppy.setFileState(file, { encodingStarted: true })
        }).catch(err => {
          console.error("Failed to start encoding: ", err)
          
          const file = this.uppy.getFile(err.fileID);
          this.uppy.emit('upload-error', file, err);
        });
    })
    
    const completeFailed = () => {
      fileIDs
        .map(fileID => this.uppy.getFile(fileID))
        .filter(file => file.error)
        .forEach(file => this.uppy.emit('postprocess-complete', file));
    }

    return Promise.all(promises).then(completeFailed)
  }
  
  encodingStatus (file) {
    return new Promise((resolve, reject) => {
      let progress = 0;
      
      setInterval(() => {
        if(progress >= 1) {
          return resolve(file);
        }
        
        this.uppy.emit('postprocess-progress', file, {
          mode: 'determinate',
          message: this.messages.encodingProgress,
          value: progress
        });
        
        progress += Number((Math.random() / 10).toFixed(2));
      }, 750)
    })
  }
  
  checkStatus (fileIDs) {
    const files = fileIDs.map(fileID => this.uppy.getFile(fileID)).filter(file => !file.error);
    
    console.log("Checking status: ", files.map(f => f.name));
    
    const promises = files.map(file => {
      return this.encodingStatus(file).then(file => {
        this.uppy.log("Finised encoding: ", file.name);
      }).catch(err => {
        console.error("Error while encoding: ", err);
      })
    })
    
    const completeAll = () => {
      fileIDs
        .map(fileID => this.uppy.getFile(fileID))
        .forEach(file => this.uppy.emit('postprocess-complete', file));
    }

    return Promise.all(promises).then(completeAll)
  }
  
  onError(err = null, fileID) {
    console.log("ERROR: ", err, fileID);
    
    const file = this.uppy.getFile(fileID);
    this.uppy.emit("postprocess-complete", file);
  }

  install () {
    this.uppy.addPostProcessor(this.startEncoding)
    this.uppy.addPostProcessor(this.checkStatus)
  }

  uninstall () {
    this.uppy.removePostProcessor(this.startEncoding)
    this.uppy.removePostProcessor(this.checkStatus)
  }
}

var uppy = Uppy.Core({
  debug: true,
  autoProceed: false,
  restrictions: {
    maxFileSize: FIVE_GB,
    maxNumberOfFiles: 3,
    minNumberOfFiles: 1,
    allowedFileTypes: ['image/*', 'video/*']
  }
});

uppy
  .use(Uppy.Dashboard, {
    inline: true,
    target: '#drag-drop-area',
    width: 700,
    height: 350,
    showProgressDetails: true
  })
  .use(Uppy.Tus, {
    endpoint: 'https://tusd.tusdemo.net/files'
  })
  .use(Zencoder, {})
  .on('complete', (result) => {
    console.log("Result: ", result)
    console.log('Upload complete! We’ve uploaded these files:', result.successful)
  })
  .on('upload-retry', (fileID) => {
    console.log('upload retried:', fileID)
  })

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/uppy/1.25.0/uppy.min.js"></script>

styles

<link href="https://releases.transloadit.com/uppy/v1.25.0/uppy.min.css" rel="stylesheet" />