Code Monkey home page Code Monkey logo

mule-uploader's Introduction

Mule-upload

You can test the uploader here!

Stubborn HTML5 File Uploader for Amazon S3

Features:

  • VERY resilient against upload interruptions. Even if your internet connection goes down, you accidentally close the browser or you want to continue the upload tomorrow, your upload progress is saved. Hell, it even works if you switch browsers or wifi connections!
  • HTML5 - uses the File, FileList, and Blob objects
  • Speed - it uses multiple workers for (potentially) four time increase in upload speed. E.g. on my computer I got 2.5-3 MB/s vs. < 1MB/s using only one worker. There is a tradeoff between upload speed and CPU consumption though.

What people think of it:

We use Mule Uploader to archive audio in our Rails/AngularJS application www.popuparchive.org. I tried many projects that integrate with S3 in various ways before using this. By using the multipart upload API, multiple threads, and resumable uploads, it met our essential needs for handling large media files, and without requiring a specific UI or DOM elements. It also came with no dependencies on jQuery or other libraries, making it easy to add to our AngularJS front-end.

-- Andrew Kuklewicz, Tech Director prx.org, Lead Developer www.popuparchive.org.

Set up:

In order to use this library, you need the following:

  • an Amazon S3 bucket where the files will get uploaded
  • CORS settings allowing REST operations from your domain
  • a separate, restricted user in Amazon IAM that can only access the upload bucket, and (VERY important!) can only create objects on the bucket, not delete them
  • a backend that generates signatures, and optionally keeps track of uploaded chunks (for smart resume, e.g. after you refresh your browser)
  1. You need to create an Amazon S3 bucket for uploads

  2. You need to edit your Amazon S3 CORS configuration to allow communication from your domain. Here is what I use:

    <CORSRule>
        <AllowedOrigin>[your domain]</AllowedOrigin>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>HEAD</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
  3. You need to create a separate user in IAM

  4. You need to set the bucket's policy to something like this (replace the [placeholders] first) :

    {
      "Id": "Policy1417805650894",
      "Statement": [
        {
          "Sid": "Stmt1417805616520",
          "Action": "s3:*",
          "Effect": "Allow",
          "Resource": "arn:aws:s3:::[your_bucket]/*",
          "Principal": {
            "AWS": [
              "arn:aws:iam::[your_user_id]:user/[your_user_name]"
            ]
          }
        },
        {
          "Sid": "Stmt1417805647297",
          "Action": [
            "s3:DeleteBucket",
            "s3:DeleteBucketPolicy",
            "s3:DeleteBucketWebsite",
            "s3:DeleteObject",
            "s3:DeleteObjectVersion"
          ],
          "Effect": "Deny",
          "Resource": "arn:aws:s3:::[your_bucket]/*",
          "Principal": {
            "AWS": [
              "arn:aws:iam::[your_user_id]:user/[your_user_name]"
            ]
          }
        }
      ]
    }
    
  5. You need a backend to sign your REST requests (a Flask + SQLAlchemy one is available at example_backend.py). Here are code samples for creating the signing key: http://docs.aws.amazon.com/general/latest/gr/signature-v4-examples.html

  6. For detailed instructions about how each of the ajax actions should respond, read the source code; there are two actions:

  • signing_key - returns a signature for authentication -- http://docs.aws.amazon.com/general/latest/gr/sigv4-calculate-signature.html . Also returns key/upload_id/chunks if the file upload can be resumed. Should also return a backup_key to be used in case that the first one is not usable.
  • chunk_loaded - (optional) notifies the server that a chunk has been uploaded; this is needed for browser-refresh resume (the backend will store the chunks in a database, and give the user the file key + upload id + chunks uploaded for the file to be uploaded)

If you'd want example backends in other languages/with other frameworks, let me know.

How do I run the example locally?

  1. Navigate to the project's root, e.g. cd mule-uploader

  2. Install requirements.txt: pip install -r requirements.txt

  3. Set up environment variables:

    1. export AWS_ACCESS_KEY=[your access_key]
    2. export AWS_SECRET=[your access_key's secret]
    3. export AWS_REGION=[your bucket's region]
    4. export BUCKET=[your AWS bucket]
    5. (optionally) export MIME_TYPE=[your desired mime-type]. Defaults to application/octet-stream
    6. (optionally) export DATABASE_URL=[your db url]. Notice that the db url looks like postgres://user:password@location:port/db_name or sqlite:///file. Defaults to sqlite:///database.db
    7. (optionally) export PORT=[your desired port]. Defaults to 5000
    8. (optionally) export CHUNK_SIZE=[chunk size in bytes]. Defaults to 6MB i.e. 6291456

    You can see and modify these options in settings.py.

  4. Run python example_backend.py

  5. Navigate to http://localhost:[PORT]/, where [PORT] is the value given at 3.7.

The fine print

Due to the new technology used by this library, it's only compatible with the following browsers:

  • Updated Chrome
  • Updated Firefox
  • Safari 6+
  • not sure about IE

License: MIT

mule-uploader's People

Contributors

abuisine avatar cinely avatar couresel avatar flynsarmy avatar gabipurcaru avatar keithzg avatar kookster avatar tuler avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.