Introduction

Video File Upload enables you to attach a video file to a form.

Video File uploaded through the Video File Upload is stored under "[Joget Installation Directory]/wflow/app_formuploads".

There are 2 ways you can change the wflow folder path:
1. By adding "-Dwflow.home=PATH" to your JAVA_OPTS when starting tomcat.
2. By setting the "Uploaded File Storage Base Path" option in General Settings.

Get Started

The easiest way to see how the Video File Upload works are to use the existing built-in App Expenses Claims. Here are the steps:

  1. Start the Joget Server and open the App Center.

  2. Log in as admin and click on the pencil icon on the Expenses Claim to open the App Composer (see Figure 1).



    Figure 1

  3. In the App Composer, create a new form named Video Player Form like so:



    Figure 2

  4. Click on Video Player Form and you will be directed to the Form Builder. 

  5. Hover the mouse over the Video File Upload element on the canvas entitled Video File Upload and click it to open up the Configure Video File Upload properties (see Figure 3).



    Figure 3

  6. Remember to click Apply Change and Save the changes. 
  7. To see it working, Generate a CRUD and Launch the UI using Click here option (see Figure 4) 

     

    Figure 4

  8. Click on the Manage Video Player Form option and click on New button and create a form (see Figure 5).

              

    Figure 5

  9. Here you will find the video file upload. Click inside the box to upload or drag and drop files inside the box.

Video File Upload Properties

Edit Video File Upload

         

           Figure 6


NameDescription
LabelElement Label to be displayed to the end-user.
ID

Element ID (By declaring as "video", a corresponding database table column "c_receipt" will be created)

Please see Form Element for more information about defining the ID and list of reserved IDs.


Advanced Options

Data

 Figure 7

Name

Description

Validator

Attach a Validator plugin to validate the input value.

Validation will take place whenever a form is submitted except when it is submitted as "Save as Draft".

Maximum File Size (KB)

Maximum File Size (KB) in Integer. For example, if the maximum allowable file size is 10 megabytes, enter into this field the value of "10240" which represent 10,240 kilobytes.

Error Message (File size limit exceeded)

Error Message when file size exceeded.

File Type (.mp4)

Accepted file type extension(s). (Semicolon separated values)

.mp4

Error Message (File type mismatch)

Error Message when file type mismatched.

Delete actual file during overwrite or remove?

Actual file will be deleted when the file is removed or being overwritten.


Image Resize



Figure 8

Name

Description
Maximum Width (px)

If set, images will be resized to these dimensions before being uploaded.

If only one, Maximum Width (px) or Maximum Height (px), the original aspect ratio of the file will be preserved.

Maximum Height (px)

If set, images will be resized to these dimensions before being uploaded.

If only one, Maximum Width (px) or Maximum Height (px), the original aspect ratio of the file will be preserved.

Quality (Max 1.0)set the quality of the resized image.
Method

sets how the images should be scaled down in case both Maximum Width (px) and Maximum Height (px) are provided.

There are only two methods:

  • Contain
  • Crop 

By default, it will set to contain.

Permission


 Figure 9

NameDescription
Permission

Manage on who is able to access the file uploaded. Read more at Permission Control.

Available options:

  • Logged In Users
  • Public
  • Custom

UI

 Figure 10

NameDescription
SizeSpecifies the width, in characters, of an <input> element.

Allowed multiple files upload?

When checked, multiple files can be uploaded.
Readonly

Determines if one can upload a file.

Drop zone padding

Determine the extra size of padding for the larger drop zone.

50px

5%

Download as Attachment

Determines the download behaviour.


Configuration

You can determine how you would like to upload and view the video by modifying the configuration (see Figure 11)

 Figure 11


  1. If you upload a video as Current Window, the video Player will be in the same window in the form (see Figure 12).


     Figure 12

  2. If you select the Configuration as Popup Window, the video will be uploaded as a link and the video Player will be displayed as a pop up window (see Figure 14). 



    Figure 13



    Figure 14

  3. You can also have multiple video file uploads within a single form(see Figure 15)


             
     Figure 15

  4. You can have multiple video file uploads in a single form with different configurations, Popup Window and Current Window (see Figure 16)



    Figure 16