Wiki source code of HTML5 File Upload
Last modified by Marius Dumitru Florea on 2021/08/24
Hide last authors
| author | version | line-number | content |
|---|---|---|---|
 |
1.1 | 1 | {{box cssClass="floatinginfobox" title="**Contents**"}} |
 |
2.3 | 2 | {{toc/}} |
| |
1.1 | 3 | {{/box}} |
| 4 | |||
| |
2.3 | 5 | {{info}} |
 |
5.1 | 6 | This is a Javascript widget bundled by default with the XWiki platform since version 4.2-milestone-3 ([[XWIKI-8132>>https://jira.xwiki.org/browse/XWIKI-8132]]). |
| |
2.3 | 7 | {{/info}} |
| |
1.1 | 8 | |
| |
2.3 | 9 | = Usage = |
| |
1.1 | 10 | |
| 11 | The File Upload widget can enhance HTML ##input## elements of type ##file## to provide an interactive upload UI. It can submit files either automatically when the user selects local files, or after the user presses the container form's submit button. | ||
| 12 | |||
 |
4.1 | 13 | {{code language="html"}} |
| 14 | <form action="/where/to/upload/the/file"> | ||
| 15 | <input type="file" id="myFileInput" name="nameUsedToAccessTheFileOnTheServer" /> | ||
| 16 | </form> | ||
| 17 | {{/code}} | ||
| 18 | |||
| |
1.1 | 19 | To use this widget, it is enough to create a new instance of ##XWiki.FileUploader## passing the target input element as the first parameter, and an optional configuration object as the second parameter. |
| 20 | |||
| |
4.1 | 21 | {{code language="js"}} |
| 22 | var targetInput = $('myFileInput'); | ||
| |
1.1 | 23 | if(targetInput) { |
| 24 | new XWiki.FileUploader(targetInput, { | ||
| 25 | autoUpload: true, | ||
| 26 | progressAutohide: true | ||
| 27 | }); | ||
| 28 | } | ||
| 29 | {{/code}} | ||
| 30 | |||
| 31 | [[image:html5uploads.png||class="screenshot"]] | ||
| 32 | |||
| |
2.3 | 33 | == Configuration options == |
| |
1.1 | 34 | |
| 35 | |=Option|=Details | ||
| |
3.1 | 36 | |autoUpload|Should the upload start as soon as the files are selected, or wait for a submit event? Defaults to ##true##. |
| |
1.1 | 37 | |enableFileInfo|Should information (name, type, size) about each selected file be displayed? Defaults to ##true##. |
| 38 | |enableProgressInfo|Should a progress bar be displayed as each file is uploaded? Defaults to ##true##. | ||
| |
3.1 | 39 | |fileFilter|Regular expression defining accepted MIME types, as a valid JavaScript RegExp object. For example, ##/image\/.*/## for accepting only images. By default all MIME types are allowed. |
| 40 | |maxFilesize|Maximum accepted file size, as a number. By default the maximum attachment size configured in the wiki is used. | ||
| |
1.1 | 41 | |progressAutohide|Should the progress information disappear automatically once all the uploads are completed? Defaults to ##false##. |
| 42 | |responseContainer|Where should the server response be displayed? If no container is provided, a new ##div## below the input will be created. | ||
| 43 | |responseURL|A custom URL to be used for obtaining the response after the files are uploaded. If an URL isn't provided, an existing ##xredirect## parameter in the form is going to be used. | ||
| |
3.1 | 44 | |targetURL|Where to send the files? If no URL is given, then the file is sent to the normal target of the form. |
