Upload local file to server

Hello,
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

Hi @fporta33 !

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!

@nidhi-nair
okay thank you very much I will do this test tomorrow

I come back to you on this subject. I had put it aside because I had more urgent projects on hold. I have a question about the reponse of @nidhi-nair to this line :
“On this request, set the body to use multipart form data”

I confess I don’t know what multipart form data means

Hey @fporta33 !

You would typically use multipart form data to send large files over the network, because they might need to be broken down into smaller parts and the encoding handles sending over parts in the correct sequence.

On Appsmith we enable using this encoding type in one of the tabs available in the body section as follows:

Here, you can follow the steps I had outlined before. :smile: Let me know if you need any more help understanding the multipart/form-data encoding and I can guide you to some reliable guides. :slight_smile:

@nidhi-nair
Thank you for your help indeed I would like to have more information on this subject

No problem @fporta33 !

You may have typically seen it used in the context of HTML forms as described in : MIME types (IANA media types) - HTTP | MDN

The specification for multipart/form-data can be a little overwhelming, but here’s a more unofficial link that explains it more easily.

@nidhi-nair
thank you very much i will have something to read :joy:

Everything works now, my file is sent to the N8N process

@nidhi-nair many thanks to u

1 Like