├── AUTHORS.txt
├── demo
    ├── backend
    │   ├── files
    │   │   └── .gitignore
    │   └── upload.php
    ├── styles.css
    ├── README.md
    ├── demo-ui.js
    ├── demo-config.js
    └── index.html
├── .travis.yml
├── .gitignore
├── .jshintrc
├── dist
    ├── css
    │   └── jquery.dm-uploader.min.css
    └── js
    │   └── jquery.dm-uploader.min.js
├── src
    ├── css
    │   └── jquery.dm-uploader.css
    └── js
    │   └── jquery.dm-uploader.js
├── CONTRIBUTING.md
├── LICENSE.txt
├── bower.json
├── Gruntfile.js
├── package.json
├── CHANGELOG.md
└── README.md


/AUTHORS.txt:
--------------------------------------------------------------------------------
1 | Daniel Morales <daniel85mg@gmail.com>


--------------------------------------------------------------------------------
/demo/backend/files/.gitignore:
--------------------------------------------------------------------------------
1 | *
2 | !.gitignore


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | 
3 | node_js:
4 |   - "5"
5 | 
6 | before_install:
7 | - npm install grunt-cli -g


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | bower_components
 2 | node_modules
 3 | .sizecache.json
 4 | .DS_Store
 5 | .vagrant
 6 | Vagrantfile
 7 | *.diff
 8 | scripts
 9 | *.log
10 | 


--------------------------------------------------------------------------------
/.jshintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "boss": true,
 3 |   "curly": true,
 4 |   "eqeqeq": true,
 5 |   "eqnull": true,
 6 |   "expr": true,
 7 |   "immed": true,
 8 |   "noarg": true,
 9 |   "quotmark": "double",
10 |   "smarttabs": true,
11 |   "trailing": true,
12 |   "undef": true,
13 |   "unused": true,
14 | 
15 |   "node": true
16 | }


--------------------------------------------------------------------------------
/dist/css/jquery.dm-uploader.min.css:
--------------------------------------------------------------------------------
1 | .dm-uploader{cursor:default;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.dm-uploader .btn{position:relative;overflow:hidden}.dm-uploader .btn input[type=file]{position:absolute;top:0;right:0;margin:0;border:solid transparent;width:100%;opacity:0;cursor:pointer}


--------------------------------------------------------------------------------
/demo/styles.css:
--------------------------------------------------------------------------------
 1 | /* 
 2 | 	A couple styles to make the demo page look good
 3 |  */
 4 | body {
 5 | 	padding-bottom: 2rem;
 6 | 	padding-top: 4rem;
 7 | }
 8 | .row {
 9 | 	margin-bottom: 1rem;
10 | }
11 | [class*="col-"] {
12 | 	padding-top: 1rem;
13 | 	padding-bottom: 1rem;
14 | }
15 | hr {
16 | 	margin-top: 2rem;
17 | 	margin-bottom: 2rem;
18 | }
19 | #files {
20 |     overflow-y: scroll !important;
21 |     min-height: 320px;
22 | }
23 | @media (min-width: 768px) {
24 | 	#files {
25 | 		min-height: 0;
26 | 	}
27 | }
28 | #debug {
29 | 	overflow-y: scroll !important;
30 | 	height: 180px;	
31 | }
32 | 
33 | .dm-uploader {
34 | 	border: 0.25rem dashed #A5A5C7;
35 | 	text-align: center;
36 | }
37 | .dm-uploader.active {
38 | 	border-color: red;
39 | 
40 | 	border-style: solid;
41 | }


--------------------------------------------------------------------------------
/src/css/jquery.dm-uploader.css:
--------------------------------------------------------------------------------
 1 | /* 
 2 | 	Uploader: 
 3 | 	- These styles are the ones used on the examples. No needed to use it by any means.
 4 | 	- It disables user selection to avoid some weird visuals in some browsers
 5 | 	- It masks/hides the the file input behind a button
 6 |  */
 7 | 
 8 | .dm-uploader {
 9 | 	cursor: default;
10 | 
11 | 	-webkit-touch-callout: none;
12 | 	-webkit-user-select: none;
13 | 	-khtml-user-select: none;
14 | 	-moz-user-select: none;
15 | 	-ms-user-select: none;
16 | 	user-select: none;
17 | }
18 | 
19 | .dm-uploader .btn {
20 | 	position: relative;
21 | 	overflow: hidden;
22 | }
23 | 
24 | .dm-uploader .btn input[type="file"] {
25 | 	position: absolute;
26 | 	top: 0;
27 | 	right: 0;
28 | 	margin: 0;
29 | 	border: solid transparent;
30 | 	width: 100%;
31 | 	opacity: .0;
32 | 	filter: alpha(opacity= 0);
33 | 	cursor: pointer;
34 | }
35 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | ## Project Status
 2 | Besides upside downs in the last couple years the project is very alive and issues are usually responded quickly.
 3 | 
 4 | ## What's next
 5 | - Probably coming in next release / there is already code related to it:
 6 | - Set default settings globally: $.fn.dmUploader.defaults = { .... }
 7 | - Rework the Callback system:
 8 |   - Currently the callback system is mixed with settings/config, AND is kinda an 'old' way of doing it.
 9 |   - Move to: trigger() and triggerHandler() - (and similar, more JQuery-friendly)
10 | 
11 | ## Contributing 
12 | - Make sure the pull-requests are from the 'master' branch. AND make sure you have the latest version!
13 | - Don't mix up things: One commit for each bug fix / feature you want to introduce.
14 | - Keep it clean, example: Don't fix a typo but then change 10 more additional lines adding an 'space'.
15 | - Follow the plugin code style (yes, again... I been working on several opensource projects and people keep ignoring)
16 | - Run 'npm test' or 'grunt test' to check for syntax issues using JSHint
17 | - Commits must NOT INCLUDE any minified version


--------------------------------------------------------------------------------
/demo/README.md:
--------------------------------------------------------------------------------
 1 | # DEMO
 2 | 
 3 | This page demostrates the most basic setup/config.
 4 | 
 5 | ## Backend
 6 | 
 7 | By default this example uploads files using: <code>demo/backend/upload.php</code>. This piece of PHP logic is provided to upload the files to the <code>backend/files/</code> folder (make sure it has writing permissions).
 8 | 
 9 | This is only an example using PHP, of course you can use it with any other type of backend. 
10 | 
11 | And It's just to demonstrate the flow; the script returns a very basic JSON response  structure (again, this is for this example, you can implement this in any way you want):
12 | 
13 | ### Success response:
14 | ```json
15 | {
16 | 	"status": "ok",
17 | 	"path": "files/5a515f174dea7_Hot_Gril.jpg"
18 | }
19 | ```
20 | 
21 | ### Error response:
22 | ```json
23 | {
24 | 	"status": "error",
25 | 	"message": "Exceeded filesize limit"
26 | }
27 | ```
28 | 
29 | # Warning
30 | 
31 | This is a ***DEMO*** , the backend / PHP provided is very basic. You can use it as a starting point maybe, but ***do not use this on production***. It doesn't preform any server-side validation, checks, authentication, etc.
32 | 
33 | 
34 | 


--------------------------------------------------------------------------------
/LICENSE.txt:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright © Daniel Morales, https://www.danielmg.org
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "dm-file-uploader",
 3 |   "description": "A very lightweight and configurable jQuery Plugin for file uploading using ajax(async); includes support for queues, progress tracking and drag and drop.",
 4 |   "main": "src/jquery.dmuploader.js",
 5 |   "authors": [
 6 |     {
 7 |       "name": "Daniel Morales",
 8 |       "email": "daniel85mg@gmail.com",
 9 |       "homepage": "https://danielmg.org"
10 |     }
11 |   ],
12 |   "repository": {
13 |     "type": "git",
14 |     "url": "git://github.com/danielm/uploader.git"
15 |   },
16 |   "license": "MIT",
17 |   "keywords": [
18 |     "jquery-plugin",
19 |     "ecosystem:jquery",
20 |     "javascript",
21 |     "jquery",
22 |     "lightweight",
23 |     "upload",
24 |     "ajax",
25 |     "forms",
26 |     "file",
27 |     "widget",
28 |     "multiple",
29 |     "dnd",
30 |     "drag",
31 |     "drop",
32 |     "progress",
33 |     "form",
34 |     "queue",
35 |     "lightweight"
36 |   ],
37 |   "dependencies": {
38 |     "jquery": ">=1.7.0"
39 |   },
40 |   "homepage": "https://github.com/danielm/uploader",
41 |   "ignore": [
42 |     "**/.*",
43 |     "node_modules",
44 |     "bower_components",
45 |     "test",
46 |     "tests"
47 |   ]
48 | }
49 | 


