Wiki source code of HTML5 File Upload
Last modified by Raphaël Jakse on 2025/10/01 10:43
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 1 | {{box cssClass="floatinginfobox" title="**Contents**"}} | ||
| 2 | {{toc/}} | ||
| 3 | {{/box}} | ||
| 4 | |||
| 5 | {{info}} | ||
| 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]]). | ||
| 7 | {{/info}} | ||
| 8 | |||
| 9 | = Usage = | ||
| 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 | |||
| 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 | |||
| 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 | |||
| 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: | ||
| 27 | |||
| 28 | {{code language="js"}} | ||
| 29 | var targetInput = $('myFileInput'); | ||
| 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 | |||
| 40 | == Configuration options == | ||
| 41 | |||
| 42 | |=Option|=Details | ||
| 43 | |autoUpload|Should the upload start as soon as the files are selected, or wait for a submit event? Defaults to ##true##. | ||
| 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##. | ||
| 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. | ||
| 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. | ||
| 51 | |targetURL|Where to send the files? If no URL is given, then the file is sent to the normal target of the form. |
