I have a question regarding the file dropzone component in UI Bakery. I didn’t find the information in the documentation, so I’d appreciate your insights. Specifically, when multiple files are dropped into the dropzone, is the content of these files captured or stored anywhere? I am looking to leverage the multiple file upload feature for storing files in an S3 bucket, as I noticed the S3 component does not support multiple file uploads. In {{ui.dropzone_name.value}} it seems to be just metadata, whereas I am looking to get the content of the file uploaded to send to S3. Thanks!
Hello @Brenda_Chavez
We’ve already replied on Slack, but I’ll also duplicate it here.
The S3 component does not support multiple file uploads at the moment.
File Picker and Dropzone components work similarly, uploaded files are available as {{ui.fileDropzone.value}}.
When files are dropped into the dropzone, their content is not captured or stored anywhere; the component just has access to them. They need to be downloaded somewhere. For example, to upload to S3, you can use a connected S3 data source and query step (or API).
Some examples:
If you need any further information, please let us know!
Hi @Brenda_Chavez, welcome to the community!
Additionally to what @Kate said, here are some things to know about file dropzones, which might help you come up with a solution, but it could also be good to have these things written out for everyone.
When printing to the console or hovering over {{ui.fileDropZone.value}} it only shows lastModified, lastModifiedDate, name, size, type and webkitRelativePath of the file. But, this variable is not an object holding just these attributes, it’s actually a JS File object (which is a specific kind of Blob object). This means it also has some “hidden” methods, namely:
Depending on your needs one of them might prove helpful, but generally it’s good to know we have these available. Additionally, text() and arrayBuffer() return promises, so when using these methods you need to add await.
Finally, the only thing to consider when enabling Multiple for the dropzone, is that value will be an array of file objects.
// 'Multiple' disabled
console.log( {{ await ui.fileDropZone.value.text() }} );
// 'Multiple' enabled
console.log( {{ await ui.fileDropZone.value[0].text() }} );
2 Likes