Question

I would like to give the user a file browser from within a webpage.

Here is what I’ve tried. I’m trying to present the file contents myself. I am trying to make it so there is div that is the same as what you would get on an ordinary directory browse within the webpage. I have succeeded in making the div work visually, displaying the contents of the selected folder but when trying to click on a file in that directory it can not find the file because it is looking in the wrong file path index.html/ instead of index.html/videos.

Code:

<div id="new-nav"></div>

<script>
  $("#new-nav").load("/videos");
</script> 

What’s the best way to give the user a “file browser” experience in a webpage?

Answer 1

I would recommend using http://ckfinder.com/demo instead.

Features of CkFinder as Listed on their Site

• Lightweight interface.

• No page refreshes: quick responses.

• Folders tree navigation: intuitive for all users.

• Quality image thumbnails, making it quick to find things.

• Multi-language support with automatic user language detection.

• Context-sensitive menus for files and folders.

• Multiple file uploads with a progress bar (*).

• Full user control of the content: create, rename, and delete
  folders and files.

• Drag-and-drop support for copying and moving files between folders.

• Full developer control: all features can be precisely configured with
  a powerful ACL and user roles system.

• Flexible configuration: store files in private folders, also
  outside the document root.

• Secure file uploads: all uploaded files are checked according to
  the rules set by the developer.

• Full source code included for the server side integration.

• Instant integration with CKEditor and FCKeditor.