⬆️File upload

Basics

The file upload feature enables users to upload binary and text files, allowing for further processing of this data within QuickDEV. This data can then be sent to local or remote storage and other backends as needed.

File type

You have the option to input an array of strings to restrict the types of files that can be uploaded. By default, the file type is empty, meaning there are no predefined limitations. Each string value in the specified file type array should represent a unique file type specifier, following one of the formats below.

• Case-insensitive filename extension that begins with a period

• Valid MIME string without extension

• image/*(all types of picture files)

• audio/* (all types of audio files)

• video/* (all types of video files)

For instance, if the file type includes [".pdf", ".mp4", "image/*"], you're able to upload PDFs, MP4s, and any format of image files.

Upload type

You can decide whether to upload a single file, multiple files, or a directory.

Configure the File Upload to accept individual, multiple Files or whole Folders

Display uploaded files

Toggle the option to display or hide the list of uploaded files by enabling or disabling "Show upload list." You can also adjust this setting using JavaScript code. By default, it's set to "true."

The upload list organizes the names of all uploaded files in chronological order. Additionally, you can access the name of each uploaded file using the property files[index].name. When hovering your mouse over a file, a 🗑️ icon will appear, allowing you to click it and delete the corresponding file.

Parse files

Enable or disable the "Parse files" option to allow QuickDEV to attempt parsing the uploaded file data structure into objects, arrays, or strings. This feature is designed for structured text data such as Excel, JSON, and CSV files, but does not work with binary data.

QuickDEV can try to parse the content of the files so you can directly access it.

Accessing the parsed outcome is possible through the property named parsedValue.

QuickDEV will attempt to parse each uploaded file, and you can then access the data of the files in the array.

// To access the structured content of an uploaded file in QuickDEV Apps: 
file1.parsedValue[0] 
// The array holds the data for each uploaded file. 
file1.parsedValue[0], file1.parsedValue[1], file1.parsedValue[2]

You can access the contents of Excel, CSV and JSON Files as JSON Data object after upload and parse

Validation

Within the validation tab, you have the option to set the parameters for file uploads, including the maximum number of files allowed, as well as the minimum and maximum size limit for individual files.

You can define the minimal and maximal size of files that can get uploaded

Max files

If the upload type is set to "Multiple" or "Directory," you can establish a maximum number of files allowed by setting Max files. Should the number of files to be uploaded surpass this limit, the most recent uploads will replace the oldest ones in the queue.

You can define the minimal and maximal size of files that can get uploaded

File size

You have the option to specify the minimum and maximum size for files to be uploaded, using units such as KB, MB, GB, or TB. By default, the unit for file size is bytes. If an uploaded file surpasses the designated limit, a global alert will be triggered.

Access uploaded files

Files uploaded using the file upload component are saved in the browser's cache memory as base64-encoded strings. To save these files in data sources, you'll need to create queries that connect to databases or APIs. The data browser in the left pane allows you to view the properties of uploaded files. You can also access property names within {{ }} or JavaScript queries using JavaScript code. Some widely utilized qualities are:

value: A list of the content of the uploaded files, encoded in base64.

// Access the File content (represented as base64) {{file1.value[0]}} 
// will return "WwogIHsKICAgICJpZCI6ICJkODE5NGI3Mi1lZGNiLTRhMW

files: A list of metadata for the uploaded files, which includes attributes like uid, name, type, size, and lastModified.

// Access the File metadata information. 
{{file1.files[0].name}} // will return "open_tickets.json" 
{{file1.files[0].type}} // will return "application/json" 
{{file1.files[0].size}} // will return "247285" (in bytes)

parsedValue: A collection of parsed data