Category: Question and Answers
Updated

2023-08-03

This solution is summarized from an archived support forum post. This information may have changed. If you notice an error, please let us know in Discord.

Direct-upload to S3 through the browser

Issue

I want to know if I can upload a file directly to S3 without going through the server. How can I do this? Also, is the maximum upload size limited by the FilePicker widget?

Resolution

To upload a file directly to S3 without going through the server, you can set up an S3 datasource in the FilePicker. Follow these steps:

  1. Go to the datasource tab in the Appsmith editor and add a new datasource. Choose "Amazon / Generic S3" as the datasource type.

  2. Fill in the required details such as access key ID, secret access key, and bucket name.

  3. In the "Upload" tab of the FilePicker widget, select the datasource you just created in the "Data source" dropdown.

  4. You can then choose to limit the maximum upload size by setting the "Max file size" property.

  5. In your application, when a user chooses a file to upload, it will be sent directly to S3 without passing through your server.

Here's an example of how you can use the S3 datasource in the FilePicker widget:

<FilePicker  label="Choose file to upload"  data-attr="file-picker"  datasource="s3-datasource"  max-file-size="10 MB"  file-metadata="true"/>

In this example, "s3-datasource" is the name of the S3 datasource you created, and "max-file-size" limits the upload size to 10 MB. You can also set "file-metadata" to true if you want to include metadata about the uploaded file in the S3 bucket.