Appsmith
GithubDiscordAppsmith CloudCommunity Forum
Search…
v1.3
Introduction
Setup Appsmith
Tutorials
Sample Apps
Templates
How To Guides
Debugging Errors
FAQs
Telemetry
Security
Core Concepts
Connecting to Data Sources
Displaying Data (Read)
Capturing Data (Write)
Writing Code
Designing an Application
Building Dynamic UI
Access Control
Git Sync
JSON Web Tokens (JWT)
Datasource Reference
Amazon / Generic S3
ArangoDB
DynamoDB
Elasticsearch
Firestore
Google Sheets
MongoDB
MS SQL
MySQL
PostgreSQL
Redis
Redshift
Snowflake
SMTP
Framework Reference
Appsmith Context Object
Query
Show Modal
Close Modal
Download
Intervals (Time events)
Show Alert
Navigate To
Store Value
Copy To Clipboard
Reset Widget
JavaScript Editor (Beta)
Widget Reference
Audio
Audio Recorder
Button
Button Group
Camera
Chart
Checkbox
Checkbox Group
Container
Currency Input
Datepicker
Divider
Document Viewer
Form
Filepicker
Icon Button
Iframe
Image
Input
JSON Form
List
Maps
Map Chart
Menu Button
Modal
Multi-select
Multi-tree-select
Phone Input
Progress
Radio Group
Rating
Rich Text Editor
Select
Stat Box
Switch
Switch Group
Tabs
Table
Text
Tree-select
Video
Powered By GitBook
Filepicker
Filepicker widget is used to allow users to upload files from their local machines to any cloud storage via API. Cloudinary and Amazon S3 have simple APIs for cloud storage uploads

Upload File

You can upload files by creating a post API and referring to the base64 or binary version of the file in the post body. The data format is determined by the Data Type property in the property pane
1
{{ Filepicker1.files[0].data }}
Copied!
When you try to log the data, it appears in the blob format. But, if the user uses it in an API/query, it’ll actually upload base64/binary data.
See our guides on
if you are trying to upload large files, please increase the timeout in API configuration. Whenever the file is larger than 5mb it is stored as blob.

Properties

Internal Property
Description
files
This is the array of files selected in the file picker. The data of each file are present in each array object and can be accessed using
Property
Description
Label
Sets the label of the Filepicker.
Maximum No. of files
Enables you to set the maximum number of files allowed to be uploaded by a user.
Maximum File Size
Enables you to set the maximum allowed size of each file that a user can upload.
Data Type
This determines the data format of the files uploaded. This can be referenced using
Allowed File Types
Enables you to set constraints on the type of file a user can upload. Accepts an array of wildcardsimage/*, exact mime types image/jpeg, or file extensions .jpg:['image/*', '.jpg', '.jpeg', '.png', '.gif']
Required
When turned on, it makes a user input required and disables any form submission until an input is made.
Visible
Controls widget's visibility on the page. When turned off, the widget will not be visible when the app is published
Action
Description
onFilesSelected
Sets the action to be run when the user selects files to be uploaded. See a list of supported actions. You can immediately call an API or the S3 plugin to upload the base64 of the file to your cloud storage
To learn how to upload or manage files on Cloudinary with the filepicker widget, read this tutorial.
Widget Reference - Previous
Form
Next - Widget Reference
Icon Button
Last modified 1mo ago
Copy link
Edit on GitHub
Contents
Upload File
Properties