File Component

Estimated Reading Time:  17 minutes

Overview

The File component lets your end-user End-Users are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product. upload files, like supporting documents or scanned images. This component adds an easy-to-use file uploader element to your applications so end-users can drag and drop files into the component area or use a browse function to select a file to upload.

Here are some scenarios when you'd use a File component:

• A mortgage application where the end-user needs to upload financial documents.

• A job application where the end-user uploads their resume.

Once uploaded, files store in a data object. The data object contains the following:

• The file data is represented as a cloud storage URL A URL (uniform resource locator) is a unique identifier used to locate a resource on the internet. Also known as a web address. (submitted as Base64 Base64 is an encoding and decoding technique used to convert binary data to an ASCII (American Standard for Information Interchange) text format. or binary).

• The file type.

• The file name.

• The file size.

Uploaded files become available to view, download, or delete as needed. How end-users access the file is intentionally dependent on the end user’s OS OS (operating system) is the program that manages other application programs on your computer.:

• Desktop (Mac/Windows/Linux): The file opens in the desktop’s native file browser.

• Mobile (iOS/Android): Mobile devices typically allows the end-user to open the file using the photo library, file app, or camera app.

You'll find the File component in the Data & Event Processing group to the left of the Module Editor.

File Storage Expectations

Before using the File component, it's important to understand what's required of you when storing files on the Unqork server or when using an external file service.

Storing Files in Unqork

To store files in the Unqork servers, Creators Also known as Unqork users; anyone who is inside the Unqork platform. must set the Store Data in Database setting to (ON). Storing to the Unqork servers provides you with the following advantages:

• No extra service configuration is needed because files are submitted using Unqork Submission API APIs (application programming interfaces) are a set of protocols and definitions developers use to build and integrate application software. APIs act as the connective tissue between products and services. (application programming interface) calls.

• Before uploading to the server, the File component ensures all file extensions are correct. It rejects files with incorrect extensions before uploading to the server.

• After passing any front-end validation, Unqork scans for malware Malware is software designed to disrupt, damage, or gain access to a computer system. before uploading the file to the server.

• Files are stored in the cloud with no practical storage quota.

• Only the user who submitted the file using a Cloud Storage Delivery URL has access.

Storing Files Externally

To store files using an external file service and a Plug-In component (in other words, outside of the Unqork servers), Creators must set the Store Data in Database setting to (OFF). External file servers include Google Drive, Dropbox, and so on. Consider the following when storing using an external server:

• Creators must set up an API account with an external file service and configure the service in Services Administration.

• Creators are subject to the external file service's pricing and usage quotas.

• Creators and the external file service assume all responsibility for virus scanning. For example, see the documentation for integrating AWS S3 malware scanning in your application: https://aws.amazon.com/blogs/apn/integrating-amazon-s3-malware-scanning-into-your-application-workflow-with-cloud-storage-security/.

  NOTE  Virus scanning configuration is dependent on the external file service used.

• Permission to access the files depends on the external file service and its configuration.

How Files Are Represented in Unqork Submission Data

The File component’s submission data Also known as Record Data. Submission data consists of information saved by Unqork components. View submission data by using the angular command, or in Record Collections. is an array of objects, where each object represents a single file. How each object is represented depends on your configuration. There are two main representations:

• As a Base64 string.

• As an object stored in the cloud.

Base64 Representation

When the File component's Parse Files on Upload is set to (ON), the file’s data is encoded as a Base64 string that becomes part of the component’s submission data. On submitting to Unqork, the file’s data object updates to a cloud storage link, retrieving and resolving the Base64 string. Therefore, when retrieving the Unqork submission, the file’s submission reduces in size.

Here's an example of a single Base64 file object stored before Unqork submission:

[
    {
        "storage": "base64",
        "name": "Screenshot 2023-03-15 at 15.59.06.png",
        "url": "data:image/png;base64,<base64string>",
        "size": 16760,
        "type": "image/png",
        "data": "<base64string>"
    }
]

Here's an example of a single Base64 file object stored after Unqork submission:

