]> 2026-04-30T18:38:35+02:00 input/file 50000 en Doc 110 Using file uploads User input/file (2.1,2.5) 2.1 2.5 input/file 2023-02-13T21:41:20Z 2459989.4037037 input/file 2026-03-27T08:59:21Z 2461126.8745486 Doc/FlexForm/2.1/input/file 389 https://wikibase-solutions.com/developer-logs/flexform-multiple-file-upload https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/enctype https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file https://pandoc.org/ https://www.open-csp.org/DevOps:Doc/FlexForm/1.0/input/file https://www.open-csp.org/DevOps:Doc/FlexForm/1.0/Form_options https://pandoc.org/lua-filters.html DevOps:Doc/FlexForm/2.0/Installation of FlexForm Name file Type input Synopsis Using file uploads Description Use a form to upload one or multiple files. Parameters input type="file" target * : Name of the File page to be created id * : This must always be unique, that is, it can only occur once on a page. Do not include a hyphen ("-"), underscore ("_"), or any special characters (also no spaces). action * : defaults to upload . Read more below on using this to convert docx documents to pages in the wiki. name * : As with any input field, a name is mandatory pagecontent : Text content to be added on the File Page. If you are using convertfrom then any images uploading during the convert will get the pagecontent. comment : Text to show in recent changes or contributions list force : Force images to a certain format (png, jpg or gif). When using this option, any file uploaded that is not supported will be uploaded as is. error_id : Id of a DOM Element where error notices will be shown verbose_id : Id of a DOM element where information about the file is shown use_label : Doesn't require a value. When an input field has a label attached to it, then the label will become the upload button and the input field will be hidden dropzone : Doesn't require a value. Will turn the verbose div into an additional file drop zone. If you also use_label , then the label will become the dropzone. parsecontent : Will force FlexForm to insert values from other form fields inside the pagecontent field. Use square brackets, like [fieldname], where values should be inserted. template  : If you want to store a template call inside the content of the File page, you can template=<name of your template> in combination with parsecontent . [flexform-template] inside your content field will be replaced by {{<name of your template and [/flexform-template] will be replaced by }} . See example 3 on the examples page. multiple = multiple * = a required variable The target is basically the name you want to use to store the file or files. It recognizes [mwrandom] , [filename] and other form fields, by using their name with square brackets around them (see example). pagecontent can also hold form variables. action="convertfrom:????" Pandoc The action argument defaults to upload . If you use action="convertfrom:????" and you have Pandoc installed on your system, FlexForm will convert a document and create it as a page in the Wiki. target will then be used as a Page Title. Depending on your version of Pandoc, the results might differ. convertfrom allows all Pandoc to MediaWiki text conversions. docx would be a good example : action="convertfrom:docx". Any images uploaded during the convert can have their content of their filepages be filled using pagecontent . Since version 2.2.9 you can also add an argument slot="<name of slot>" to have the converted Document be save to a specific slot on the target page, instead of the main slot. Keep in mind, MediaWiki slots need to be defined in your LocalSettings. Since version 2.7.0 you have two new arguments when using Pandoc conversion : pandoc_prefix and pandoc_suffix . As your converted (word) document will become a Wiki page, you might want to add some text before or after the converted content ( e.g. a template ). pandoc_prefix will add content at the top of the converted page and pandoc_suffix will add it to the end of the converted document. Since version 2.8.0 There is now also a convertto option. You now also need to define in local settings what convertfrom is allowed and what convertto is allowed. See DevOps:Doc/FlexForm/2.0/Installation of FlexForm. There two new options for Pandoc conversion : uploadoriginalas and additional-arguments. uploadoriginalas  : added by using a pipe e.g. |uploadoriginalas: This will allow the original document to also be uploaded into the wiki, besides it also having a converted version. After the ":" you type the name for the to be uploaded file. You can use [filename] to have it uploaded by its original filename. You can also use [target], it will then upload it using the same name as the converted document. additional-argumen t : Lets you use additional Pandoc argument when converting. See the Pandoc documentation. You also have to define what additional arguments are allowed in the local settings. [path] inside additional-argument will be replace with the Wiki installation path. Local Settings example : $wgFlexFormConfig['pandoc-convert-to'][] = 'mediawiki'; $wgFlexFormConfig['pandoc-convert-to'][] = 'html'; $wgFlexFormConfig['pandoc-convert-from'][] = 'docx'; $wgFlexFormConfig['pandoc-convert-from'][] = 'ppt'; $wgFlexFormConfig['pandoc-allow-additional-arguments'][] = 'lua-filter'; FlexForm convert example (using Pandoc Lua filter ) : < input type = "file" id = "docxUpload" name = "docx" target = "File:[filename].docx" pagecontent = "" required = "required" action = "convertfrom:docx|uploadoriginalas:[target]|convertto:mediawiki|additional-arguments:lua-filter=[path]fix-headings.lua" /> Excel ( since version 2.2.9 ) You can also use action="convertfrom:xls" or action="convertfrom:xlsx" . This allows for converting an Excel xls or xlsx file to JSON. Images are not supported. The argument slot is supported. This conversion is not done using Pandoc and thus will work without having Pandoc installed . (just make sure you run composer update after you update FlexForm). As off v2.4.0 the Excel convert action has two extra parameters that allow you to choose an Excel Sheet name, if the Excel document has multiple sheets. sheet_by_id and sheet_by_name . If you do not use them, it will work as sheet_by_id="0" (making it backwards compatible). If you use both arguments, then sheet_by_name will get the priority. An excel document like this : options description HitCounter WSStats More $wgDisableCounters automatically show hitcounts on a page and Special page yes no WSStats allows for adding this to a page using parser function $wgHitcounterUpdateFreq frequency of counters update yes no WSStats uses MW DB abstraction layer to update hitcount. The approach is different skip_user_groups Skip certain user groups in counting no yes count_all_usergroups Count pages independend of a user group no yes Will result in the following JSON: [ { "options" : "$wgDisableCounters" , "description" : "automatically show hitcounts on a page and Special page" , "HitCounter" : "yes" , "WSStats" : "no" , "More" : "WSStats allows for adding this to a page using parser function" }, { "options" : "$wgHitcounterUpdateFreq" , "description" : "frequency of counters update" , "HitCounter" : "yes" , "WSStats" : "no" , "More" : "WSStats uses MW DB abstraction layer to update hitcount. The approach is different" }, { "options" : "skip_user_groups" , "description" : "Skip certain user groups in counting" , "HitCounter" : "no" , "WSStats" : "yes" }, { "options" : "count_all_usergroups" , "description" : "Count pages independend of a user group" , "HitCounter" : "no" , "WSStats" : "yes" } ] HTMLtoImage You can also use the field input to upload an image created from part of the page shown where the form is rendered. Basically, you tell FlexForm you want to render a part of your screen as an image and upload it to the wiki. The syntax is the same as above, but it only needs : target, name and pagecontent. The other arguments are ignored. Additionally it needs an argument called presentor="canvas" and it needs the ID of the element you want to convert to an image: canvas_source_id . By default the image will always be a .jpg file. We plan to support png if this is requested. For example you have a DIV element with id="content-to-convert". Within this DIV you have content you want to convert to an image an upload to the Wiki. A FlexForm to utilize this would look something like this : < div id = "content-to-convert" style = "width:500px" > < h1 > Test Screenshot </ h1 > < p > Lots of other content here </ p > </ div > < form > < input type = "file" presentor = "canvas" id = "canvasUpload" target = "testCanvasFile.jpg" pagecontent = "testing" canvas_source_id = "content-to-convert" /> < input type = "submit" value = "upload" /> </ form > You cannot use both file uploads in one form. Note An input type="file" always needs a unique ID! ( do not use "-", "_", any special characters ( also no spaces ) ). A form that needs to upload files needs this argument : enctype="multipart/form-data" . The argument needs to be added to the Form tag, not the input tag. See also : https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/enctype As FlexForm first handles File Upload, it will add the files processed to use in an _edit or a _create. Every file upload field needs a name attribute and once a file has been uploaded you can use them in an edit or create in the following format : FFUploadedFile-UploadName- <name attribute of input field>  : Will hold the original file name uploaded FFUploadedFile-UploadBase- <name attribute of input field>  : Will hold the original file name uploaded without the extension FFUploadedFile-NewName- <name attribute of input field>  : Will hold the name of the file as it is uploaded into the Wiki ( Without the File: prefix ) If you use a multiple file upload, then the above values will all be , separated. Links Tutorial Link to a quick tutorial video shows you how to use one FlexForm form to : upload multiple files. Docs : input file documentation add a template to the source of the file pages. Docs : input file documentation have form input fields be added to the arguments for the template. Docs : input file documentation show a success message after upload. Docs : form options add a comment line to your upload visible in the Contributions list and recent changes. Docs : form options use a dropzone to drag and drop files. Docs : input file documentation align form fields using a MW table. Docs : MediaWiki tables add current date using Magic Words. Docs : MediaWiki magic words Other links https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/enctype https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file https://pandoc.org/ 50000 0 plainlist 1 [[:DevOps:Doc/FlexForm/2.1/input/file]] Doc/FlexForm/2.1/input/file# QUERY6063d8dd43d4ed9dd27cdc3fb81d7598 examples 50000 en Doc/FlexForm/2.1/input/file/examples Doc parent 102 en Doc parent