DevOps:Doc/FlexForm/2.0/input/file - Revision history

Maintenance script: Imported by PageSync

2025-07-15T08:33:57Z

Imported by PageSync

ws-class-props
← Older revision		Revision as of 10:33, 15 July 2025
Line 1:		Line 1:
	{{~~Doc~~ properties		{{Csp class properties
	\|Subject version=2.0		\|Subject version=2.0
	\|Doc subject=DevOps:Doc/FlexForm		\|Doc subject=DevOps:Doc/FlexForm

Charlot at 20:45, 1 February 2023

2023-02-01T20:45:40Z

← Older revision		Revision as of 22:45, 1 February 2023
Line 12:		Line 12:
	'''target'''* : Name of the File page to be created		'''target'''* : Name of the File page to be created

	'''pagecontent ''': Text content to be added on the File Page		'''pagecontent''': Text content to be added on the File Page

			'''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.		'''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.

Charlot at 20:56, 13 December 2022

2022-12-13T20:56:20Z

← Older revision		Revision as of 22:56, 13 December 2022
Line 2:		Line 2:
	file		file
	===Type===		===Type===
	~~_input~~		input
	===Synopsis===		===Synopsis===
	Using file uploads		Using file uploads
Line 8:		Line 8:
	Use a form to upload one or multiple files.		Use a form to upload one or multiple files.
	===Parameters===		===Parameters===
	~~_input~~ type="file"		input type="file"

	'''target'''* : Name of the File page to be created		'''target'''* : Name of the File page to be created
Line 50:		Line 50:
	</div>		</div>

	<~~_form~~ action="addToWiki" >		<form action="addToWiki" >
	<~~_input~~ type="file" presentor="canvas" id="canvasUpload" target="testCanvasFile.jpg" pagecontent="testing" canvas_source_id="content-to-convert" />		<input type="file" presentor="canvas" id="canvasUpload" target="testCanvasFile.jpg" pagecontent="testing" canvas_source_id="content-to-convert" />
	<~~_input~~ type="submit" value="upload" />		<input type="submit" value="upload" />
	</~~_form~~>		</form>
	</syntaxhighlight>		</syntaxhighlight>

Line 59:		Line 59:

	===Note===		===Note===
	A '''~~_input~~ type="file"''' always needs a unique ID!		A '''input type="file"''' always needs a unique ID!

	===Links===		===Links===

Charlot: User:Charlot

2022-12-13T20:55:30Z

User:Charlot

ws-class-props
← Older revision		Revision as of 22:55, 13 December 2022
Line 5:		Line 5:
	\|Doc sort order=110		\|Doc sort order=110
	\|Doc target group=User		\|Doc target group=User
			\|Doc synopsis=Using file uploads
	}}		}}

Charlot: User:Charlot

2022-12-13T20:55:16Z

User:Charlot

New page

===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

'''pagecontent ''': Text content to be added on the File Page

'''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.

'''*'''= 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.

=== 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 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 :
<syntaxhighlight lang="html">
<div id="content-to-convert" style="width:500px">
<h1>Test Screenshot</h1>
<p>Lots of other content here</p>
</div>

<_form action="addToWiki" >
<_input type="file" presentor="canvas" id="canvasUpload" target="testCanvasFile.jpg" pagecontent="testing" canvas_source_id="content-to-convert" />
<_input type="submit" value="upload" />
</_form>
</syntaxhighlight>

'''You cannot use both file uploads in one form.'''

===Note===
A '''_input type="file"''' always needs a unique ID!

===Links===