Sensible way to organize jstree that could be quite large on this webpage

Question

What would be a sensible way to organize this jstree ?

The idea is the user can browse the folder tree (which is a representation of server filesystem) and if they select a node that is put into Selected Folder input field.

I cannot decide how to display it, I don't really want to use a button and a popup because there seem to be so many problem with popup windows. I could put it below the input field but that wouldn't make it any smaller and it seems should be to the right of the input field.

Any ideas ?

Answer 1

In Windows Explorer, the tree of folders is displayed on the left, so I would put it there. Once the user has selected the folder, you might want to display a list of the files that are in the folder.

It also depends whether you are going to make your webpage responsive. If it is, I would use material design and have the folder list in a drawer which can be opened and closed.

As I said in my comment, why does the user need to browse the folder tree? I don't have enough context to think of alternatives if I don't know why they are doing the task.

Edited to add:

Once they have selected the folder, you could just highlight it to show it is selected (especially if you were using Material Design instead of jstree, which isn't very accessible), and then there would be more space to put labels next to your buttons; their meaning isn't totally obvious otherwise.

If you really want to use a tree design, try this accessible one.