An HTML5 and javascript file uploader that supports drag and drop, as well as file input, uploading. Written in coffeescript.
With the following html
<html>
<head>
<title>Drop test</title>
<style type='text/css' src='file-uploader.css'></style>
</head>
<body>
<div class='drop-area'></div>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
<script type='text/javascript' src='file-uploader.js'></script>
</body>
</html>And a little bit of js magic
new FileUploader('.drop-area', '/files/');A party is born.
FileUploader takes a minimum of two arguments:
- A css selector for the area you want to use for the uploader
- A url to upload the files to
By default the uploader will use 'POST' as the method used in the ajax call.
If you add a data-file-uploader-content attribute to the node you are going to use, FileUploader will append it into the results area for you.
There is also the beginnings of support for hooking into the ajax call. I've added an options hash for a third argument. That hash currently supports the following options:
- method: POST, PUT, etc.
- before: a function to run before the ajax request is triggered
- complete: a function to run after the ajax request has been completed
This has been tested on the latest platforms for:
- Desktop
- Firefox
- Chrome
- Safari
- Mobile
- IOS 6.1
- Android 4.x
More testing needs to be completed. This should work on any webkit based browser and any browser that supports the FormData javascript object.
- jQuery
- Some basic javascript knowledge
Add automatic results area injection(Done)Add automatic file input injection(Done)- Get rid of dependency on jQuery
- Add options for overriding the ajax submit method
- Add options for overriding error, complete, and success callbacks (Support for ajax before and complete are implemented)
- Setup automated node compilation of coffeescript to javascript
- Setup proper testing
- Check support for IE
Feel free to make changes. Fork this project and have at. If you make anything you'd like to give back just make a pull request.
If you have nodejs installed you can npm install to get all the dependencies. After that run:
./node_modules/coffee-script/bin/coffee -c -o lib src
The compiled, but unminified js, will be stored in the lib directory. Just copy to wherever you need to use it.