(13 intermediate revisions by 4 users not shown)
Line 10: Line 10:
 
_input type="file"
 
_input type="file"
  
'''target'''* : Name of the File Upload Wiki Page
+
'''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
Line 22: Line 22:
 
'''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
 
'''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
+
'''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.
 
'''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
 
'''*'''= 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.
 
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.
===Examples===
 
==== Example 1 ====
 
<syntaxhighlight lang="html">
 
<_input type="file" id="file-upload" target="pictures-[filename]-[mwrandom]" pagecontent="Information of the test file" error_id="div-error" verbose_id="div-verbose" />
 
</syntaxhighlight>
 
  
==== Example 2 ====
+
=== HTMLtoImage ===
Always make sure an image will be transformed to jpeg.
+
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.''
  
Allow for multiple file upload.
+
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.
  
Add form text field "description" on the files page content.
+
A FlexForm to utilize this would look something like this :
 
<syntaxhighlight lang="html">
 
<syntaxhighlight lang="html">
<_form action="addToWiki" enctype="multipart/form-data" >
+
<div id="content-to-convert" style="width:500px">
<_input type="file" id="file-upload" multiple="multiple" parsecontent target="pictures-[filename]-[mwrandom]" pagecontent="Information for this image: [description]" force="jpg" />
+
  <h1>Test Screenshot</h1>
  <_input type="text" name="description" />
+
  <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" />
 
   <_input type="submit" value="upload" />
 
</_form>
 
</_form>
 
</syntaxhighlight>
 
</syntaxhighlight>
  
==== Example 3 ====
+
'''You cannot use both file uploads in one form.'''
Store a template to the pagecontent. You can use this if you want the filepage to have structured content or if you want to store structured data with an extension like SMW.<syntaxhighlight lang="html">
 
<_form action="addToWiki" enctype="multipart/form-data" >
 
{{#tag:_input ||type=file |id=file-upload |target=picture-[mwrandom] |parsecontent=true |pagecontent=<nowiki>{{Uploaded file
 
|Uploaded from page=</nowiki>{{FULLPAGENAME}}<nowiki>
 
|Uploaded by=</nowiki>{{CURRENTLOGGEDUSER}}<nowiki>
 
|Comment=[Comment]
 
}}</nowiki>
 
}}
 
<_input type="text" name="Comment" placeholder="Comment" />
 
<_input type="submit" value="upload" />
 
</_form>
 
 
 
</syntaxhighlight>
 
  
 
===Note===
 
===Note===
ws-class-props
Line 1: Line 1:
 
+
{{Doc properties
 +
|Doc subject=DevOps:Doc/FlexForm
 +
|Subject version=1.0,1.1
 +
|Doc parent=DevOps:Doc/FlexForm/1.0/input
 +
|Doc sort order=110
 +
|Doc target group=User
 +
|Doc synopsis=Using file uploads
 +
}}
ws-page-props
Line 1: Line 1:
{{Doc properties
+
 
|Doc subject=DevOps:Doc/FlexForm
 
|Doc parent=DevOps:Doc/FlexForm/1.0.0/input
 
|Doc sort order=110
 
|Doc target group=User
 
|Subject version=1.0.0
 
}}
 

Latest revision as of 14:54, 22 September 2022

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 :

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

You cannot use both file uploads in one form.

Note

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

Links