HTML5 File Upload
Last modified by Marius Dumitru Florea on 2021/08/24
Contents
Usage
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.
<form action="/where/to/upload/the/file">
<input type="file" id="myFileInput" name="nameUsedToAccessTheFileOnTheServer" />
</form>
<input type="file" id="myFileInput" name="nameUsedToAccessTheFileOnTheServer" />
</form>
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.
var targetInput = $('myFileInput');
if(targetInput) {
new XWiki.FileUploader(targetInput, {
autoUpload: true,
progressAutohide: true
});
}
if(targetInput) {
new XWiki.FileUploader(targetInput, {
autoUpload: true,
progressAutohide: true
});
}
Configuration options
| Option | Details |
|---|---|
| autoUpload | Should the upload start as soon as the files are selected, or wait for a submit event? Defaults to true. |
| enableFileInfo | Should information (name, type, size) about each selected file be displayed? Defaults to true. |
| enableProgressInfo | Should a progress bar be displayed as each file is uploaded? Defaults to true. |
| 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. |
| maxFilesize | Maximum accepted file size, as a number. By default the maximum attachment size configured in the wiki is used. |
| progressAutohide | Should the progress information disappear automatically once all the uploads are completed? Defaults to false. |
| responseContainer | Where should the server response be displayed? If no container is provided, a new div below the input will be created. |
| 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. |
| targetURL | Where to send the files? If no URL is given, then the file is sent to the normal target of the form. |
