Server Side File Browsing

Question

I'm working on a web app that reads data from a set of text files and maps it to a MySQL database.

Currently, the form requires manual input of the file path, but I would like to add a file chooser to this field to make that part of the setup a little less tedious.

The solutions I've found all allow selection of a single file, but I'm looking for one that will allow the use of input patterns, as most of our jobs require us to pull multiple files off the server in one go.

Any help in this matter is much appreciated.

Take a look at https://github.com/moskiteau/backbone-filetree — moskiteau, Mar 12 '14 at 14:33

score 14 · Accepted Answer · edited Nov 15 '16 at 17:19

It took a lot of searching and some work around, but I found a reasonably viable answer for this.

The biggest problem I faced was browsing server-side files. I found a jQuery plugin at A Beautiful Site that solved that issue.

It's an AJAX file browser with server-side connector scripts for JSP, PHP, ASP, and others.

I built the webapp's file tree using the following script:

  $(document).ready( function() {
    $('#loadFolderTree').fileTree({

        root: '/server_root/subfolder/tree_root',
        script: '/js/jquery_file_tree/connectors/jqueryFileTree.jsp',
        multiFolder: false,

    });    
  });

The nice thing about this script is that it returns the selected file path as a String. With some minor additions to the script's default file handling, I was able to write the returned file path to the appropriate form field with the following code:

}, function(file) {
            var loadPat = document.getElementById("loadPattern");
            loadPat.value = file.replace("/server_root/subfolder/tree_root/", "");

Since the form is already built to handle files relative to the root, there is no need to print the entire path, so this last piece of code trims off the path up to the root directory, and sets the form value to the remaining content of the String.

Most importantly, the returned string is editable in the form which allows users to change a return of input-file-1.txt to input-file*.txt and import multiple files in one run.

This is the final result:

  $(document).ready( function() {
    $('#loadFolderTree').fileTree({

        root: '/server_root/subfolder/tree_root',
        script: '/js/jquery_file_tree/connectors/jqueryFileTree.jsp',
        multiFolder: false,

    }, function(file) {
        var loadPat = document.getElementById("loadPattern");
        loadPat.value = file.replace("/server_root/subfolder/tree_root/", "");

    });    
  });

It looks like no-one has maintained it since 2008, but it still seems to do the job fine. — Peter Smartt, Aug 15 '14 at 06:56
Coming to this 5 years later (!) but i wondered if you had much success with this? I have used this for an identical situation but when i point jqueryfiletree at our network location the files/folders are not in alphabetical order after a few layers. However pointing at my local C:\ drive it works perfectly. — Simon, Oct 20 '17 at 17:42
Yes, in fact we still use it in our application. I noticed a similar issue with sorting not long after our file list started getting longer. I had to modify the jsp connector I used to do some manual sorting before returning the list to the browser. — Mike, Oct 21 '17 at 19:35

Server Side File Browsing

1 Answers1

Linked