26 | Scripts are loaded using module loader RequireJS. This demo
27 | demonstrates how to use html5 ajax uploader and knockout to customize UI for uploads.
28 |
29 |
30 |
Show me the code
31 |
32 |
33 |
34 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
--------------------------------------------------------------------------------
/Html5UploadDemo/packages.config:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # HTML5 AJAX File Uploader Module
2 | ================================
3 |
4 | **This module abstracts HTML5 file and drag and drop API and manages file upload process**
5 |
6 | * Free, open source (MIT license)
7 | * Pure JavaScript - works with any web framework
8 | * Small & lightweight
9 | * No dependencies
10 |
11 | Samples on how to use module and create custom user interface for file uploads are available.
12 |
13 | ## Demos
14 |
15 | * [HTML5 Drag & Drop Ajax File Uploader](https://www.devbridge.com/sourcery/components/drag-and-drop-uploader/)
16 |
17 | ## Usage
18 |
19 | html5Upload.initialize({
20 | // URL that handles uploaded files
21 | uploadUrl: '/file/upload',
22 |
23 | // HTML element on which files should be dropped (optional)
24 | dropContainer: document.getElementById('dragndropimage'),
25 |
26 | // HTML file input element that allows to select files (optional)
27 | inputField: document.getElementById('upload-input'),
28 |
29 | // Key for the file data (optional, default: 'file')
30 | key: 'File',
31 |
32 | // Additional data submitted with file (optional)
33 | data: { ProjectId: 1, ProjectName: 'Demo' },
34 |
35 | // Maximum number of simultaneous uploads
36 | // Other uploads will be added to uploads queue (optional)
37 | maxSimultaneousUploads: 2,
38 |
39 | // Callback for each dropped or selected file
40 | // It receives one argument, add callbacks
41 | // by passing events map object: file.on({ ... })
42 | onFileAdded: function (file) {
43 |
44 | var fileModel = new models.FileViewModel(file);
45 | uploadsModel.uploads.push(fileModel);
46 |
47 | file.on({
48 | // Called after received response from the server
49 | onCompleted: function (response) {
50 | fileModel.uploadCompleted(true);
51 | },
52 | // Called during upload progress, first parameter
53 | // is decimal value from 0 to 100.
54 | onProgress: function (progress, fileSize, uploadedBytes) {
55 | fileModel.uploadProgress(parseInt(progress, 10));
56 | }
57 | });
58 | }
59 | });
60 |
61 |
62 | ## Support
63 |
64 | IE10+, Firefox 15+, Chrome 22+, Safari 6+, Opera 12+
65 |
66 | ## Authors
67 |
68 | Tomas Kirda / [@tkirda](https://twitter.com/tkirda)
69 |
--------------------------------------------------------------------------------
/license.txt:
--------------------------------------------------------------------------------
1 | Copyright 2014 Devbridge Group and other contributors
2 | http://www.devbridge.com/sourcery/components/drag-and-drop-uploader/
3 |
4 | Permission is hereby granted, free of charge, to any person obtaining
5 | a copy of this software and associated documentation files (the
6 | "Software"), to deal in the Software without restriction, including
7 | without limitation the rights to use, copy, modify, merge, publish,
8 | distribute, sublicense, and/or sell copies of the Software, and to
9 | permit persons to whom the Software is furnished to do so, subject to
10 | the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be
13 | included in all copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
16 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
17 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
18 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
19 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
20 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
21 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
--------------------------------------------------------------------------------
/packages/repositories.config:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------