`javascript
$("#drop-area").dmUploader({
url: '/path/to/backend/upload.asp',
//... More settings here...

onInit: function(){
console.log('Callback: Plugin initialized');
}

// ... More callbacks
});
`
Down below there is a detailed list of all available Options and Callbacks.

Additionally, after initialization you can use any of the available Methods to interact with the plugin.

Options

Setting this to false will require you to manually start the uploads using the API Methods.

* dnd: (boolean) Default true Enables Drag and Drop.

* hookDocument: (boolean) Default true Disables dropping files on $(document).

This is necessary to prevent the Browser from redirecting when dropping files.

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.

* multiple: (boolean) Default true Allows the user to select or drop multiple files at the same time.

* url: (string) Default document.URL Server URL to handle file uploads (backend logic).

* method: (string) Default POST HTTP method used by the upload request.

* extraData: (object/function) Collection of parameters to add in the upload request.

`javascript
// Example
extraData: {
"galleryid": 666
}
`

If you need a dynamic value this can be set as a function. Also, if this function returns false nothing will be added.

`javascript
// Example
extraData: function() {
return {
"galleryid": $('#gallery').val()
};
}
`

* headers: (object) Collection of headers to send in the upload request.

`javascript
// Example
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
`

* dataType: (string) Default null Response type of the upload request.

Default is null which means jQuery will try to 'guess' depending of what the server returns.

Other values can be: xml, json, script, html or text

Reference: http://api.jquery.com/jquery.ajax/

* fieldName: (string) Default 'file' Field name in the upload request where we 'attach' the file.

`php
// For example in PHP if using the default value you can access the file by using:
var_dump($_FILES['file']);
// 'file' correspond to the value of this option.
`

* maxFileSize: (integer) Default 0 File validation: Max file size in bytes. Zero means no limit.

`javascript
maxFileSize: 3000000 // 3 Megs
`

allowedTypes: (string) Default "" File validation: Regular expression to match file mime-type.

`javascript
allowedTypes: "image/*"
`

* extFilter: (array) Default null File validation: Array of allowed extensions.

`javascript
extFilter: ["jpg", "jpeg", "png", "gif"]
`

Callbacks

$3

* onInit: () Widget it's ready to use.

* onFallbackMode: () Triggers only when the browser is not supported by the plugin.

* onDragEnter: () User is dragging files over the drop Area.

* onDragLeave: () User left the drop Area.

This also triggers when the files are dropped.

* onDocumentDragEnter: () User is dragging files anywhere over the $(document)

* onDocumentDragLeave: () User left the $(document) area.

This also triggers when the files are dropped.

* onComplete: () All pending files are completed.

Only applies when using queue: true. See options.

Triggers when the queue reaches the end (even if some files were cancelled or gave any error).

$3

id (string): Unique ID. Useful to identify the same file in subsequent callbacks.

* onNewFile: (id, file) A new file was selected or dropped by the user.

- file (object): File object, use it to access file details such as name, size, etc.

For reference click here.

- If multiple are added, this gets called multiple times.

- File validations were already executed.

- If a return value is provided and is === false the file will be ignored by the widget.

- Use this return value to implement your own validators.

* onBeforeUpload: (id) Upload request is about to be executed.

* onUploadProgress: (id, percent) Got a new upload percentage for the file

percent (integer) : 0-100

* onUploadSuccess: (id, data) File was successfully uploaded and got a response form the server

data (object) : Upload request response. The object type of this parameter depends of: dataType

See more in options.

* onUploadError: (id, xhr, status, errorThrown) An error happened during the upload request.

xhr (object) : XMLHttpRequest

status (integer) : Error type, example: "timeout", "error", "abort", and "parsererror"

errorThrown (string) : Only when an HTTP error occurs: Not Found, Bad Request, etc.

Reference: http://api.jquery.com/jquery.ajax/

* onUploadComplete: (id) The upload of the file was complete.

This triggers right after onUploadSuccess or onUploadError. In both cases.

* onUploadCanceled: (id) Upload was cancelled by the user.

This one triggers when cancelling an upload using one of the API methods.

See more in methods.

$3

* onFileTypeError: (file) File type validation failed.

Triggers when using the setting: allowedTypes.

See more in options.

* onFileSizeError: (file) File size validation failed.

Triggers when using the setting: maxFileSize.

See more in options.

* onFileExtError: (file) File extension validation failed.

Triggers when using the setting: extFilter.

See more in options.

Methods

Depending on the situation this method may do:
- Start the upload of an individual file if an id was provided and there isn't a queue running.
- Retry a failed or a previously cancelled file.
- Start the queue if auto is set to false and no id is provided
- Start ALL the pending files if queue is set to false false

Example:

`javascript
$("#drop-area").dmUploader("start", id);
`

* cancel: (id) Cancel the upload. (id is optional)

Depending on the situation this method may do:
- Cancel a file that is currently uploading if an id is provided.
- Cancel all currently uploading files if an id is NOT provided.
- Cancel a pending file, and it it will be skipped by the queue if using that option
- Stop the current queue if using that option, and all current uploads.

Example:

`javascript
$("#drop-area").dmUploader("cancel", id);
`

* reset: () Resets the plugin

- Stops all uploads
- Removes all files
- Resets queue

Example:

`javascript
$("#drop-area").dmUploader("reset");
`

* destroy: () Destroys all plugin data

- Stops all uploads
- Removes all files
- Releases all the events, including the ones used by hookDocument if using that option

Example:

`javascript
// Example
$("#drop-area").dmUploader("destroy");
``