Extension:VisualData/File upload
File upload edit
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)
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.
This is the resulting form:
This is how the select file input appears after selection: the filename can be edited also before form submission [1]:
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)
See also edit
- 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)