osc / bc_js_filepicker Goto Github PK

Enable an admin to specify a data attribute or option to indicate that the file picker is supposed to let the user select only a directory or only a file. Then when the file picker is opened:

1. If selecting a directory, display only directories (no files), and have the text of the button say "Select Directory" (or just "Select")
2. If selecting a file, display directories and files, but do not enable the select button unless the selected item is a file, and have the text of the button say "Select File" (or just "Select")

Prerequisites:

• the current release of this picker
• remote_files_enabled
• rclone remotes defined.

We get the following trace, and a missing file picker button:

Uncaught TypeError: Cannot read properties of null (reading 'groups')
    at c (new:481:80509)
    at HTMLDocument.<anonymous> (new:481:88486)
    at R (jquery.js:3802:29)
    at Z (jquery.js:3870:12)
c

Expanding the function, here is the surrounding javascript:

                                    function c(t) {
                                        var e, n = [], r = a(t.querySelectorAll('li[title="Files"] a[title]').values());
                                        try {
                                            for (r.s(); !(e = r.n()).done; ) {
                                                var o = e.value
                                                  , i = o.title
                                                  , s = o.href
                                                  , c = new RegExp("dashboard/files/fs(?<path>.*)").exec(s);
                                                n.push({
                                                    title: i,
                                                    href: c.groups.path || "/"
                                                })
                                            }
                                        } catch (t) {
                                            r.e(t)
                                        } finally {
                                            r.f()
                                        }
                                        return n
                                    }

I'm obviously not expecting rclone remotes to work with any random ondemand interactive app, I would simply like to be able to use the file picker for files or folders local to the cluster, even when remote_files_enabled is true and there are rclone remotes defined.

Although multiple file pickers are supported they all share a common File Explorer, and so navigation on one will alter the last_path for all fields, even across multiple apps. The File Explorer class could be altered to provide separate context for different fields across different apps.

A user reported a 401 error. I suspect that this is because older versions of the JS fetch API do not send authorization cookies by default.

The release current weighs in at 251k. The reason that the file is so very large is that it is bundling jQuery and the Vue runtime as a convenience to speed adoption.

If desired the dependency on jQuery could be removed, and Vue's runtime could be moved to either a CDN or a separate file.

My favorite paths are a longer than average, window doesn't react, overflows the text.

Even with the app in full screen the directory/cephyr/NOBACKUP/groups/alvis is enough to overflow;

Even If I happen to squeeze the window a tiny bit, it breaks even further making things way to cramped for almost everything, despite there being a lot of horizontal space that could be used.

Is there a way to easily customize the margins used here?

i have OOD 2.0.29 and filepicker 1.0.0.

the picker is for selecting directories and i have bunch of favorites defined.

however, when i select a favorite, and then press the select button, nothing is done.
i need to select one of the subdirs first. and also strange (or even buggy?) i can't select the . or .. dirs.

this makes the favorites a bit useless in our case, as i can't select the favorites themself

Add automation to build the form.js to a tag when a tag is created.

One annoying thing for me about this is if I click on something I want, the select button isn't just there. I have to scroll to the bottom to see it. It'd be nice if the scroll bar were only for scrolling through directories & files and the header, footer and side list all stayed in the same position which is always viewable.

Dear OSC Team,

I have downloaded latest form.js and added the following to my jupyter-notebook batch_connect app.

working_dir:
label: "Working Directory"
data-filepicker: true
data-target-file-type: dirs
readonly: false
help: "Select your project directory; defaults to $HOME"

I see the blank input box, and when I click on it or double click on it I don't see the file browser pop-up. Looking at the error on the page I see the following. Any idea how can I fix this?

Thanks,
Amit

Navigating to the parent directory is supported by the addition of the .. entry. We should have the . entry as well.

This project needs tests.

The directory shortcuts should be on the left of the dialog, and by default should be the first directory:

When I opened it, I was on the root file system and couldn't find my home directory.

Here, Select and Close do not apppear:

I have to scroll down to see it:

