PocketBlocks Docs
English
English
  • Overview
  • Installation
  • Build apps
    • Create a new app
    • App editor
    • Event handlers
    • Write JavaScript
      • Write JavaScript in {{ }}
      • JavaScript query
      • Transformers
      • Temporary state
      • Data responder
      • Built-in JavaScript functions
      • Use third-party libraries
    • Component guides
      • Option lists
      • List View
      • Drawer
      • Image
      • Charts and graphs
      • File upload
      • Custom component
      • Use Markdown
    • Module
    • Design app UI
      • Style, theme, and usability
      • Design an efficient and user-friendly form
    • Navigation
    • Keyboard shortcuts
    • Version and release management
  • Build plugins
    • Develop UI component plugins
  • Workspace management
    • Authentication
    • Members and groups
    • Permissions for resources
    • Custom branding
  • Miscellaneous
    • Where are the Data Sources/Query Library?
    • Embedding Apps
Powered by GitBook
On this page
  • Basics
  • File type
  • Upload type
  • Display uploaded files
  • Parse files
  • Validation
  • Max files
  • File size
  • Access uploaded files
  1. Build apps
  2. Component guides

File upload

PreviousCharts and graphsNextCustom component

Last updated 11 months ago

Basics

You can customize the properties of the file upload components in the right panel, such as the displayed text, file types, upload type.

File type

  • A valid case-insensitive filename extension, starting with a period character ("."), such as .png, .txt, and .pdf.

  • String audio/* indicating "any audio file".

  • String video/* indicating "any video file".

  • String image/* indicating "any image file".

For example, when the value of file type is [".pdf", ".mp4", "image/*"], you can upload PDF files, MP4 files, and any type of image files.

Upload type

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

Display uploaded files

Switch on or off Show upload list to display or hide the list of the uploaded files. You can also set this property via JS code. By default, its value is "true".

The upload list presents the file names of all uploaded files in chronological order. You can also access the name of the uploaded files via the property files[index].name. When hovering your mouse over a file, the 🗑️ icon appears and you can click it to delete the corresponding file.

Parse files

Toggle Parse files and PocketBlocks will try to parse the uploaded file data structure into objects, arrays, or strings. You can access the parsed result via the property parsedValue. PocketBlocks supports parsing Excel, JSON, and CSV files. The parsing result of other types of files is null.

Validation

Under the validation tab, you can configure how many files are allowed to be uploaded, as well as the minimum and maximum size of a single file to be uploaded.

Max files

When the upload type is "Multiple" or "Directory", you can set Max files to limit the maximum number of files to upload. If the number of files to be uploaded exceeds this threshold, the latest uploaded files will replace the oldest ones.

File size

You can set the minimum and maximum size of the files to upload, using KB, MB, GB, or TB units. The default unit for file size is byte.When the size of the uploaded file exceeds the limit, you will see a global alert.

Access uploaded files

Files uploaded via the file upload component are stored in browser cache memory in base64-encoded string format. To store these files in data sources, you need to build queries to connect to databases or APIs.You can view the properties of the uploaded files in the data browser in the left pane, or access property names in {{}} or JS queries via JS code. Commonly used properties are as follows.

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

  • files: A list of metadata of the uploaded files, including uid, name, type, size, and lastModified.

  • parsedValue: A list of the value of the parsed files.

You can input an array of strings to restrict the types of the files to be uploaded. The default value of file type is empty, meaning that no limitation is pre-defined. Each string value in a specified file type array should be a in one of the following formats.

A valid string in without an extension.

unique file type specifier
MIME format