Support Drag and drop folder

[magdmartin]

when designing the feature in OpenRefine/OpenRefine#5048 the conversation between @Ainali and @sunilnatraj branched on the support for drag and drop folder.

Here is @thadguidry suggestion for implementation:

The easiest way I know how to mimic this need is through using the virtual file system that the browser's provide through the File and Directory Entries API which exposes the webkitGetAsEntry(). It's either a FileEntry or a DirectoryEntry. You can drag and drop either kinds from your OS file system views into a drop zone.
So see exactly how this works, see the drag and drop example, where you can drag a folder (as well as many files, or a combination of selected files and folders!) into the example element and watch the tree created:
https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItem/webkitGetAsEntry#result

Originally posted by @thadguidry in OpenRefine/OpenRefine#5048 (comment)

[wetneb]

The demo at https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItem/webkitGetAsEntry#result seems to show that the browser doesn't let Javascript code retrieve the full path to the files. Instead, what is exposed as .fullPath attribute is the path from the selected folder to the file it contains. Unless there is a way to access the absolute path of the selected directory to combine them both, this seems to indicate that this API cannot be used to retrieve absolute file paths, which is what we would need.

[thadguidry]

Hmm, but can you not reverse walk the tree and then recreate the path?

[sunilnatraj]

@thadguidry Interesting, few initial thoughts, this will require the user to select the file system root to get the full path. We will be dependent on the user having selected the root FS. Browser will prompt the user for access permission for all the root level folders. This could be a challenge to users?

[sunilnatraj]

@thadguidry @wetneb @magdmartin I played around with the it and here is an option. I am only listing directories with full path information. user can copy paste path from this view.

[wetneb]

The screenshot above shows the full path from the directory you selected to the file, but that's not enough. We'd need the absolute path, which is something different. Even if you asked the user to select the root directory of their file system (which would be pretty terrifying), it wouldn't be enough (on Windows you'd be missing the drive letter for instance).

[sunilnatraj]

@wetneb Yes you are absolutely correct. The directory path listing can be a temporary workaround for PAWS maybe?

[thadguidry]

Browsers of course are limited for local file access.
But other local running programs are not (because the user has already installed them, and given trust to run - like our OpenRefine).

So, we know Node and Java, if given the right access, have full access to the file system.

Couldn't there be a way to call the JavaFX FileChooser (which returns a Java File object), from an HTML/HTMX button? https://docs.oracle.com/javase/8/javafx/embedded-browser-tutorial/js-javafx.htm
That won't work, it's within the boundary of the JavaFX app and a WebView.

Or if not JavaFX, then using Node (which can run locally and has file access also)? Hmm, Node would need to be packaged then in OpenRefine, but that's an option also.

[thadguidry]

But it seems best, that since we already have OpenRefine Server running, and the Browser JS can make calls to Server, then we'd just use OpenRefine server to do the job and return File objects.

[sunilnatraj]

@wetneb @thadguidry @magdmartin
I ran the Directory API demo on a Windows system and was able to select a drive and get the listing. Based on this, i created a new flow for filesExtension, see attached demo. Let me know your thoughts.

files-newFlow.mov

[thadguidry]

Looks Great! But I can't really comment, since I don't use the Wikimedia Commons Upload functionality and don't know what needs to happen next after this step, or what others might want to do further with file listing data.

I'd ask @Ainali

[sunilnatraj]

@thadguidry Thank you. This is a new extension called FilesExtension which creates a project with details of files in folder(s)

[wetneb]

That's a nice way to do it, but as I understand it it will require the user to select a folder at the root of their filesystem hierarchy via the native file picker, right? And then select the folder they actually want to import via our web UI. Isn't that confusing? It can be that it's easier to use than pasting an absolute file path (because you don't need to know what an absolute file path is anymore), but I am not sure.

[sunilnatraj]

As the use case requires folder(s) selection, the most ideal case is the file picker allows folder select & provides path info. In absence of this the alternative options is a 2 step process, we can try to replace the 1st step by providing canned options of root folders based on the OS and user selects that instead of having to drag-drop the root folder. The 2nd step is exactly what the user would do with a file picker.

[magdmartin]

@sunilnatraj in that case could we skip the drag and drop and display the folder tree directly for the user to navigate?

[sunilnatraj]

@magdmartin This option will not require the user to drag-drop, however the directory list creation will also move to java (backend). This will require the OpenRefine application to have permissions to access the file system.

In the case of drag-drop the access grant prompt comes up in the browser and user has control over access grant.
Java end permission handling needs some exploration.

Which option will be better to pursue

1. Option A : UI end handling of - which involves user dropping the root drive/folder
2. Option B : UI + Java - where in java generates root drive / folder list and directory list

[sunilnatraj]

@wetneb @magdmartin @Ainali Demo of updated flow, I have provided user with option to get directory details by selecting a root drive/folder OR do a drag-drop. In this recording user selects a root drive / folder, the directory details is generated by the java backend. The end user flow is the same as drag-drop flow. Also attached is the security permission grant alert that user will get.

filesExt-flow2.mov

[Ainali]

That looks pretty good to me!

[sunilnatraj]

@wetneb @Ainali @magdmartin @antoine2711 I have updated the flow and below is a demo of the updated flow ( shortened to fit the 10MB size limit).

• User gets option to select the drive / root level folder
• On selection the directory list is generated and presented to the user. the directory list is sorted.
• User can select the directories whose file list is required
• An initial version of fltering of system folders has been put in place it needs refinement.
• It will be great if this is tested on your systems including windows. Attached is the FilesExtensions package.

fileExt-V2.mov

openrefine-files-extension-0.1.0.zip

[Ainali]

Even better! I am happy with that workflow.

[sunilnatraj]

@wetneb I have raised a PR for this ticket
#8

[sunilnatraj]

@Ainali @magdmartin @antoine2711 PFA File extension install; It will be great if you can try it out & share your feedback.

openrefine-files-extension-0.1.0.zip

[magdmartin]

@sunilnatraj I tested it with OpenRefine 3.8.7 on ubuntu 22.04 and chrome. It worked well. The flow works fine, it had to wait few seconds for the tree of my /home to load but I think it is reasonable.

My only suggestion would be to name the project by default with the folder path instead of the standard fileList for example in my case /home/martin/Pictures/Screenshots/

We may want to add more information on the start page to indicate what the FileExtension purpose is. My concern with the fileContent column (see also #5) is that some users might confuse the purpose of the FileExtension with uploading a zip file containing multiple files. The primary goal of FileExtension is to enable users to load metadata about files within a single project (in relationship with the Commons extension) rather than creating a project from multiple files.