--------------------------------------------------------------------------------
/Gruntfile.js:
--------------------------------------------------------------------------------
 1 | module.exports = function(grunt) {
 2 | "use strict";
 3 | 
 4 |   // Project configuration.
 5 |   grunt.initConfig({
 6 |     pkg: grunt.file.readJSON("package.json"),
 7 | 
 8 |     uglify: {
 9 |       options: {
10 |         output: {
11 |           comments: "some"
12 |         }
13 |       },
14 |       build: {
15 |         files: [{
16 |           src: "src/js/jquery.dm-uploader.js",
17 |           dest: "dist/js/jquery.dm-uploader.min.js"
18 |         }]
19 |       }
20 |     },
21 | 
22 |     jshint: {
23 |       options: {
24 |         jshintrc: true
25 |       },
26 |       all: [
27 |         "src/js/*.js",
28 |         "Gruntfile.js"
29 |       ]
30 |     },
31 | 
32 |     cssmin: {
33 |       target: {
34 |         files: {
35 |           "dist/css/jquery.dm-uploader.min.css": ["src/css/*.css"]
36 |         }
37 |       }
38 |     },
39 | 
40 |     watch: {
41 |       js: {
42 |         files: ["src/js/*.js"],
43 |         tasks: ["jshint", "uglify"],
44 |         options: {
45 |           spawn: false,
46 |         }
47 |       },
48 |       css: {
49 |         files: ["src/css/*.css"],
50 |         tasks: ["cssmin"],
51 |         options: {
52 |           spawn: false,
53 |         }
54 |       }
55 |     }
56 |   });
57 | 
58 |   // Load the plugin that provides the "uglify" task.
59 |   grunt.loadNpmTasks("grunt-contrib-uglify");
60 |   grunt.loadNpmTasks("grunt-contrib-jshint");
61 |   grunt.loadNpmTasks("grunt-contrib-watch");
62 |   grunt.loadNpmTasks("grunt-contrib-cssmin");
63 |   
64 |   grunt.registerTask("test", ["jshint"]);
65 |   grunt.registerTask("build", ["uglify", "cssmin"]);
66 | 
67 |   grunt.registerTask("default", ["watch"]);
68 | };


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "dm-file-uploader",
 3 |   "title": "jQuery Ajax File Uploader Widget",
 4 |   "description": "A very lightweight and configurable jQuery Plugin for file uploading using ajax(async); includes support for queues, progress tracking and drag and drop.",
 5 |   "version": "1.0.2",
 6 |   "homepage": "https://github.com/danielm/uploader",
 7 |   "author": {
 8 |     "name": "Daniel Morales",
 9 |     "url": "https://danielmg.org"
10 |   },
11 |   "main": "src/js/jquery.dm-uploader.js",
12 |   "maintainers": [
13 |     {
14 |       "name": "Daniel Morales",
15 |       "email": "daniel85mg@gmail.com",
16 |       "url": "https://danielmg.org"
17 |     }
18 |   ],
19 |   "repository": {
20 |     "type": "git",
21 |     "url": "git://github.com/danielm/uploader.git"
22 |   },
23 |   "bugs": "https://github.com/danielm/uploader/issues",
24 |   "download": "https://github.com/danielm/uploader/releases",
25 |   "license": "MIT",
26 |   "dependencies": {
27 |     "jquery": ">=1.7.0"
28 |   },
29 |   "devDependencies": {
30 |     "grunt": "^1.0.1",
31 |     "grunt-contrib-cssmin": "^2.2.1",
32 |     "grunt-contrib-jshint": "^1.1.0",
33 |     "grunt-contrib-uglify": "^3.3.0",
34 |     "grunt-contrib-watch": "^1.0.0"
35 |   },
36 |   "scripts": {
37 |     "test": "grunt test",
38 |     "build": "grunt build",
39 |     "pushtags": "git push --tags origin master"
40 |   },
41 |   "keywords": [
42 |     "jquery-plugin",
43 |     "ecosystem:jquery",
44 |     "javascript",
45 |     "jquery",
46 |     "lightweight",
47 |     "upload",
48 |     "ajax",
49 |     "forms",
50 |     "file",
51 |     "widget",
52 |     "multiple",
53 |     "dnd",
54 |     "drag",
55 |     "drop",
56 |     "progress",
57 |     "form",
58 |     "queue",
59 |     "lightweight"
60 |   ]
61 | }
62 | 


--------------------------------------------------------------------------------
/demo/backend/upload.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | /*
 4 |   This is a ***DEMO*** , the backend / PHP provided is very basic. You can use it as a starting point maybe, but ***do not use this on production***. It doesn't preform any server-side validation, checks, authentication, etc.
 5 | 
 6 |   For more read the README.md file on this folder.
 7 | 
 8 |   Based on the examples provided on:
 9 |   - http://php.net/manual/en/features.file-upload.php
10 | */
11 | 
12 | header('Content-type:application/json;charset=utf-8');
13 | 
14 | try {
15 |     if (
16 |         !isset($_FILES['file']['error']) ||
17 |         is_array($_FILES['file']['error'])
18 |     ) {
19 |         throw new RuntimeException('Invalid parameters.');
20 |     }
21 | 
22 |     switch ($_FILES['file']['error']) {
23 |         case UPLOAD_ERR_OK:
24 |             break;
25 |         case UPLOAD_ERR_NO_FILE:
26 |             throw new RuntimeException('No file sent.');
27 |         case UPLOAD_ERR_INI_SIZE:
28 |         case UPLOAD_ERR_FORM_SIZE:
29 |             throw new RuntimeException('Exceeded filesize limit.');
30 |         default:
31 |             throw new RuntimeException('Unknown errors.');
32 |     }
33 | 
34 |     $filepath = sprintf('files/%s_%s', uniqid(), $_FILES['file']['name']);
35 | 
36 |     if (!move_uploaded_file(
37 |         $_FILES['file']['tmp_name'],
38 |         $filepath
39 |     )) {
40 |         throw new RuntimeException('Failed to move uploaded file.');
41 |     }
42 | 
43 |     // All good, send the response
44 |     echo json_encode([
45 |         'status' => 'ok',
46 |         'path' => $filepath
47 |     ]);
48 | 
49 | } catch (RuntimeException $e) {
50 | 	// Something went wrong, send the err message as JSON
51 | 	http_response_code(400);
52 | 
53 | 	echo json_encode([
54 | 		'status' => 'error',
55 | 		'message' => $e->getMessage()
56 | 	]);
57 | }


--------------------------------------------------------------------------------
/demo/demo-ui.js:
--------------------------------------------------------------------------------
 1 |   /*
 2 |    * Some helper functions to work with our UI and keep our code cleaner
 3 |    */
 4 | 
 5 | // Adds an entry to our debug area
 6 | function ui_add_log(message, color)
 7 | {
 8 |   var d = new Date();
 9 | 
10 |   var dateString = (('0' + d.getHours())).slice(-2) + ':' +
11 |     (('0' + d.getMinutes())).slice(-2) + ':' +
12 |     (('0' + d.getSeconds())).slice(-2);
13 | 
14 |   color = (typeof color === 'undefined' ? 'muted' : color);
15 | 
16 |   var template = $('#debug-template').text();
17 |   template = template.replace('%%date%%', dateString);
18 |   template = template.replace('%%message%%', message);
19 |   template = template.replace('%%color%%', color);
20 |   
21 |   $('#debug').find('li.empty').fadeOut(); // remove the 'no messages yet'
22 |   $('#debug').prepend(template);
23 | }
24 | 
25 | // Creates a new file and add it to our list
26 | function ui_multi_add_file(id, file)
27 | {
28 |   var template = $('#files-template').text();
29 |   template = template.replace('%%filename%%', file.name);
30 | 
31 |   template = $(template);
32 |   template.prop('id', 'uploaderFile' + id);
33 |   template.data('file-id', id);
34 | 
35 |   $('#files').find('li.empty').fadeOut(); // remove the 'no files yet'
36 |   $('#files').prepend(template);
37 | }
38 | 
39 | // Changes the status messages on our list
40 | function ui_multi_update_file_status(id, status, message)
41 | {
42 |   $('#uploaderFile' + id).find('span').html(message).prop('class', 'status text-' + status);
43 | }
44 | 
45 | // Updates a file progress, depending on the parameters it may animate it or change the color.
46 | function ui_multi_update_file_progress(id, percent, color, active)
47 | {
48 |   color = (typeof color === 'undefined' ? false : color);
49 |   active = (typeof active === 'undefined' ? true : active);
50 | 
51 |   var bar = $('#uploaderFile' + id).find('div.progress-bar');
52 | 
53 |   bar.width(percent + '%').attr('aria-valuenow', percent);
54 |   bar.toggleClass('progress-bar-striped progress-bar-animated', active);
55 | 
56 |   if (percent === 0){
57 |     bar.html('');
58 |   } else {
59 |     bar.html(percent + '%');
60 |   }
61 | 
62 |   if (color !== false){
63 |     bar.removeClass('bg-success bg-info bg-warning bg-danger');
64 |     bar.addClass('bg-' + color);
65 |   }
66 | }


