Category: Widget
Resource links
Updated

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.

Upload Local File to Server

Issue

I need to create an interface for users. They should be able to download a file from their local disk. This file must then be retrieved from the server running Appsmith so that it can be processed by another program. I have seen the documentation on the filePicker component (with S3) but I confess I don’t know how to transpose it in my case. In reality the application is linked to an N8N process, this process must get the file downloaded by the user and launch the execution of a script
Thanks for your help

Resolution

I am not very familiar with N8N processes but from the looks of it you have set up a Webhook on N8N that accepts file data? If that is the case, you can set up your file picker on Appsmith to call this Webhook URL, and send it the file data as a multipart request. You can then set up this API call to get executed every time a user selects a file in the file picker.

The steps you would need to perform to achieve this are:

  1. Create a file picker widget (assume it’s called FilePicker1)
  2. Create a new API request that is configured with your Webhook URL (assume it’s called Api1)
  3. On this request, set the body to use multipart form data
  4. Set up a known key for the form data
  5. For the value, bind it to the file picker as {{FilePicker1.files[0]}}
  6. Back in the property pane for FilePicker1, set up Api1 to run on the action onFilesSelected

Now each time a file is selected, the Webhook url should receive data, base-64 encoded by default.

Let me know if this works for you. :slight_smile:

Cheers!