[
    {
        "storage": "base64",
        "name": "Screenshot 2023-03-15 at 15.59.06.png",
        "url": "https://testx.unqork.io/fbu/files/submissionBase64/15f80f953695e1e89a83123b42dc58e8.png?signature=<uniqueSignature>",
        "size": 16747,
        "type": "image/png",
        "data": "https://testx.unqork.io/fbu/files/submissionBase64/94896b69237d0dd91a9f58c5e5d54202.png?signature=<uniqueSignature>",
        "imageSrc": "https://testx.unqork.io/fbu/files/submissionBase64/15f80f953695e1e89a83123b42dc58e8.png?signature=<uniqueSignature>"
    }
]

NOTE  Unless you need to read or display file data in your UI (for example, read data from an XLSX/CSV file or render a thumbnail preview), it is recommended that you avoid storing files as Base64 strings. Base64 is an inefficient way to encode file data and causes a 33% increase in the original file size—and even more for smaller files.

Cloud Storage

When Parse Files on Upload is set to (OFF), the file’s data object becomes a reference, with the file stored in the cloud the moment an Unqork submission is created.

Here's an example of a single file object stored before Unqork submission:

[
    {
        "storage": "cloud",
        "name": "Screenshot 2023-03-15 at 15.13.08.png",
        "id": "c83ffe8b-6e90-4920-8e37-44a46f21cf42",
        "size": 235157,
        "type": "image/png"
    }
]

Here's an example of a single file object stored after Unqork submission:

[
    {
        "storage": "cloud",
        "name": "Screenshot 2023-03-16 at 14.23.25.png",
        "id": "edd77456-fb52-4664-a2c0-5442fab7c7b7",
        "size": 793223,
        "type": "image/png",
        "data": "https://testx.unqork.io/fbu/files/submissionBase64/c79910d684253c282910315221269d9d.png?signature=<uniqueSignature>"
    }
]

File Size Limits

The accepted file size limit depends on the configuration and where you store the file. File size limits are not dependent on the device (desktop/mobile, Windows/Mac, iOS/Android). File size limits are enforced regardless of the value entered in the Set Maximum Size field.

NOTE  Any file-related or API request lasting longer than five minutes is not supported and will fail.

If storing the files in Unqork (setting Store Data in Database to (ON)), the file size limit depends on the Parse Files on Upload setting:

• When Parse Files on Upload is set to (ON), the file size limit is approximately 18 MB (the entire submission payload). The limit decreases if the Unqork submission contains other component data.

NOTE  

Using the contents Output Type in a Plug-In component to retrieve the base64 of a file has a limit of 10MB. To retrieve a file as base64, consider using the resolveBase64 option or two Plug-In components with the following settings:

1.

Plug-In One: A GET request with Expect binary response set to (ON).

2.

Plug-In Two: A POST request.

• When Parse Files on Upload is set to (OFF), the file size limit is 100 MB per file.

If storing the files externally (setting Store Data in Database to (OFF)), the file size limit depends on the Plug-In component's multipart request limit:

• When submitting a file to an external file service using a Plug-In component, the file size limit is 500 MB per file.

File Component Limitations

The following are important limitations of the File component:

• The File component is not a media player or media renderer. It does not support viewing or playing the files it accepts. The only exception is the Display Thumbnail Images of Icons setting.

• The File component is not supported inside the following components:

What You'll Learn

After completing this article, you’ll know when to use a File component, how to configure its settings, and how to use it in a module.

About the Configuration Window

General

Display Panel

(click image to expand)

Actions Panel

(click image to expand)

Triggers

Data Panel

(click image to expand)

Validation Panel

(click image to expand)

Advanced Panel

(click image to expand)

Adding a File Component

As an example, let's create a basic File component configuration. This component will prompt the end-user to upload a PDF version of their resume.

1.

In the Module Editor, drag and drop a File component onto the canvas.

4.

From the File component's configuration menu, click Validation.

5.

Set Required to (ON).

6.

From the File component's configuration menu, click Advanced.

The File component looks like the following in Express View Express View is how your end-user views you application. Express View also lets you preview your applications to test your configuration and view the styling. After configuring a module, click Preview in the Module Editor to interact with the module in Express View:

Data Structure of a File Component

The File component's data stores in submission data Also known as Record Data. Submission data consists of information saved by Unqork components. View submission data by using the angular command, or in Record Collections. as an array of objects. In the example below, the fileResume File component displays the uploaded content in a table. Opening an object in the array displays a set of key/value pairs containing information about the file.

Resources

• Modify the File component using the toolbar settings.

• File Storage Component

• Plug-In Component

• Submission Data