Wiki source code of HTML5 File Upload
Last modified by Raphaël Jakse on 2025/10/01 10:43
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 | |||
 |
7.1 | 13 | {{code language="none"}} |
| 14 | {{velocity}} | ||
| 15 | $xwiki.jsfx.use('uicomponents/widgets/upload.js', {'forceSkinAction': true, 'language': ${xcontext.locale}}) | ||
| 16 | $xwiki.ssfx.use('uicomponents/widgets/upload.css', true) | ||
| 17 | {{/velocity}} | ||
| 18 | {{/code}} | ||
| 19 | |||
 |
4.1 | 20 | {{code language="html"}} |
| 21 | <form action="/where/to/upload/the/file"> | ||
| 22 | <input type="file" id="myFileInput" name="nameUsedToAccessTheFileOnTheServer" /> | ||
| 23 | </form> | ||
| 24 | {{/code}} | ||
| 25 | |||
| |
7.1 | 26 | 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. In a Javascript extension: |
| |
1.1 | 27 | |
| |
4.1 | 28 | {{code language="js"}} |
| 29 | var targetInput = $('myFileInput'); | ||
| |
1.1 | 30 | if(targetInput) { |
| 31 | new XWiki.FileUploader(targetInput, { | ||
| 32 | autoUpload: true, | ||
| 33 | progressAutohide: true | ||
| 34 | }); | ||
| 35 | } | ||
| 36 | {{/code}} | ||
| 37 | |||
| 38 | [[image:html5uploads.png||class="screenshot"]] | ||
| 39 | |||
| |
2.3 | 40 | == Configuration options == |
| |
1.1 | 41 | |
| 42 | |=Option|=Details | ||
| |
3.1 | 43 | |autoUpload|Should the upload start as soon as the files are selected, or wait for a submit event? Defaults to ##true##. |
| |
1.1 | 44 | |enableFileInfo|Should information (name, type, size) about each selected file be displayed? Defaults to ##true##. |
| 45 | |enableProgressInfo|Should a progress bar be displayed as each file is uploaded? Defaults to ##true##. | ||
| |
3.1 | 46 | |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. |
| 47 | |maxFilesize|Maximum accepted file size, as a number. By default the maximum attachment size configured in the wiki is used. | ||
| |
1.1 | 48 | |progressAutohide|Should the progress information disappear automatically once all the uploads are completed? Defaults to ##false##. |
| 49 | |responseContainer|Where should the server response be displayed? If no container is provided, a new ##div## below the input will be created. | ||
| 50 | |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 | 51 | |targetURL|Where to send the files? If no URL is given, then the file is sent to the normal target of the form. |
