Extension:VisualData/File upload
File upload
VisualData allows to create a completely customized multiple upload form/widget, accessible both from the tab "Edit data" or added to articles through the "VisualDataForm" template /visualdataform
parser function.
In order to create a customized multiple upload widget with a caption field for each uploaded file, follow these steps.
1) Create a schema "Files upload" (or whatever other name) through the Schema builder.
2) Create a subitem (as in picture below) in order to create multiple items of a pair of input widgets (the file upload itself, and the caption field)
File:VisualDataScreenCapture-visualbuilder-subitem.png
3) Set it as multiple and define the name and title of the Container schema (a container schema is the parent container of type "array" in case of multiple items). Then create a field "file" with preferred input "OO.ui.SelectFileWidget" and a field "caption" with default input widget (OO.ui.TextInputWidget)
4) The "OO.ui.SelectFileWidget" can be further customized through the edit button besides it (dialog "Define field"). Through the related dialog is possible to apply most of the native OO.ui.SelectFileInputWidget's settings, like accept
, droppable
, showDropTarget
, icon
, and more.
File:Pageproperties-screencapture-form-file-upload-b.png
This is the resulting form:
File:VisualDataScreenCapture-upload-form-b.png
This is how the select file input appears after selection: the filename can be edited also before form submission [1]:
File:VisualDataScreenCapture-upload-form-field.png
Additionally, thanks to the field's option value formula
it is possible to interpolate the filename, using wikitext, before that the file is saved on the wiki, for instance adding a counter or a dynamic prefix: this is useful for instance to add a prefix to the file in order to "bound" it to a given article. See here for a complete overview and a demo about this.
Here is the json-data associated to the wiki article based on form submission, with values of uploaded files and captions. (Pre-transformed values are also stored to avoid recursive transformation when the value formula is used)
File:Pageproperties-screencapture-form-file-upload-d.png
See also
- Wikisphere's Page upload
- New article UI
- Schema Builder
- File upload
- Edit data
- Forms
- Geolocation
- Queries
- Queries in forms
- Result formats
- Browse data
- Maintenance scripts
- Dynamic catalogue
- ↑ Technically VisualData's file upload works first stashing the file through Ajax, and then publishing it on form submission. As a reference, Extension:VisualEditor both stashes and publishes the uploaded file through Ajax in two different steps, and other extensions upload and publish the file in one step before the form submission. (limiting room for post-processing operations)