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.

Answer 1

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/", "");

    });    
  });