Jquery Text Input To File Input

This plugin attached a file manager to a TEXT INPUT allowing users to select images/files from a library or upload new ones. The plugin then puts the use to the files in the text input. Due to the trickiness of styling file input fields, this plugin allows you to have a consistent style through out your designs in addition to allowing you to convenience of selecting files from a library rather than uploading every time.

1. Requirements

  1. PHP 5 and above on the server you will be using
  2. JQuery 1.10 and above on the page you will be using the plugin on.

2. Installation

Before you will be able to add the plugin to your pages, you will need to do some configuration. You will need to open the following 2 files in a text editor:
  1. config.php – In this file you will specify the path and url to the library and permissions to give to the users. It is heavily commented to guide you with each item.
  2. jquery.file.manager.js – In this file you will need to specify the path to the file-manager folder with the trailing slash. (NB: This is not the library url)

3. Adding to a page

To use the plugin in a page you will need to include a css and a js file in the page:
  1. <link href="http://yoursite.com/path-to-the-file-manager/jquery.file.manager.css" rel="stylesheet">
  2. <script src="http://yoursite.com/path-to-the-file-manager/jquery.file.manager.js"></script>

4. Attaching file manager to the text input

All that you need to do is add the class file-manager to the input and when every the input is focused on, the file manager will popup. It is also possible to open the file manager using a button and then have the file url place in a text field. To do this add the class file-manager-linked to the button and then add the attribute data-input-id="text-input-id" to the same button