File v 1.2
Converts an file upload field into a multi upload form
General Idea
The problem with file uploads is that they require different data types and the files can be large which causes a delay after submitting the form. Because of this reason the wl_File plugin transfers the files via an AJAX request:
- User select file to upload via his file explorer (WIN) or finder (MAC)
- The files get send to a script (script A) which saves the files temporarily
- The user submit the form and only a list of uploaded files is sent to the server (to script B)
- script B must handle the list and move the files from the temp folder to the desired destination
- The disadvantage of this method is that files are allready on the server even without submitting the form
- The advantage is the short delay when sending the actual form to the server
This plugin requires server side action (upload.php)
Options read more about inline data attributes
| option | default | possible values | description | since | info |
|---|---|---|---|---|---|
| autoUpload | true | true | false | The upload starts immediately after adding a file | 1.0 | |
| paramName | 'files' | 'String' | The name attribute used to send to the server | 1.0 | must be equal the param_name option in the upload.php |
| multiple | true | true | false | Allowes multiple file upload. Can be set within the native input field | 1.0 | Currently not supported in Internet Explorer |
| allowedExtensions | false | false, Array | define allowed file extensions. If set to false all fiels are allowed | 1.0 | |
| maxNumberOfFiles | 0 | integer | define maximum of allowed files for the upload field. Set to 0 to disable | 1.0 | |
| maxFileSize | 0 | integer | defines the maximum file size for a file | 1.0 | not available on Internet Explorer |
| minFileSize | 0 | integer | defines the maximum file size for a file | 1.0 | not available on Internet Explorer |
| sequentialUploads | false | true | false | Set this option to true to issue all file upload requests in a sequential order instead of simultaneous requests | 1.0 | |
| dragAndDrop | true | true | false | Enables drag & drop support in modern browser | 1.0 | |
| formData | null | Array, Object, function | additional data sent to the upload script | 1.0 | |
| text | [texts] | object | an object with all required texts | 1.0 | |
| onAdd | function(e, data){} | function(event, data) | callback for adding files to the list | 1.0 | |
| onSend | function(e, data){} | function(event, data) | callback on sending fiels to the server. Return false prevent sending data | 1.0 | |
| onDone | function(e, data){} | function(event, data) | callback if one file was succesfully uploaded | 1.0 | |
| onFinish | function(e, data){} | function(event, data) | callback if all files where succesfully uploaded | 1.0 | |
| onFail | function(e, data){} | function(event, data) | callback if an error occurs | 1.0 | |
| onAlways | function(e, data){} | function(event, data) | callback gets called in any case (always) | 1.0 | |
| onProgress | function(e, data){} | function(event, data) | callback during upload progress for one file | 1.0 | only available on modern browsers |
| onProgressAll | function(e, data){} | function(event, data) | callback during upload progress for all files | 1.0 | only available on modern browsers |
| onStart | function(e){} | function(event) | callback on start of the upload | 1.0 | |
| onStop | function(e){} | function(event) | callback if the upload is finished | 1.0 | |
| onChange | function(e, data){} | function(event, data) | callback if a file is added or removed to the list | 1.0 | |
| onDrop | function(e, data){} | function(event, data) | callback if a file is droped from the users file system | 1.0 | |
| onDragOver | function(e){} | function(event) | callback if the user drags a file from his file system over the dropzone | 1.0 | |
| onFileError | function(error, fileobj){} | function(error, fileobj) | callback if an error occures on file add. error: error.msg : maxNumberOfFiles|allowedExtensions|maxFileSize|minFileSize error.code : 1|2|3|4 | 1.0 | file.size is not available on Internet Explorer |
| Check out jQuery-File-Upload plugin docs for all options | |||||
Methods
| method name | default | arguments | description | since | info |
|---|---|---|---|---|---|
| reset | removes all files from the list | 1.2 | |||
| set | key, value | sets the the option 'key' with the value 'value' | 1.0 |
Usage
$(selector).wl_File([options]);
Calling Methods
$(selector).wl_File('method', [,arg [,arg]]);
Markup
<form action="submit.php" method="post"> <fieldset> <label>Fieldset Label</label> <section><label for="input">Label</label> <div><input type="file" id="file_upload" name="file_upload" multiple></div> </section> ... <section> <div><button>Submit</button></div> </section> </fieldset> </form>