View files on the server side

Question

I am working on a web application that reads data from a set of text files and maps them to a MySQL database.

Currently, the form requires manually entering the path to the file, but I would like to add a selection file to this field to make this part of the setup a little less tedious.

The solutions I found allow you to select one file, but I am looking for one that will allow us to use input templates, since most of our tasks require us to pull several files from the server at a time.

Any help on this is greatly appreciated.

Answer 1

It took a lot of search and some work, but I found a reasonable answer for this.

The biggest problem I encountered was viewing files on the server side. I found the jQuery plugin in Beautiful site that solved this problem.

This is an AJAX file browser with server-side scripts for JSP, PHP, ASP and others.

I built a webapp 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 best part about this script is that it returns the selected file path as a string. With some minor additions to the default script 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 has already been built to process files with respect to the root, there is no need to print the entire path, so this last piece of code cuts the path to the root directory and sets the form value to the remaining contents of the line.

Most importantly, the returned string is edited in a form that allows users to modify the return of the input-file-1.txt file to the * .txt file input file and import multiple files in one pass.

This is the end 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/", ""); }); });