angular-uploads A bunch of AngularJS directives for beautiful upload UIs

How To Get It

Source and documentation are available in the Github Repository. There's also an npm package if you just want to use it in your project. If your prefer Bower, there's also a Bower version called msl-angular-uploads.

.

An Example Don't worry: uploads are just simulated ;)

or or drag and drop below:
Drag & Drop here :)
Selected Files
Name Type Size
{{file.name}} {{file.type}} {{file.size / 1000}} KB
Upload starting...
{{completionFor($index)}}%
Upload completed :)
Completed Uploads
{{completed_uploads[id].file_name}}
Remote Folder A
Drag completed uploads here...
{{file}}
Remote Folder B
...or here
{{file}}

How It Works

Apart from the cool CSS provided by Bootstrap and some AngularJS magic, it's just a matter of using the right directives:


<!-- Turn a button into a file selection element -->

<button msl-file-input="myFilesSelectedHandler" multiple>Select files</button>

<!-- Turn a button into a folder selection element -->
<button msl-folder-input="myFilesSelectedHandler">Select folder</button>

<!-- Enable drag and drop file selection -->
<div msl-dnd-file-input="myFilesSelectedHandler">Drag files here</div>

<!-- Enable drag and drop folder selection -->
<div msl-dnd-folder-input="myFilesSelectedHandler">Drag folder(s) here</div>

<!-- Generic Drag & Drop -->
<div msl-dnd-item="foo">Foo</div>
<div msl-dnd-target="myDropHandler">Drag Foo here</div>

More detailed explanations here.