[FilePondUpload] Having the upload's Feedback Message inside a Web Block.

Forge Component
(3)
Published on 10 Nov by Stuart Harris
3 votes
Published on 10 Nov by Stuart Harris

Hi Stuart,

My team is having some issues handling the feedback the user gets after uploading a file.

We are using the AutoUpload widget on a page where the user can either browse for files or just drag and drop a file anywhere on the page – this should toggle an off-canvas pane where we want to display a list of the uploaded files and give the user feedback on both the progress of the upload and the final result, with the option to retry or discard the upload in case of failure. Basically, we’re aiming for the component's normal behaviour, only with the possibility to move it to another place on the screen (in this case, the off-canvas pane).

Do you think it would be possible (and a nice to have feature in your component) for that feedback to be placed inside a web block, thus allowing us to better manipulate the way we display it to the end user (or do you have any suggestions on how to do that in this component's current version)? That would be awesome!

Thanks.

Carlos,

Thank you for reaching out and wow, what a great suggestion!

As this component integrates an existing javascript library, it will depend on what that library is capable of.  The FilePond library is incredibly well written and well documented, so it may be possible.

I just checked and FilePond does actually have events and callbacks you can hook into.

https://pqina.nl/filepond/docs/patterns/api/filepond-instance/#events

I have a few items to look into first, but I will create a block that will monitor file progress.

In the meantime, you might like to investigate the FilePond:processfileprogress event.

p1 = document.querySelector(".filepond--root")

p1.addEventListener("FilePond:processfileprogress", e => { console.log("file progress", e.detail); });


I hope this helps!

Kind regards,

Stuart