HTML5 File Upload

Last modified by Marius Dumitru Florea on 2021/08/24

This is a Javascript widget bundled by default with the XWiki platform since version 4.2-milestone-3 (XWIKI-8132).


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" />

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


Configuration options

autoUploadShould the upload start as soon as the files are selected, or wait for a submit event? Defaults to true.
enableFileInfoShould information (name, type, size) about each selected file be displayed? Defaults to true.
enableProgressInfoShould a progress bar be displayed as each file is uploaded? Defaults to true.
fileFilterRegular 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.
maxFilesizeMaximum accepted file size, as a number. By default the maximum attachment size configured in the wiki is used.
progressAutohideShould the progress information disappear automatically once all the uploads are completed? Defaults to false.
responseContainerWhere should the server response be displayed? If no container is provided, a new div below the input will be created.
responseURLA 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.
targetURLWhere to send the files? If no URL is given, then the file is sent to the normal target of the form.

Get Connected