Video File Upload

Introduction

The Video File Upload allows users to attach a video file directly to a form.

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

Plugin information

Plugins Available in the Bundle:

• Video File Upload Plugin

This plugin bundle is compatible with Joget DX 8 and onwards.

Get started

Where to get the plugin

You can download this plugin from the Joget Marketplace.

How to install

1. Log in and click Download on this plugin screen. A .jar file is downloaded.
   
2. Go to your Joget localhost or server. In the Joget Console, go to Admin Bar > Systems Settings > Manage Plugins and click the Upload Plugins button.
   
3. Under Upload Plugin, select the plugin .jar file you downloaded and click Upload.
   
4. You can now view your new plugin in your Form Builder.
5. Remember to uninstall the old plugin before uploading a new version.
6. The Joget Knowledge Base has more information on managing and developing plugins.

How to use it

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

1. Start the Joget Server and open the App Center.
2. Log in as admin and click on the Admin Bar > pencil icon on the Expenses Claim app to open its App Composer.
   
3. In the Form Builder, create a new form named Video Player Form with the following details:
   
4. Drag a Video File Upload Element under Custom into the canvas from the Palette.
   
5. Click on it to view its Properties on the right.
   
6. Click Apply Change > Save to save the changes.
7. Click on Generate App, then check the box labeled Generate CRUD, and then click Generate.
   
8. Return to the App Composer and Launch the App from the UI Builder.
   
9. Click Manage Video Player Form > New.
   
10. You may upload a video file by dragging a video file into the upload area and clicking Save.
    
11. You may view the uploaded video file by clicking Edit on the record.
    

Configure Video File Upload Properties

Configure Video File Upload

Fields to configure:

• Label: Element 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 the list of reserved IDs.

Advanced Options

Data

Fields to configure:

• Validator: Attach a Validator plugin to validate the input value.
  • When will validation take place?
    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 represents 10,240 kilobytes.
• Error Message (File size limit exceeded): Error Message when the submitted file size exceeds.
• File Type (.mp4): Accepted file type extension(s). (Semicolon-separated values)
  • Example: .mp4
• Error Message (File type mismatch): This error appears when the submitted file type does not match the allowed formats.
• Delete Actual File During Overwrite or Removal?: The actual file will be deleted when it is either removed or overwritten.

Image Resize

Fields to configure:

• Maximum Width (px): If set, images will be resized to these dimensions before being uploaded.
  • Note
    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.
  • Note
    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
  • Note
    By default, it will be set to contain.

Permission

Fields to configure:

• Permission: Manage who can access the file uploaded. Read more at Permission Control.
  • Available options:
    • Logged In Users
    • Public
    • Custom

UI

Fields to configure:

• Size: Specifies 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
  • Example
    50px
  • Example
    5%
• Download as Attachment: Determines the download behaviour.

Configuration

Fields to configure:

• Current Window:
  • The video player will be displayed in the same window as the form.
    
• Popup Window:
  • The uploaded video will be displayed as a link, and the video player will be displayed as a pop-up window.
    
  • You can have multiple video file uploads within a single form, each with different configurations such as Popup Window and Current Window.
    

Expected Outcome

After uploading the video file, you can view it by clicking the Edit button from the list.

Download plugin 

Download the plugin from the Joget Marketplace.

Download Sample App