[ReactFilePondUpload] Upload, but not to a form

Forge Component
(5)
Published on 27 May by Stuart Harris
5 votes
Published on 27 May by Stuart Harris

I'd like the user experience to be that they can drag their files over a Table which also shows the files they've previously uploaded.

The idea is that the table becomes the drop area. You see this on sites like Google Play Music where you can drop new MP3's over the table that shows previously uploaded tracks.

Is there a technique to use here?

Hi Roy,

Thank you for an excellent question.

This is not a use scenario that I have considered supporting. However, it is a great idea.

Have you attempted to implement this, and did you find any problems?

I imagine it could be possible that multiple instances of the control might cause the wrong file to upload to the wrong place. This issue should be relatively easily resolved.

Please let me know how you go, and if it was implemented how likely are you to use it?

Kind regards,

Stuart

Hi Stuart,

I'm no CSS expert, but what I watch what happens in Google Play Music. I'm wondering if a CSS layer, with a form, is enabled when you drag something on to the page.

This highlights the drop area and maybe stops the form and table from clashing.

Does that make sense at all?

Cheers,

Roy

Hi Roy,

Yes, I think I understand your idea.  Though CSS for the existing component will be ok.

It is the underlying javascript integration code that is likely to be a problem.

Kind regards,

Stuart

Hi Roy and Stuart,


I've recently selected this react component for my project where a similar feature (as described in this same topic) is being requested: i.e. allowing the uploaded files being shown on the below table (highlighted section) - this is still not exactly the same behavior that Roy described for Google Play but somehow similar - have you both heard anything or anyone discussing this topic since this topic was last updated?

I've also been digging the documentation at https://pqina.nl/filepond/docs/patterns/api/style/ hoping that the file pond drop zone can become as close as possible to the above mockup, but I'm not being successful at all. Appreciate anyone's comment.


Thank you,

Pedro

Hi Roy and Pedro,

I have deployed an updated to the ReactFilePondUpload component which will report which files are currently being uploaded.  The UploadStarted callback could be used to create a user interface such as the one you both would like to build.

Note: In this version there is a delay before the callback occurs, let me know if this is a problem for you as it can be pushed to earlier in the cycle.

I hope this helps!

Kind regards,

Stuart