Allow drag and drop on external element

[revantemp3]

Hi,

It is me again. Just want to say thanks for the beautiful uploader.

I created this PR to support drag and drop on an external element (an element that is outside the main FilePond element where the posters are shown)

There are several reasons behind it

I note from another Issues opened about 2 years ago that drag-and-drop from an outside element is not supported and that the dev may have to use two FilePonds and sync across the file. This got me thinking, why not just change the target of the drag-and-drop event listener? Thus I came up with this solution, which seems to only affect the drag-and-drop behaviour and nothing else. Also, when dropOnExternal is not set, it preserves the original behaviour 100%

I think FilePond has the potential to become a very good "file gallery" because of its support for drag-to-rearrange file, adding mock file from virtually any source, and a very good plugin system. Plus it is beautiful out of the box.

I plan to use filepond to manage upload from different sources, such as from filepond, from server's data about previous uploads and from device camera. A user will have the chance to use pintura on some of the files, regardless of whether it is uploaded by filepond itself.

After the upload, a user can perform certain actions (the code of which I have already given in the latest Issues) from the main filepond. Such action include - download the file back (for example after a pintura edit), send to email using backend and more

For a cleaner UI, and to tell users that there are more than 1 way to upload file, I need to separate the upload component of filepond from the "gallery" component. This is the reason for the PR

As a side note: of the big three (Dropzone, FilePond and Uppy)
only FilePond support drag and drop to rearrange file order natively. Uppy has said they are not considering the gallery function I have in mind so I think FilePond has the real edge here.

[rikschennink]

This might just be me not having had coffee yet, but to clarify.

Do you mean that you're dragging and dropping a file to an external HTML element and you want to then open it in FilePond?

[revantemp3]

we all have one of those days :D

yes, that's basically what i want to achieve

dropOnExternal in my proposed change would be akin to dropzone's previewsContainer option, except that previewsContainer changes where the previews are stored while dropOnExternal changes where files are captured

[rikschennink]

Are you dragging FilePond files or just file system files? I'm just trying to determine if this requires a change to FilePond or you could handle the event with some custom code.

[revantemp3]

hi, to clarify i am talking straightly about dragging a file from my hard disk to filepond

before: drag hard disk file to filepond element
after: drag hard disk drive to a separate element (value of dropOnExternal) , which later appears on

cheers!

[rikschennink]

But why not handle drag drop events on that external element and then when the file is dropped add it to FilePond with addFile?

[revantemp3]

hmm I must admit i haven't given much thought of it

I used dropzone and previewsContainer before, so naturally I looked for similar functionality at FilePond

when I notice that dropOnPage has only one function and that is changing the element where the event listener attach, I thought I could swap out the target yet again by dropOnExternal. This seems to be a straightforward solution

My apologies if I misunderstand the code and accidentally break something. I tested it locally and it is working as expected, I of course did not test all functions

Cheers

[rikschennink]

No worries, I appreciate the PR, but I'm careful about pulling in additional functionality.

I think if you can listen for drag/drop events on the the external element and then move the files to FilePond via the API that would be better than expanding the library to listen on external elements.

[revantemp3]

alright, this seems like a good alternative. cheers :D

[rikschennink]

Okay nice! I'll close the PR then.