These buttons should always be visible.

Sometimes you want the value to start as not set, and still want the default directory for your search to be a specific location on the file system.

In the frame-renderer, in order to, we resort to setting the default value to #{Dir.home}/maya/projects/. which tricks the file picker into presenting to the user the parent directory by default #{Dir.home}/maya/projects.

https://github.com/OSC/frame-renderer/blob/1daf9e5d8342ee5fa07c9d8c382e10dad1724422/app/models/project.rb#L10-L21

Then in the form we do this:

https://github.com/OSC/frame-renderer/blob/1daf9e5d8342ee5fa07c9d8c382e10dad1724422/app/views/projects/_form.html.erb#L11-L13

Instead what we want to be able to is just set the starting directory in the form:

      <%= form.text_field :directory,
        label: 'directory', 'data-filepicker': 'true',
        'data-target_file_type': 'dirs',
        'data-default-directory': Project.maya_top_level_dir %>

• the idea is data-default-directory would specify the directory that the file picker opens to if the form has no value or the value is an empty string

Could you post the files used to create the Demo gif? I've followed the steps in the Readme file, but am not able to get any of it to show up. Thanks!

If the fetch fails there are no designed user-visible error messages.

https://discourse.osc.edu/t/form-yml-file-browser-object/427/8

Using data-target-file-type: dirs and selecting a Favorite and pressing "Select" doesn't pick up the directory. I have to select something on the right hand side, but the . directory isn't selectable, there is no way to directly use a favorite.
Instead, I have to go 1 dir up, which in my case means hundreds of project directories, and requires that I scroll to my project area manually.
I also have no way of not selecting a subdirectory when such a dir exists, again forcing me to go up 1 dir.

I'm also not sure my users would necessarily recognize . and .. even if they were selectable.

I just noticed this bug, should be a quick fix but I think the problem lies in the HTTP 301 not being followed correctly:

With the goal of further reducing the bundle size: replacing the usage of Bootstrap's modal JS with Vue transitions would allow us to remove the following bundle dependencies:

• bootstrap
• jquery
• popper.js
• vue-observe-visibility

As requested from discourse we'd like to have the button to choose the file change text depending on whether it's a directory or file. So if you've highlighted a directory it would show Select Directory and same with a file.

Defaulting to <initial_value>/.. (the directory above the initial value) should probably only happen when the initial_value is a file right? Otherwise when you give a directory, you start out in the directory above it, which is kinda strange.

I propose a check, if it's a file then initialize to .. (above) otherwise . (here). A simple check may just to see if there's a file extension. If there's no extension you can assume it's a directory, this may be simpler/more efficient than fetching the FS to verify.

If a default value is set for the input use that instead of the home directory.

Hello,

I've been using the master branch of the js_filepicker with the master branch of ondemand.
But I'm still getting a parsing error very similar to this one.

Though, the nginx log shows a different message I think:

ERROR "No such file or directory @ rb_file_s_stat - /https:/ao-ood2/pun/sys/dashboard/files/fs/home/toto"
INFO "method=GET path=/pun/sys/dashboard/files/api/v1/fs/https:/ao-ood2/pun/sys/dashboard/files/fs/home/toto format=html controller=FilesController action=fs status=200 duration=49.26 view=28.12"

I've been trying to force the path replacing the 'fetch' like this:

  return fetch('/pun/sys/files/api/v1/fs/home/toto', {
    credentials: 'same-origin',
    redirect: 'follow',
  });

Although I no longer see any error in the nginx log, I'm still getting the parsing error anyway.

INFO "method=GET path=/pun/sys/dashboard/files/api/v1/fs/home/toto format=html controller=FilesController action=fs status=200 duration=39.15 view=19.50"

Originally posted by @GloktarFR in #144 (comment)

With all the PRs that come into this repo - mostly from dependabot - it may be nice to have a small simple test suite (and an action to run it) to at least give us some confidence that it isn't broken.

The action can be in a separate PR/issue once the test suite is created.