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:
- Create a file picker widget (assume it’s called
FilePicker1
) - Create a new API request that is configured with your Webhook URL (assume it’s called
Api1
) - On this request, set the body to use multipart form data
- Set up a known key for the form data
- For the value, bind it to the file picker as
{{FilePicker1.files[0]}}
- Back in the property pane for
FilePicker1
, set upApi1
to run on the actiononFilesSelected
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.
Cheers!
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. Let me know if you need any more help understanding the multipart/form-data encoding and I can guide you to some reliable guides.
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.