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

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>

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
  });
}

html5uploads.png

Configuration options

OptionDetails
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.
Tags:
Created by Vincent Massol on 2017/09/04
   

Get Connected