Form.yml : file browser object

@jms27000 greetings from Bretagne, as @efranz mentioned I have been working on solution: https://github.com/OSC/bc_js_filepicker.

Download the latest release of form.js and place it in the root directory of your Batch Connect application. For example /var/www/ood/apps/sys/bc_jupyter/form.js .

Edit your Batch Connect form.yml so that the input you want to add a file picker to has a data attribute named data-filepicker with a value of true :

# form.yml
  input_file:
    label: 'Input File'
    data-filepicker: true
    readonly: true # optionally only allow editing through the file picker

Hi, and thanks a lot to work on this topic

i just have tried your solution in a simple forml.yml example. i can see the new button “Select File” and when i ckick on it, a “download” message is turning and nothing appends…

Then, i have done a second test with a form.yml.erb, which is our target of usage, and i seems than the form.js file doesn’t load. no “Select File” button etc.

is this code can select a directory ? with which option ?

again, thanks a lot.

jean-marie

I am curious if there is an error message in the Console, or if the AJAX request which populates the files list is encountering problems. To diagnose this would you please post screenshots of this app with Firefox’s developer tools open to the Console? To get the best diagnostic information please:

  • Navigate to the page
  • Open the Console tab
  • Ensure that the Console tab is set to show:
    • Errors, Warnings, Logs, Info, Debug
    • XHR
  • Reload / refresh the page
  • Expand the XHR GET request by clicking on the triangle on the left side of the page
  • Take the screen shot

For reference I am looking for something like this:

As for form.yml.erb I am not certain that we support both ERB and using custom JavaScript.

Hi, Morgan

here is the debug screen requested.

@jms27000 I see that you got a 401 Unauthorized response from Apache. I have looked into how I am performing the request to list the contents of the directory, and have learned that older versions of Firefox (version < 61) have different defaults for the API I am using. I have uploaded a pre-release for you to test that corrects that oversight: https://github.com/OSC/bc_js_filepicker/releases/tag/v0.0.2.

This should correct the error you are seeing where the directory’s contents never finish loading. As for file selection: once the list on the right is populated the user would then left click on a file or directory to select a target and then click the Select button. That will close the modal dialog and set the value of the input to the selected file path. Double clicking on a directory navigates into that directory.

Hi, everybody

i have tested the new version of form.js with firefox 68. not working yet…

thanks

jean-marie

Jean-marie,

Apologies I accidentally uploaded a testing copy that was intended to help me duplicate the error. I just updated the pre-release with the intended version.

- Morgan

Hi, Morgan,

I have tested successfully the filepicker with a CentOS 7.6 / firefox 60.7. good job.

two questions more :

  • is it possible to initialize the root tree of the filepicker with the “value” field.
  • what’s the usage of the left part “Favorites” ? is it possible to add any “favorites”

and one again :

  • we plan to used form with erb codes. it seems the the form.js is not loaded in that case. how to proceed to have a file browser working ?

again, thanks for your time;

jean-marie

I works too with Windows 10 / Edge v17 !

1 Like

That’s a good idea. I’ll add it, currently it defaults to the first entry in your “Favorites”. One thing to be aware is that Batch Connect applications save their context so they will remember the last submitted value, and I do not have an easy way to always return to an original directory.

The Favorites list is taken directly from the Dashboard’s File’s dropdown. That can be set by following the steps detailed here: https://osc.github.io/ood-documentation/release-1.6/customization.html#add-shortcuts-to-files-menu.

I have confirmed that form.yml.erb does work with form.js. If you are willing to post your form.yml.erb we can help troubleshoot it.

Morgan,

it works with erb form files ! you’re the best ! if you can implement the initialization of the tree in the filepicker, coming from the form.yml.erb, it would be great !

see you

jean-marie

Jean-marie,

I finalized a release for the file picker: https://github.com/OSC/bc_js_filepicker/releases/tag/v0.1.0.

By setting a value attribute for your inputs you can set a default value. I made a number of other improvements while I was working on this including adding filtering which should come in handy for large directories. Please let me know if you find any bugs.

- Morgan

Nice. I had just the time to test it before leaving for my vacations. to my point of view, there’s missing 2 or 3 things :

  • an argument to indicate a file or a directory target to integrate in the form parameters
  • according to this option, the button text will change to “File Select” or “Dir Select”
  • in the select view, add the current dir where we are (as an option too ?)

I will test more when i’ll be back at the beginning of September.

thanks again for the job.

jean-marie

Hi, Morgan & everybody@osc,

i have tested the file-picker. it works fine ! :slight_smile: i have found one situation which makes problem : when the value is not set in the form.yml.erb, the filepicker shows the / tree by default. i suggest to show the homedir by default

some addings if possible :

  • add an argument to indicate a file or a directory target to integrate in the form parameters
  • according to this option, the button text will change to “File Select” or “Dir Select”

this adding will avoid to test the existence of the file choosen and its type (file or the directory) in the submit.yum.erb file

question : do you plan to integrate this file-picker function in the next OOD release ?

Jean-Marie

That is odd that it was defaulting to showing you the root directory, when used as a Batch Connect component it is intended to default to the home directory. In which version are you seeing this behavior?

As I mentioned in our other discussion yesterday I made a few changes and released version 0.3.0 which adds another way to specify the file system preferences, by adding a data attribute file_picker_favorites. The format for the expected value is described here: https://github.com/OSC/bc_js_filepicker/blob/master/src/files_api.js#L61-L69.

If I have time I’ll look into adding an option that will only permit selecting files or directory, or files with certain extensions this coming Tuesday (I allocate Tuesdays and Thursdays for answering community questions).

As for whether the file picker will be integrated into the next major release of OnDemand: yes, I think that it or something very like it will be.

Thanks, Morgan. I will test this new release this week-end and i give you my feedback on monday

Jean-Marie

Morgan,

it’s ok for me. see my comment on the https://discourse.openondemand.org/t/dynamic-values-into-forms/457/11 topic.

jean-marie

Hi, Morgan

We are using the 0.4.1 version of your filepicker and very happy with it.

it stays a remaining point to be perfect, as i requested in Sept, 2019

Do you think it’s possible ?

thanks a lot

jean-marie

Jean-Marie, sadly Morgan doesn’t work for OSC anymore, but I’ve created this ticket to track in github.