--------------------------------------------------------------------------------
/demo/demo-config.js:
--------------------------------------------------------------------------------
 1 | $(function(){
 2 |   /*
 3 |    * For the sake keeping the code clean and the examples simple this file
 4 |    * contains only the plugin configuration & callbacks.
 5 |    * 
 6 |    * UI functions ui_* can be located in: demo-ui.js
 7 |    */
 8 |   $('#drag-and-drop-zone').dmUploader({ //
 9 |     url: 'backend/upload.php',
10 |     maxFileSize: 3000000, // 3 Megs 
11 |     onDragEnter: function(){
12 |       // Happens when dragging something over the DnD area
13 |       this.addClass('active');
14 |     },
15 |     onDragLeave: function(){
16 |       // Happens when dragging something OUT of the DnD area
17 |       this.removeClass('active');
18 |     },
19 |     onInit: function(){
20 |       // Plugin is ready to use
21 |       ui_add_log('Penguin initialized :)', 'info');
22 |     },
23 |     onComplete: function(){
24 |       // All files in the queue are processed (success or error)
25 |       ui_add_log('All pending tranfers finished');
26 |     },
27 |     onNewFile: function(id, file){
28 |       // When a new file is added using the file selector or the DnD area
29 |       ui_add_log('New file added #' + id);
30 |       ui_multi_add_file(id, file);
31 |     },
32 |     onBeforeUpload: function(id){
33 |       // about tho start uploading a file
34 |       ui_add_log('Starting the upload of #' + id);
35 |       ui_multi_update_file_status(id, 'uploading', 'Uploading...');
36 |       ui_multi_update_file_progress(id, 0, '', true);
37 |     },
38 |     onUploadCanceled: function(id) {
39 |       // Happens when a file is directly canceled by the user.
40 |       ui_multi_update_file_status(id, 'warning', 'Canceled by User');
41 |       ui_multi_update_file_progress(id, 0, 'warning', false);
42 |     },
43 |     onUploadProgress: function(id, percent){
44 |       // Updating file progress
45 |       ui_multi_update_file_progress(id, percent);
46 |     },
47 |     onUploadSuccess: function(id, data){
48 |       // A file was successfully uploaded
49 |       ui_add_log('Server Response for file #' + id + ': ' + JSON.stringify(data));
50 |       ui_add_log('Upload of file #' + id + ' COMPLETED', 'success');
51 |       ui_multi_update_file_status(id, 'success', 'Upload Complete');
52 |       ui_multi_update_file_progress(id, 100, 'success', false);
53 |     },
54 |     onUploadError: function(id, xhr, status, message){
55 |       ui_multi_update_file_status(id, 'danger', message);
56 |       ui_multi_update_file_progress(id, 0, 'danger', false);  
57 |     },
58 |     onFallbackMode: function(){
59 |       // When the browser doesn't support this plugin :(
60 |       ui_add_log('Plugin cant be used here, running Fallback callback', 'danger');
61 |     },
62 |     onFileSizeError: function(file){
63 |       ui_add_log('File \'' + file.name + '\' cannot be added: size excess limit', 'danger');
64 |     }
65 |   });
66 | });


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | ## 1.0.1
 2 | - The big change on this version is that now we have different modes.
 3 |   - Depending on the new options: ``auto`` and ``queue`` is how the plugin handles the uploads.
 4 |   - Uploads may or may not start automatically depending on those settings.
 5 |   - The plugin behaves the same way (as in previous versions) if using the default settings
 6 |   - Check the online demos to see the different modes: https://danielmg.org/demo/java-script/uploader
 7 | 
 8 | - Plugin API
 9 | 
10 |   After initialization now we have a few public Methods to interact with the plugin.
11 | 
12 |   - ``start``
13 |   - ``cancel``
14 |   - ``reset``
15 |   - ``destroy``
16 | 
17 | See [methods section](README.md#methods) for details on each.
18 | 
19 | - New options
20 |   - ``auto``, ``queue``, ``dnd``, ``hookDocument``, ``multiple``, ``headers``
21 | 
22 | - Options changed
23 |   - ``fieldName`` Renamed. Previously known as ``fileName`` (was removed)
24 |   - ``extFilter`` Now is an Array: Example  ``['png','jpg','gif','jpeg']``
25 |   - ``extraData`` Now it can ALSO be a function, useful for example you need dynamic values.
26 | 
27 | - Options removed
28 |   - ``fileName`` renamed to ``fileName``
29 |   - ``maxFiles`` Functionality removed.
30 | 
31 |     Users expected diferent things from it (completed uploads, or files added, or some more dynamic stuff)
32 | 
33 |     Good news is that NOW you can implement your own validation checks now on the ``onNewFile`` callback.
34 | 
35 | See [options section](README.md#options) for details
36 | 
37 | - Callbacks changed
38 |   - ``onNewFile`` If a return value is provided and is `=== false` the file will be ignored by the widget.
39 | 
40 |     Use this to implement your own validators.
41 | 
42 |   - ``onBeforeUpload`` The return value is now ignored. Use ``onNewFile`` instead.
43 |   - ``onUploadError``  New paramters xhr and status: ``(id, xhr, status, message)``
44 |   - ``onFallbackMode`` - Parameter ``message`` was removed
45 | 
46 | - New callbacks
47 |   - ``onUploadComplete`` This triggers right after `onUploadSuccess` or `onUploadError`. In **both** cases.
48 |   - ``onUploadCanceled`` Triggers after a pending or uploading file is canceled (by using one of the API (README.md#methods))
49 |   - ``onDragEnter``
50 |   - ``onDragLeave``
51 |   - ``onDocumentDragEnter``
52 |   - ``onDocumentDragLeave``
53 | 
54 | - Callbacks removed
55 |   - ``onFilesMaxError`` Functionality removed. Check the options cheanges for the reasons behind this change.
56 | 
57 | See [callbacks section](README.md#callbacks) for details
58 | 
59 | ## 0.1.2
60 | - Added option for pre-submit file extension validation. View doc: extFilter/onFileExtError
61 | - Added option for pre-submit maxFiles validation. View doc: maxFiles/onFilesMaxError
62 | - Fixed several typos / code example errors.
63 | 
64 | ## 0.1.1
65 | - Project moved to Github.
66 | 
67 | ## 0.1.0
68 | - Initial release.
69 | 


--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="utf-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  6 | 
  7 |     <title>jQuery Ajax File Uploader Widget</title>
  8 | 
  9 |     <!-- Bootstrap core CSS -->
 10 |     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
 11 | 
 12 |     <!-- Custom styles -->
 13 |     <link href="../dist/css/jquery.dm-uploader.min.css" rel="stylesheet">
 14 |     <link href="styles.css" rel="stylesheet">
 15 |   </head>
 16 | 
 17 |   <body>
 18 | 
 19 |     <main role="main" class="container">
 20 | 
 21 |       <h1>jQuery Ajax File Uploader Widget</h1>
 22 |       <p class="lead mb-4">
 23 |         A very lightweight Plugin for file uploading using ajax(async) and includes support for queues, progress tracking and drag and drop.
 24 |         This page demostrates the default basic setup/config.
 25 |       </p>
 26 | 
 27 |       <div class="row">
 28 |         <div class="col-md-6 col-sm-12">
 29 |           
 30 |           <!-- Our markup, the important part here! -->
 31 |           <div id="drag-and-drop-zone" class="dm-uploader p-5">
 32 |             <h3 class="mb-5 mt-5 text-muted">Drag &amp; drop files here</h3>
 33 | 
 34 |             <div class="btn btn-primary btn-block mb-5">
 35 |                 <span>Open the file Browser</span>
 36 |                 <input type="file" title='Click to add Files' />
 37 |             </div>
 38 |           </div><!-- /uploader -->
 39 | 
 40 |         </div>
 41 |         <div class="col-md-6 col-sm-12">
 42 |           <div class="card h-100">
 43 |             <div class="card-header">
 44 |               File List
 45 |             </div>
 46 | 
 47 |             <ul class="list-unstyled p-2 d-flex flex-column col" id="files">
 48 |               <li class="text-muted text-center empty">No files uploaded.</li>
 49 |             </ul>
 50 |           </div>
 51 |         </div>
 52 |       </div><!-- /file list -->
 53 | 
 54 |       <div class="alert alert-info" role="alert">
 55 |         More setup demos on: <a href="https://danielmg.org/demo/java-script/uploader/basic">https://danielmg.org/demo/java-script/uploader/basic</a>
 56 |       </div>
 57 | 
 58 |       <div class="row">
 59 |         <div class="col-12">
 60 |            <div class="card h-100">
 61 |             <div class="card-header">
 62 |               Debug Messages
 63 |             </div>
 64 | 
 65 |             <ul class="list-group list-group-flush" id="debug">
 66 |               <li class="list-group-item text-muted empty">Loading plugin....</li>
 67 |             </ul>
 68 |           </div>
 69 |         </div>
 70 |       </div> <!-- /debug -->
 71 | 
 72 |     </main> <!-- /container -->
 73 | 
 74 |     <footer class="text-center">
 75 |         <p>&copy; Daniel Morales &middot; <a href="https://www.danielmg.org">www.danielmg.org</a></p>
 76 |     </footer>
 77 | 
 78 |     <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
 79 |     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
 80 | 
 81 |     <script src="../dist/js/jquery.dm-uploader.min.js"></script>
 82 |     <script src="demo-ui.js"></script>
 83 |     <script src="demo-config.js"></script>
 84 | 
 85 |     <!-- File item template -->
 86 |     <script type="text/html" id="files-template">
 87 |       <li class="media">
 88 |         <div class="media-body mb-1">
 89 |           <p class="mb-2">
 90 |             <strong>%%filename%%</strong> - Status: <span class="text-muted">Waiting</span>
 91 |           </p>
 92 |           <div class="progress mb-2">
 93 |             <div class="progress-bar progress-bar-striped progress-bar-animated bg-primary" 
 94 |               role="progressbar"
 95 |               style="width: 0%" 
 96 |               aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
 97 |             </div>
 98 |           </div>
 99 |           <hr class="mt-1 mb-1" />
100 |         </div>
101 |       </li>
102 |     </script>
103 | 
104 |     <!-- Debug item template -->
105 |     <script type="text/html" id="debug-template">
106 |       <li class="list-group-item text-%%color%%"><strong>%%date%%</strong>: %%message%%</li>
107 |     </script>
108 |   </body>
109 | </html>
110 | 


--------------------------------------------------------------------------------
/dist/js/jquery.dm-uploader.min.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * dmUploader - jQuery Ajax File Uploader Widget
 3 |  * https://github.com/danielm/uploader
 4 |  *
 5 |  * Copyright Daniel Morales <daniel85mg@gmail.com>
 6 |  * Released under the MIT license.
 7 |  * https://github.com/danielm/uploader/blob/master/LICENSE.txt
 8 |  *
 9 |  * @preserve
10 |  */
11 | !function(e){"use strict";"function"==typeof define&&define.amd?define(["jquery"],e):"undefined"!=typeof exports?module.exports=e(require("jquery")):e(window.jQuery)}(function(e){"use strict";var t="dmUploader",n=0,i=1,s=2,o=3,r=4,u={auto:!0,queue:!0,dnd:!0,hookDocument:!0,multiple:!0,url:document.URL,method:"POST",extraData:{},headers:{},dataType:null,fieldName:"file",maxFileSize:0,allowedTypes:"*",extFilter:null,onInit:function(){},onComplete:function(){},onFallbackMode:function(){},onNewFile:function(){},onBeforeUpload:function(){},onUploadProgress:function(){},onUploadSuccess:function(){},onUploadCanceled:function(){},onUploadError:function(){},onUploadComplete:function(){},onFileTypeError:function(){},onFileSizeError:function(){},onFileExtError:function(){},onDragEnter:function(){},onDragLeave:function(){},onDocumentDragEnter:function(){},onDocumentDragLeave:function(){}},a=function(e,t){this.data=e,this.widget=t,this.jqXHR=null,this.status=n,this.id=Math.random().toString(36).substr(2)};a.prototype.upload=function(){var t=this;if(!t.canUpload())return t.widget.queueRunning&&t.status!==i&&t.widget.processQueue(),!1;var n=new FormData;n.append(t.widget.settings.fieldName,t.data);var s=t.widget.settings.extraData;return"function"==typeof s&&(s=s.call(t.widget.element,t.id)),e.each(s,function(e,t){n.append(e,t)}),t.status=i,t.widget.activeFiles++,t.widget.settings.onBeforeUpload.call(t.widget.element,t.id),t.jqXHR=e.ajax({url:t.widget.settings.url,type:t.widget.settings.method,dataType:t.widget.settings.dataType,data:n,headers:t.widget.settings.headers,cache:!1,contentType:!1,processData:!1,forceSync:!1,xhr:function(){return t.getXhr()},success:function(e){t.onSuccess(e)},error:function(e,n,i){t.onError(e,n,i)},complete:function(){t.onComplete()}}),!0},a.prototype.onSuccess=function(e){this.status=s,this.widget.settings.onUploadSuccess.call(this.widget.element,this.id,e)},a.prototype.onError=function(e,t,n){this.status!==r&&(this.status=o,this.widget.settings.onUploadError.call(this.widget.element,this.id,e,t,n))},a.prototype.onComplete=function(){this.widget.activeFiles--,this.status!==r&&this.widget.settings.onUploadComplete.call(this.widget.element,this.id),this.widget.queueRunning?this.widget.processQueue():this.widget.settings.queue&&0===this.widget.activeFiles&&this.widget.settings.onComplete.call(this.element)},a.prototype.getXhr=function(){var t=this,n=e.ajaxSettings.xhr();return n.upload&&n.upload.addEventListener("progress",function(e){var n=0,i=e.loaded||e.position,s=e.total||e.totalSize;e.lengthComputable&&(n=Math.ceil(i/s*100)),t.widget.settings.onUploadProgress.call(t.widget.element,t.id,n)},!1),n},a.prototype.cancel=function(e){e=void 0!==e&&e;var t=this.status;return!!(t===i||e&&t===n)&&(this.status=r,this.widget.settings.onUploadCanceled.call(this.widget.element,this.id),t===i&&this.jqXHR.abort(),!0)},a.prototype.canUpload=function(){return this.status===n||this.status===o};var l=function(t,n){return this.element=e(t),this.settings=e.extend({},u,n),this.checkSupport()?(this.init(),this):(e.error("Browser not supported by jQuery.dmUploader"),this.settings.onFallbackMode.call(this.element),!1)};l.prototype.checkSupport=function(){if(void 0===window.FormData)return!1;return!new RegExp("/(Android (1.0|1.1|1.5|1.6|2.0|2.1))|(Windows Phone (OS 7|8.0))|(XBLWP)|(ZuneWP)|(w(eb)?OSBrowser)|(webOS)|(Kindle/(1.0|2.0|2.5|3.0))/").test(window.navigator.userAgent)&&!e('<input type="file" />').prop("disabled")},l.prototype.init=function(){var n=this;this.queue=[],this.queuePos=-1,this.queueRunning=!1,this.activeFiles=0,this.draggingOver=0,this.draggingOverDoc=0;var i=n.element.is("input[type=file]")?n.element:n.element.find("input[type=file]");return i.length>0&&(i.prop("multiple",this.settings.multiple),i.on("change."+t,function(t){var i=t.target&&t.target.files;i&&i.length&&(n.addFiles(i),e(this).val(""))})),this.settings.dnd&&this.initDnD(),0!==i.length||this.settings.dnd?(this.settings.onInit.call(this.element),this):(e.error("Markup error found by jQuery.dmUploader"),null)},l.prototype.initDnD=function(){var n=this;n.element.on("drop."+t,function(e){e.preventDefault(),n.draggingOver>0&&(n.draggingOver=0,n.settings.onDragLeave.call(n.element));var t=e.originalEvent&&e.originalEvent.dataTransfer;if(t&&t.files&&t.files.length){var i=[];n.settings.multiple?i=t.files:i.push(t.files[0]),n.addFiles(i)}}),n.element.on("dragenter."+t,function(e){e.preventDefault(),0===n.draggingOver&&n.settings.onDragEnter.call(n.element),n.draggingOver++}),n.element.on("dragleave."+t,function(e){e.preventDefault(),n.draggingOver--,0===n.draggingOver&&n.settings.onDragLeave.call(n.element)}),n.settings.hookDocument&&(e(document).off("drop."+t).on("drop."+t,function(e){e.preventDefault(),n.draggingOverDoc>0&&(n.draggingOverDoc=0,n.settings.onDocumentDragLeave.call(n.element))}),e(document).off("dragenter."+t).on("dragenter."+t,function(e){e.preventDefault(),0===n.draggingOverDoc&&n.settings.onDocumentDragEnter.call(n.element),n.draggingOverDoc++}),e(document).off("dragleave."+t).on("dragleave."+t,function(e){e.preventDefault(),n.draggingOverDoc--,0===n.draggingOverDoc&&n.settings.onDocumentDragLeave.call(n.element)}),e(document).off("dragover."+t).on("dragover."+t,function(e){e.preventDefault()}))},l.prototype.releaseEvents=function(){this.element.off("."+t),this.element.find("input[type=file]").off("."+t),this.settings.hookDocument&&e(document).off("."+t)},l.prototype.validateFile=function(t){if(this.settings.maxFileSize>0&&t.size>this.settings.maxFileSize)return this.settings.onFileSizeError.call(this.element,t),!1;if("*"!==this.settings.allowedTypes&&!t.type.match(this.settings.allowedTypes))return this.settings.onFileTypeError.call(this.element,t),!1;if(null!==this.settings.extFilter){var n=t.name.toLowerCase().split(".").pop();if(e.inArray(n,this.settings.extFilter)<0)return this.settings.onFileExtError.call(this.element,t),!1}return new a(t,this)},l.prototype.addFiles=function(e){for(var t=0,n=0;n<e.length;n++){var i=this.validateFile(e[n]);if(i){!1!==this.settings.onNewFile.call(this.element,i.id,i.data)&&(this.settings.auto&&!this.settings.queue&&i.upload(),this.queue.push(i),t++)}}return 0===t?this:(this.settings.auto&&this.settings.queue&&!this.queueRunning&&this.processQueue(),this)},l.prototype.processQueue=function(){return this.queuePos++,this.queuePos>=this.queue.length?(0===this.activeFiles&&this.settings.onComplete.call(this.element),this.queuePos=this.queue.length-1,this.queueRunning=!1,!1):(this.queueRunning=!0,this.queue[this.queuePos].upload())},l.prototype.restartQueue=function(){this.queuePos=-1,this.queueRunning=!1,this.processQueue()},l.prototype.findById=function(e){for(var t=!1,n=0;n<this.queue.length;n++)if(this.queue[n].id===e){t=this.queue[n];break}return t},l.prototype.cancelAll=function(){var e=this.queueRunning;this.queueRunning=!1;for(var t=0;t<this.queue.length;t++)this.queue[t].cancel();e&&this.settings.onComplete.call(this.element)},l.prototype.startAll=function(){if(this.settings.queue)this.restartQueue();else for(var e=0;e<this.queue.length;e++)this.queue[e].upload()},l.prototype.methods={start:function(t){if(this.queueRunning)return!1;var i=!1;return void 0===t||(i=this.findById(t))?i?(i.status===r&&(i.status=n),i.upload()):(this.startAll(),!0):(e.error("File not found in jQuery.dmUploader"),!1)},cancel:function(t){var n=!1;return void 0===t||(n=this.findById(t))?n?n.cancel(!0):(this.cancelAll(),!0):(e.error("File not found in jQuery.dmUploader"),!1)},reset:function(){return this.cancelAll(),this.queue=[],this.queuePos=-1,this.activeFiles=0,!0},destroy:function(){this.cancelAll(),this.releaseEvents(),this.element.removeData(t)}},e.fn.dmUploader=function(n){var i=arguments;if("string"!=typeof n)return this.each(function(){e.data(this,t)||e.data(this,t,new l(this,n))});this.each(function(){var s=e.data(this,t);s instanceof l?"function"==typeof s.methods[n]?s.methods[n].apply(s,Array.prototype.slice.call(i,1)):e.error("Method "+n+" does not exist in jQuery.dmUploader"):e.error("Unknown plugin data found by jQuery.dmUploader")})}});


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # jQuery Ajax File Uploader Widget
  2 | A jQuery plugin for file uploading using ajax(a sync); includes support for queues, progress tracking and drag and drop.
  3 | 
  4 | Very ***configurable*** and easy to adapt to any ***Frontend*** design, and very easy to work along side any backend logic.
  5 | 
  6 | The focus will be ***modern browsers***, but also providing a method to know when the plugin is not supported. The idea is to keep it simple and ***lightweight***.
  7 | 
  8 | Basic Javascript knowledge is necessary to setup this plugin: how to set settings, callback events, etc.
  9 | 
 10 | - Lightweight: ~8.00 KB 
 11 | - Dependencies: just jQuery!
 12 | - License: Released under the [MIT license](LICENSE.txt)
 13 | 
 14 | [![Build Status](https://travis-ci.org/danielm/uploader.svg?branch=master)](https://travis-ci.org/danielm/uploader)
 15 | [![npm version](https://badge.fury.io/js/dm-file-uploader.svg)](http://badge.fury.io/js/dm-file-uploader)
 16 | [![Bower version](https://badge.fury.io/bo/dm-file-uploader.svg)](http://badge.fury.io/bo/dm-file-uploader)
 17 | 
 18 | ## Live DEMOS
 19 | Check the live Demos here: https://danielmg.org/demo/java-script/uploader
 20 | 
 21 | ## Table of contents
 22 | 
 23 |   * [Installation](#installation)
 24 |   * [Migration from v0.x.x](#migration-from-v0xx)
 25 |   * [Usage](#usage)
 26 |     * [Markup](#example-markup)
 27 |     * [Initialization](#initialization)
 28 |   * [Options](#options)
 29 |   * [Callbacks](#callbacks)
 30 |   * [Methods](#methods)
 31 | 
 32 | ## Installation
 33 | 
 34 | ### NPM
 35 | ```bash
 36 | npm install dm-file-uploader --save
 37 | ```
 38 | 
 39 | ### Bower
 40 | ```bash
 41 | bower install dm-file-uploader --save
 42 | ```
 43 | 
 44 | ### Download tarball
 45 | You can download the latest release tarball directly from [releases](https://github.com/danielm/uploader/releases)
 46 | 
 47 | ### Git
 48 | ```bash
 49 | git clone https://github.com/danielm/uploader.git
 50 | ```
 51 | 
 52 | ## Migration from v0.x.x
 53 | 1.x.x got a lot of changes and new features, if you are a previous version user read [CHANGELOG.md](CHANGELOG.md), there you can find the specific details of what was changed or removed.
 54 | 
 55 | ## Usage
 56 | As shown in the demos there are many ways to use the plugin, but the basic concepts are:
 57 | - Initialize the plugin on any HTML element such as: <code>`<div />`</code> to provide a Drag and drop area.
 58 | - All <code>`<input type="file"/>`</code> inside the main area element will be bound too.
 59 | - Optionally you can bind it directly to the <code>`<input />`</code>
 60 | 
 61 | ### Example Markup
 62 | This is the simple html markup. The file input is optional but it provides an alternative way to select files for the user(check the online demo to se how to hide/style it)
 63 | ```html
 64 | <div id="drop-area">
 65 |   <h3>Drag and Drop Files Here<h3/>
 66 |   <input type="file" title="Click to add Files">
 67 | </div>
 68 | ```
 69 | 
 70 | ### Initialization
 71 | ```html
 72 |    <script src="/path/to/jquery.dm-uploader.min.js"></script>
 73 | ```
 74 | 
 75 | ```javascript
 76 | $("#drop-area").dmUploader({
 77 |   url: '/path/to/backend/upload.asp',
 78 |   //... More settings here...
 79 |   
 80 |   onInit: function(){
 81 |     console.log('Callback: Plugin initialized');
 82 |   }
 83 |   
 84 |   // ... More callbacks
 85 | });
 86 | ```
 87 | Down below there is a detailed list of all available [Options](#options) and [Callbacks](#callbacks).
 88 | 
 89 | Additionally, after initialization you can use any of the available [Methods](#methods) to interact with the plugin.
 90 | 
 91 | ## Options
 92 |  * **queue**: (boolean) ``Default true`` Files will upload one by one.
 93 |  
 94 |  * **auto**: (boolean) ``Default true`` Files will start uploading right after they are added.
 95 |    If using the ``queue`` system this option means the ``queue`` will start automatically after the first file is added.
 96 | 
 97 |    Setting this to `false` will require you to manually start the uploads using the API [Methods](#methods).
 98 | 
 99 |  * **dnd**: (boolean) ``Default true`` Enables Drag and Drop.
100 | 
101 |  * **hookDocument**: (boolean) ``Default true`` Disables dropping files on $(document).
102 | 
103 |    **This is necessary** to prevent the Browser from redirecting when dropping files.
104 | 
105 |    The only reason why you may want to disable it is when using multiple instances of the plugin. If that's the case you only need to use it **once**.
106 | 
107 |  * **multiple**: (boolean) ``Default true`` Allows the user to select or drop multiple files at the same time.
108 | 
109 |  * **url**: (string) ``Default document.URL`` Server URL to handle file uploads (backend logic).
110 | 
111 |  * **method**: (string) ``Default POST`` HTTP method used by the upload request.
112 | 
113 |  * **extraData**: (object/function) Collection of parameters to add in the upload request.
114 | 
115 |    ```javascript
116 |    // Example
117 |    extraData: {
118 |       "galleryid": 666
119 |    }
120 |    ```
121 | 
122 |    If you need a dynamic value this can be set as a `function`. Also, if this function returns `false` nothing will be added.
123 | 
124 |    ```javascript
125 |    // Example
126 |    extraData: function() {
127 |       return {
128 |         "galleryid": $('#gallery').val()
129 |       };
130 |    }
131 |    ```
132 | 
133 |  * **headers**: (object) Collection of headers to send in the upload request.
134 | 
135 |    ```javascript
136 |    // Example
137 |    headers: {
138 |       'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
139 |    }
140 |    ```
141 | 
142 |  * **dataType**: (string) ``Default null`` Response type of the upload request.
143 | 
144 |    Default is `null` which means jQuery will try to 'guess' depending of what the server returns.
145 | 
146 |    Other values can be: `xml`, `json`, `script`, `html` or `text`
147 | 
148 |    Reference: http://api.jquery.com/jquery.ajax/
149 | 
150 |  * **fieldName**: (string) ``Default 'file'`` Field name in the upload request where we 'attach' the file.
151 | 
152 |    ```php
153 |    // For example in PHP if using the default value you can access the file by using:
154 |    var_dump($_FILES['file']);
155 |    // 'file' correspond to the value of this option.
156 |    ```
157 | 
158 |  * **maxFileSize**: (integer) ``Default 0`` File validation: Max file size in bytes. Zero means no limit.
159 | 
160 |    ```javascript
161 |    maxFileSize: 3000000 // 3 Megs
162 |    ```
163 | 
164 |  * **allowedTypes**: (string) ``Default "*"`` File validation: Regular expression to match file mime-type.
165 | 
166 |    ```javascript
167 |    allowedTypes: "image/*"
168 |    ```
169 | 
170 |  * **extFilter**: (array) ``Default null`` File validation: Array of allowed extensions.
171 | 
172 |    ```javascript
173 |    extFilter: ["jpg", "jpeg", "png", "gif"]
174 |    ```
175 | 
176 | ## Callbacks
177 | 
178 | ### General purpose
179 | 
180 |  * **onInit**: () Widget it's ready to use.
181 | 
182 |  * **onFallbackMode**: () Triggers only when the browser is not supported by the plugin.
183 | 
184 |  * **onDragEnter**: () User is dragging files over the drop Area.
185 | 
186 |  * **onDragLeave**: () User left the drop Area.
187 | 
188 |    This also triggers when the files are dropped.
189 | 
190 |  * **onDocumentDragEnter**: () User is dragging files anywhere over the $(document)
191 | 
192 |  * **onDocumentDragLeave**: () User left the $(document) area.
193 | 
194 |    This also triggers when the files are dropped.
195 | 
196 |  * **onComplete**: () All pending files are completed. 
197 | 
198 |    Only applies when using `queue: true`. See [options](#options).
199 | 
200 |    Triggers when the queue reaches the end (even if some files were cancelled or gave any error).
201 | 
202 | ### File callbacks
203 |  All these include `id`
204 | 
205 |  `id` (string): Unique ID. Useful to identify the same file in subsequent callbacks.
206 | 
207 |  * **onNewFile**: (id, file) A new file was selected or dropped by the user.
208 | 
209 |    - `file` (object): File object, use it to access file details such as name, size, etc.
210 | 
211 |      For [reference click here](https://developer.mozilla.org/en-US/docs/Web/API/File).
212 | 
213 |    - If multiple are added, this gets called multiple times.
214 | 
215 |    - File validations were already executed.
216 | 
217 |    - If a return value is provided and is `=== false` the file will be ignored by the widget.
218 | 
219 |    - Use this return value to implement your own validators.
220 | 
221 |  * **onBeforeUpload**: (id) Upload request is about to be executed.
222 | 
223 |  * **onUploadProgress**: (id, percent) Got a new upload percentage for the file
224 | 
225 |    `percent` (integer) : 0-100
226 | 
227 |  * **onUploadSuccess**: (id, data) File was successfully uploaded and got a response form the server
228 | 
229 |    `data` (object) : Upload request response. The object type of this parameter depends of: `dataType` 
230 | 
231 |    See more in [options](#options).
232 | 
233 |  * **onUploadError**: (id, xhr, status, errorThrown) An error happened during the upload request.
234 | 
235 |    `xhr` (object) : XMLHttpRequest
236 | 
237 |    `status` (integer) : Error type, example: "timeout", "error", "abort", and "parsererror"
238 | 
239 |    `errorThrown` (string) : Only when an HTTP error occurs: `Not Found`, `Bad Request`, etc.
240 | 
241 |    Reference: http://api.jquery.com/jquery.ajax/
242 | 
243 |  * **onUploadComplete**: (id) The upload of the file was complete.
244 | 
245 |    This triggers right after `onUploadSuccess` or `onUploadError`. In **both** cases.
246 | 
247 |  * **onUploadCanceled**: (id) Upload was cancelled by the user.
248 | 
249 |    This one triggers when cancelling an upload using one of the API methods.
250 | 
251 |    See more in [methods](#methods).
252 | 
253 | ### Validation callbacks
254 | 
255 |  * **onFileTypeError**: (file) File type validation failed.
256 | 
257 |    Triggers when using the setting: `allowedTypes`.
258 | 
259 |    See more in [options](#options).
260 | 
261 |  * **onFileSizeError**: (file) File size validation failed.
262 | 
263 |    Triggers when using the setting: `maxFileSize`.
264 | 
265 |    See more in [options](#options).
266 | 
267 |  * **onFileExtError**: (file) File extension validation failed.
268 | 
269 |    Triggers when using the setting: `extFilter`.
270 | 
271 |    See more in [options](#options).
272 | 
273 | ## Methods
274 |  There are a few methods you can use to interact with the widget, some of their behavior may depend on settings.
275 | 
276 |  * **start**: (id) Start the upload. (id is optional)
277 | 
278 |    Depending on the situation this method may do:
279 |      - Start the upload of an individual file if an `id` was provided and there isn't a `queue` running.
280 |      - Retry a failed or a previously cancelled file.
281 |      - Start the queue if `auto` is set to `false` and no `id` is provided
282 |      - Start ALL the pending files if `queue` is set to false `false`
283 | 
284 |     Example:
285 | 
286 |    ```javascript
287 |    $("#drop-area").dmUploader("start", id);
288 |    ```
289 | 
290 |  * **cancel**: (id) Cancel the upload. (id is optional)
291 | 
292 |    Depending on the situation this method may do:
293 |      - Cancel a file that is currently uploading if an `id` is provided.
294 |      - Cancel all currently uploading files if an `id` is NOT provided.
295 |      - Cancel a pending file, and it it will be skipped by the `queue` if using that option
296 |      - Stop the current `queue` if using that option, and all current uploads.
297 | 
298 |    Example:
299 | 
300 |    ```javascript
301 |    $("#drop-area").dmUploader("cancel", id);
302 |    ```
303 | 
304 |  * **reset**: () Resets the plugin
305 |    
306 |    - Stops all uploads
307 |    - Removes all files
308 |    - Resets queue
309 | 
310 |    Example:
311 | 
312 |    ```javascript
313 |    $("#drop-area").dmUploader("reset");
314 |    ```
315 | 
316 |  * **destroy**: () Destroys all plugin data
317 |    
318 |    - Stops all uploads
319 |    - Removes all files
320 |    - Releases all the events, including the ones used by `hookDocument` if using that option
321 | 
322 |    Example:
323 | 
324 |    ```javascript
325 |    // Example
326 |    $("#drop-area").dmUploader("destroy");
327 |    ```
328 | 
329 | 


--------------------------------------------------------------------------------
/src/js/jquery.dm-uploader.js:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * dmUploader - jQuery Ajax File Uploader Widget
  3 |  * https://github.com/danielm/uploader
  4 |  *
  5 |  * Copyright Daniel Morales <daniel85mg@gmail.com>
  6 |  * Released under the MIT license.
  7 |  * https://github.com/danielm/uploader/blob/master/LICENSE.txt
  8 |  *
  9 |  * @preserve
 10 |  */
 11 | 
 12 | /* global define, define, window, document, FormData */
 13 | 
 14 | (function(factory) {
 15 |   "use strict";
 16 |   if (typeof define === "function" && define.amd) {
 17 |     // AMD. Register as an anonymous module.
 18 |     define(["jquery"], factory);
 19 |   } else if (typeof exports !== "undefined") {
 20 |     module.exports = factory(require("jquery"));
 21 |   } else {
 22 |     // Browser globals
 23 |     factory(window.jQuery);
 24 |   }
 25 | }(function($) {
 26 |   "use strict";
 27 | 
 28 |   var pluginName = "dmUploader";
 29 | 
 30 |   var FileStatus = {
 31 |     PENDING: 0,
 32 |     UPLOADING: 1,
 33 |     COMPLETED: 2,
 34 |     FAILED: 3,
 35 |     CANCELLED: 4 //(by the user)
 36 |   };
 37 | 
 38 |   // These are the plugin defaults values
 39 |   var defaults = {
 40 |     auto: true,
 41 |     queue: true,
 42 |     dnd: true,
 43 |     hookDocument: true,
 44 |     multiple: true,
 45 |     url: document.URL,
 46 |     method: "POST",
 47 |     extraData: {},
 48 |     headers: {},
 49 |     dataType: null,
 50 |     fieldName: "file",
 51 |     maxFileSize: 0,
 52 |     allowedTypes: "*",
 53 |     extFilter: null,
 54 |     onInit: function(){},
 55 |     onComplete: function(){},
 56 |     onFallbackMode: function() {},
 57 |     onNewFile: function(){},        //params: id, file
 58 |     onBeforeUpload: function(){},   //params: id
 59 |     onUploadProgress: function(){}, //params: id, percent
 60 |     onUploadSuccess: function(){},  //params: id, data
 61 |     onUploadCanceled: function(){}, //params: id
 62 |     onUploadError: function(){},    //params: id, xhr, status, message
 63 |     onUploadComplete: function(){}, //params: id
 64 |     onFileTypeError: function(){},  //params: file
 65 |     onFileSizeError: function(){},  //params: file
 66 |     onFileExtError: function(){},   //params: file
 67 |     onDragEnter: function(){},
 68 |     onDragLeave: function(){},
 69 |     onDocumentDragEnter: function(){},
 70 |     onDocumentDragLeave: function(){}
 71 |   };
 72 |   
 73 |   var DmUploaderFile = function(file, widget)
 74 |   {
 75 |     this.data = file;
 76 | 
 77 |     this.widget = widget;
 78 | 
 79 |     this.jqXHR = null;
 80 | 
 81 |     this.status = FileStatus.PENDING;
 82 | 
 83 |     // The file id doesnt have to bo that special.... or not?
 84 |     this.id = Math.random().toString(36).substr(2);
 85 |   };
 86 | 
 87 |   DmUploaderFile.prototype.upload = function()
 88 |   {
 89 |     var file = this;
 90 | 
 91 |     if (!file.canUpload()) {
 92 | 
 93 |       if (file.widget.queueRunning && file.status !== FileStatus.UPLOADING) {
 94 |         file.widget.processQueue();
 95 |       }
 96 | 
 97 |       return false;
 98 |     }
 99 | 
100 |     // Form Data
101 |     var fd = new FormData();
102 |     fd.append(file.widget.settings.fieldName, file.data);
103 | 
104 |     // Append extra Form Data
105 |     var customData = file.widget.settings.extraData;
106 |     if (typeof(customData) === "function") {
107 |       customData = customData.call(file.widget.element, file.id);
108 |     }
109 | 
110 |     $.each(customData, function(exKey, exVal) {
111 |       fd.append(exKey, exVal);
112 |     });
113 | 
114 |     file.status = FileStatus.UPLOADING;
115 |     file.widget.activeFiles++;
116 | 
117 |     file.widget.settings.onBeforeUpload.call(file.widget.element, file.id);
118 | 
119 |     // Ajax Submit
120 |     file.jqXHR = $.ajax({
121 |       url: file.widget.settings.url,
122 |       type: file.widget.settings.method,
123 |       dataType: file.widget.settings.dataType,
124 |       data: fd,
125 |       headers: file.widget.settings.headers,
126 |       cache: false,
127 |       contentType: false,
128 |       processData: false,
129 |       forceSync: false,
130 |       xhr: function() { return file.getXhr(); },
131 |       success: function(data) { file.onSuccess(data); },
132 |       error: function(xhr, status, errMsg) { file.onError(xhr, status, errMsg); },
133 |       complete: function() { file.onComplete(); },
134 |     });
135 | 
136 |     return true;
137 |   };
138 | 
139 |   DmUploaderFile.prototype.onSuccess = function(data)
140 |   {
141 |     this.status = FileStatus.COMPLETED;
142 |     this.widget.settings.onUploadSuccess.call(this.widget.element, this.id, data);
143 |   };
144 | 
145 |   DmUploaderFile.prototype.onError = function(xhr, status, errMsg)
146 |   {
147 |     // If the status is: cancelled (by the user) don't invoke the error callback
148 |     if (this.status !== FileStatus.CANCELLED) {
149 |       this.status = FileStatus.FAILED;
150 |       this.widget.settings.onUploadError.call(this.widget.element, this.id, xhr, status, errMsg);
151 |     }
152 |   };
153 | 
154 |   DmUploaderFile.prototype.onComplete = function()
155 |   {
156 |     this.widget.activeFiles--;
157 | 
158 |     if (this.status !== FileStatus.CANCELLED) {
159 |       this.widget.settings.onUploadComplete.call(this.widget.element, this.id);
160 |     }
161 | 
162 |     if (this.widget.queueRunning) {
163 |       this.widget.processQueue();
164 |     } else if (this.widget.settings.queue && this.widget.activeFiles === 0) {
165 |       this.widget.settings.onComplete.call(this.element);
166 |     }
167 |   };
168 | 
169 |   DmUploaderFile.prototype.getXhr = function()
170 |   {
171 |     var file = this;
172 |     var xhrobj = $.ajaxSettings.xhr();
173 | 
174 |     if (xhrobj.upload) {
175 |       xhrobj.upload.addEventListener("progress", function(event) {
176 |         var percent = 0;
177 |         var position = event.loaded || event.position;
178 |         var total = event.total || event.totalSize;
179 | 
180 |         if (event.lengthComputable) {
181 |           percent = Math.ceil(position / total * 100);
182 |         }
183 |         file.widget.settings.onUploadProgress.call(file.widget.element, file.id, percent);
184 |       }, false);
185 |     }
186 | 
187 |     return xhrobj;
188 |   };
189 | 
190 |   DmUploaderFile.prototype.cancel = function(abort)
191 |   {
192 |     // The abort flag is to track if we are calling this function directly (using the cancel Method, by id)
193 |     // or the call comes from the 'gobal' method aka cancelAll.
194 |     // THis mean that we don't want to trigger the cancel event on file that isn't uploading, UNLESS directly doing it
195 |     // ... and yes, it could be done prettier. Review (?)
196 |     abort = (typeof abort === "undefined" ? false : abort);
197 | 
198 |     var myStatus = this.status;
199 | 
200 |     if (myStatus === FileStatus.UPLOADING || (abort && myStatus === FileStatus.PENDING)) {
201 |       this.status = FileStatus.CANCELLED;
202 |     } else {
203 |       return false;
204 |     }
205 | 
206 |     this.widget.settings.onUploadCanceled.call(this.widget.element, this.id);
207 | 
208 |     if (myStatus === FileStatus.UPLOADING) {
209 |       this.jqXHR.abort();
210 |     }
211 | 
212 |     return true;
213 |   };
214 | 
215 |   DmUploaderFile.prototype.canUpload = function()
216 |   {
217 |     return (
218 |       this.status === FileStatus.PENDING ||
219 |       this.status === FileStatus.FAILED
220 |     );
221 |   };
222 | 
223 |   var DmUploader = function(element, options)
224 |   {
225 |     this.element = $(element);
226 |     this.settings = $.extend({}, defaults, options);
227 | 
228 |     if (!this.checkSupport()) {
229 |       $.error("Browser not supported by jQuery.dmUploader");
230 | 
231 |       this.settings.onFallbackMode.call(this.element);
232 | 
233 |       return false;
234 |     }
235 | 
236 |     this.init();
237 | 
238 |     return this;
239 |   };
240 | 
241 |   DmUploader.prototype.checkSupport = function()
242 |   {
243 |     // This one is mandatory for all modes
244 |     if (typeof window.FormData === "undefined") {
245 |       return false;
246 |     }
247 | 
248 |     // Test based on: Modernizr/feature-detects/forms/fileinput.js
249 |     var exp = new RegExp(
250 |       "/(Android (1.0|1.1|1.5|1.6|2.0|2.1))|"+
251 |       "(Windows Phone (OS 7|8.0))|(XBLWP)|"+
252 |       "(ZuneWP)|(w(eb)?OSBrowser)|(webOS)|"+
253 |       "(Kindle\/(1.0|2.0|2.5|3.0))/");
254 | 
255 |     if (exp.test(window.navigator.userAgent)) {
256 |       return false;
257 |     }
258 | 
259 |     return !$("<input type=\"file\" />").prop("disabled");
260 |   };
261 | 
262 |   DmUploader.prototype.init = function()
263 |   {
264 |     var widget = this;
265 | 
266 |     // Queue vars
267 |     this.queue = [];
268 |     this.queuePos = -1;
269 |     this.queueRunning = false;
270 |     this.activeFiles = 0;
271 |     this.draggingOver = 0;
272 |     this.draggingOverDoc = 0;
273 | 
274 |     var input = widget.element.is("input[type=file]") ?
275 |       widget.element : widget.element.find("input[type=file]");
276 | 
277 |     //-- Is the input our main element itself??
278 |     if (input.length > 0) {
279 |       input.prop("multiple", this.settings.multiple);
280 | 
281 |       // Or does it has the input as a child
282 |       input.on("change." + pluginName, function(evt) {
283 |         var files = evt.target && evt.target.files;
284 | 
285 |         if (!files || !files.length){
286 |           return;
287 |         }
288 | 
289 |         widget.addFiles(files);
290 | 
291 |         $(this).val("");
292 |       });
293 |     }
294 | 
295 |     if (this.settings.dnd) {
296 |       this.initDnD();
297 |     }
298 | 
299 |     if (input.length === 0 && !this.settings.dnd) {
300 |       // Trigger an error because if this happens the plugin wont do anything.
301 |       $.error("Markup error found by jQuery.dmUploader");
302 | 
303 |       return null;
304 |     }
305 | 
306 |     // We good to go, tell them!
307 |     this.settings.onInit.call(this.element);
308 | 
309 |     return this;
310 |   };
311 | 
312 |   DmUploader.prototype.initDnD = function()
313 |   {
314 |     var widget = this;
315 | 
316 |     // -- Now our own Drop
317 |     widget.element.on("drop." + pluginName, function (evt) {
318 |       evt.preventDefault();
319 | 
320 |       if (widget.draggingOver > 0){
321 |         widget.draggingOver = 0;
322 |         widget.settings.onDragLeave.call(widget.element);
323 |       }
324 | 
325 |       var dataTransfer = evt.originalEvent && evt.originalEvent.dataTransfer;
326 |       if (!dataTransfer || !dataTransfer.files || !dataTransfer.files.length) {
327 |         return;
328 |       }
329 | 
330 |       // Take only the first file if not acepting multiple, this is kinda ugly. Needs Review ?
331 |       var files = [];
332 | 
333 |       if (widget.settings.multiple) {
334 |         files = dataTransfer.files;
335 |       } else {
336 |         files.push(dataTransfer.files[0]);
337 |       }
338 | 
339 |       widget.addFiles(files);
340 |     });
341 | 
342 |     //-- These two events/callbacks are onlt to maybe do some fancy visual stuff
343 |     widget.element.on("dragenter." + pluginName, function(evt) {
344 |       evt.preventDefault();
345 | 
346 |       if (widget.draggingOver === 0){
347 |         widget.settings.onDragEnter.call(widget.element);
348 |       }
349 | 
350 |       widget.draggingOver++;
351 |     });
352 | 
353 |     widget.element.on("dragleave." + pluginName, function(evt) {
354 |       evt.preventDefault();
355 | 
356 |       widget.draggingOver--;
357 | 
358 |       if (widget.draggingOver === 0){
359 |         widget.settings.onDragLeave.call(widget.element);
360 |       }
361 |     });
362 | 
363 |     if (!widget.settings.hookDocument) {
364 |       return;
365 |     }
366 | 
367 |     // Adding some off/namepacing to prevent some weird cases when people use multiple instances
368 |     $(document).off("drop." + pluginName).on("drop." + pluginName, function(evt) {
369 |       evt.preventDefault();
370 | 
371 |       if (widget.draggingOverDoc > 0){
372 |         widget.draggingOverDoc = 0;
373 |         widget.settings.onDocumentDragLeave.call(widget.element);
374 |       }
375 |     });
376 | 
377 |     $(document).off("dragenter." + pluginName).on("dragenter." + pluginName, function(evt) {
378 |       evt.preventDefault();
379 | 
380 |       if (widget.draggingOverDoc === 0){
381 |         widget.settings.onDocumentDragEnter.call(widget.element);
382 |       }
383 | 
384 |       widget.draggingOverDoc++;
385 |     });
386 | 
387 |     $(document).off("dragleave." + pluginName).on("dragleave." + pluginName, function(evt) {
388 |       evt.preventDefault();
389 | 
390 |       widget.draggingOverDoc--;
391 | 
392 |       if (widget.draggingOverDoc === 0){
393 |         widget.settings.onDocumentDragLeave.call(widget.element);
394 |       }
395 |     });
396 | 
397 |     $(document).off("dragover." + pluginName).on("dragover." + pluginName, function(evt) {
398 |       evt.preventDefault();
399 |     });
400 |   };
401 | 
402 |   DmUploader.prototype.releaseEvents = function() {
403 |     // Leave everyone ALONE ;_;
404 | 
405 |     this.element.off("." + pluginName);
406 |     this.element.find("input[type=file]").off("." + pluginName);
407 | 
408 |     if (this.settings.hookDocument) {
409 |       $(document).off("." + pluginName);
410 |     }
411 |   };
412 | 
413 |   DmUploader.prototype.validateFile = function(file)
414 |   {
415 |     // Check file size
416 |     if ((this.settings.maxFileSize > 0) &&
417 |         (file.size > this.settings.maxFileSize)) {
418 | 
419 |       this.settings.onFileSizeError.call(this.element, file);
420 | 
421 |       return false;
422 |     }
423 | 
424 |     // Check file type
425 |     if ((this.settings.allowedTypes !== "*") &&
426 |         !file.type.match(this.settings.allowedTypes)){
427 | 
428 |       this.settings.onFileTypeError.call(this.element, file);
429 | 
430 |       return false;
431 |     }
432 | 
433 |     // Check file extension
434 |     if (this.settings.extFilter !== null) {
435 |       var ext = file.name.toLowerCase().split(".").pop();
436 | 
437 |       if ($.inArray(ext, this.settings.extFilter) < 0) {
438 |         this.settings.onFileExtError.call(this.element, file);
439 | 
440 |         return false;
441 |       }
442 |     }
443 | 
444 |     return new DmUploaderFile(file, this);
445 |   };
446 | 
447 |   DmUploader.prototype.addFiles = function(files)
448 |   {
449 |     var nFiles = 0;
450 | 
451 |     for (var i= 0; i < files.length; i++)
452 |     {
453 |       var file = this.validateFile(files[i]);
454 | 
455 |       if (!file){
456 |         continue;
457 |       }
458 | 
459 |       // If the callback returns false file will not be processed. This may allow some customization
460 |       var can_continue = this.settings.onNewFile.call(this.element, file.id, file.data);
461 |       if (can_continue === false) {
462 |         continue;
463 |       }
464 | 
465 |       // If we are using automatic uploading, and not a file queue: go for the upload
466 |       if (this.settings.auto && !this.settings.queue) {
467 |         file.upload();
468 |       }
469 | 
470 |       this.queue.push(file);
471 |       
472 |       nFiles++;
473 |     }
474 | 
475 |     // No files were added
476 |     if (nFiles === 0) {
477 |       return this;
478 |     }
479 | 
480 |     // Are we auto-uploading files?
481 |     if (this.settings.auto && this.settings.queue && !this.queueRunning) {
482 |       this.processQueue();
483 |     }
484 | 
485 |     return this;
486 |   };
487 | 
488 |   DmUploader.prototype.processQueue = function()
489 |   {
490 |     this.queuePos++;
491 | 
492 |     if (this.queuePos >= this.queue.length) {
493 |       if (this.activeFiles === 0) {
494 |         this.settings.onComplete.call(this.element);
495 |       }
496 | 
497 |       // Wait until new files are droped
498 |       this.queuePos = (this.queue.length - 1);
499 | 
500 |       this.queueRunning = false;
501 | 
502 |       return false;
503 |     }
504 | 
505 |     this.queueRunning = true;
506 | 
507 |     // Start next file
508 |     return this.queue[this.queuePos].upload();
509 |   };
510 | 
511 |   DmUploader.prototype.restartQueue = function()
512 |   {
513 |     this.queuePos = -1;
514 |     this.queueRunning = false;
515 | 
516 |     this.processQueue();
517 |   };
518 | 
519 |   DmUploader.prototype.findById = function(id)
520 |   {
521 |     var r = false;
522 | 
523 |     for (var i = 0; i < this.queue.length; i++) {
524 |       if (this.queue[i].id === id) {
525 |         r = this.queue[i];
526 |         break;
527 |       }
528 |     }
529 | 
530 |     return r;
531 |   };
532 | 
533 |   DmUploader.prototype.cancelAll =  function()
534 |   {
535 |     var queueWasRunning = this.queueRunning;
536 |     this.queueRunning = false;
537 | 
538 |     // cancel 'em all
539 |     for (var i = 0; i < this.queue.length; i++) {
540 |       this.queue[i].cancel();
541 |     }
542 | 
543 |     if (queueWasRunning) {
544 |       this.settings.onComplete.call(this.element);
545 |     }
546 |   };
547 | 
548 |   DmUploader.prototype.startAll = function()
549 |   {
550 |     if (this.settings.queue) {
551 |       // Resume queue
552 |       this.restartQueue();
553 |     } else {
554 |       // or upload them all
555 |       for (var i = 0; i < this.queue.length; i++) {
556 |         this.queue[i].upload();
557 |       }
558 |     }
559 |   };
560 | 
561 |   // Public API methods
562 |   DmUploader.prototype.methods = {
563 |     start: function(id) {
564 |       if (this.queueRunning){
565 |         // Do not allow to manually upload Files when a queue is running
566 |         return false;
567 |       }
568 | 
569 |       var file = false;
570 | 
571 |       if (typeof id !== "undefined") {
572 |         file = this.findById(id);
573 | 
574 |         if (!file) {
575 |           // File not found in stack
576 |           $.error("File not found in jQuery.dmUploader");
577 | 
578 |           return false;
579 |         }
580 |       }
581 |       
582 |       // Trying to Start an upload by ID
583 |       if (file) {
584 |         if (file.status === FileStatus.CANCELLED) {
585 |           file.status = FileStatus.PENDING;
586 |         }
587 |         return file.upload();
588 |       }
589 | 
590 |       // With no id provided...
591 | 
592 |       this.startAll();
593 | 
594 |       return true;
595 |     },
596 |     cancel: function(id) {
597 |       var file = false;
598 |       if (typeof id !== "undefined") {
599 |         file = this.findById(id);
600 | 
601 |         if (!file) {
602 |           // File not found in stack
603 |           $.error("File not found in jQuery.dmUploader");
604 | 
605 |           return false;
606 |         }
607 |       }
608 | 
609 |       if (file) {
610 |         return file.cancel(true);
611 |       }
612 | 
613 |       // With no id provided...
614 |       
615 |       this.cancelAll();
616 | 
617 |       return true;
618 |     },
619 |     reset: function() {
620 | 
621 |       this.cancelAll();
622 | 
623 |       this.queue = [];
624 |       this.queuePos = -1;
625 |       this.activeFiles = 0;
626 | 
627 |       return true;
628 |     },
629 |     destroy: function() {
630 |       this.cancelAll();
631 | 
632 |       this.releaseEvents();
633 | 
634 |       this.element.removeData(pluginName);
635 |     }
636 |   };
637 | 
638 |   $.fn.dmUploader = function(options) {
639 |     var args = arguments;
640 | 
641 |     if (typeof options === "string") {
642 |       this.each(function() {
643 |         var plugin = $.data(this, pluginName);
644 | 
645 |         if (plugin instanceof DmUploader) {
646 |           if (typeof plugin.methods[options] === "function") {
647 |             plugin.methods[options].apply(plugin, Array.prototype.slice.call(args, 1));
648 |           } else {
649 |             $.error("Method " +  options + " does not exist in jQuery.dmUploader");
650 |           }
651 |         } else {
652 |           $.error("Unknown plugin data found by jQuery.dmUploader");
653 |         }
654 |       });
655 |     } else {
656 |       return this.each(function () {
657 |         if (!$.data(this, pluginName)) {
658 |           $.data(this, pluginName, new DmUploader(this, options));
659 |         }
660 |       });
661 |     }
662 |   };
663 | }));


--------------------------------------------------------------------------------