A neat little drag and drop uploader.
JavaScript HTML PHP CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
img
js
uploads
CHANGELOG.md
README.md
example.html
example_post_handler.php

README.md

neat-little-uploader (v1.12)

A neat little drag and drop uploader.

A minimalistic HTML5 drag-and-drop file uploader (with image preview) for use with JQuery.

This is what it looks like.

Installation

Note: There is a fully functional example (example.html) already included that utilizes PHP for handling the server-side post.

  1. Pop the contents of the repo into your web-accessible document root.

  2. Make sure you end up with an uploads folder with the appropriate write permissions.

  3. Insert the following lines into the header:

    <link rel="stylesheet" href="/css/neat-little-uploader.1.11.css">
    <script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="/js/neat-little-uploader.1.11.js"></script>
  4. Place the following code where you'd like the uploader interface to appear on your page:

    <div class="form-group" class="col-sm-3">
      <label for="edit-item-file filedrag-filename" class="control-label">Upload File</label>
      <div class="filedrag neat-little-uploader" id="example-1">
        <div class="filedrag-preview-container" style="display: none;">
          <img src="" class="filedrag-preview">
        </div>
        <div class="filedrag-droparea">
          <div class="filedrag-display-filename"></div>
          <div class="filedrag-remove-button">(<button type="button" class="btn btn-xs btn-link filedrag-remove-file">remove</button>)</div>
        </div>
        <div class="filedrag-progress"></div>
        <input type="file" class="filedrag-input" id="file-input" name="file-input">
        <input class="filedrag-input hidden-original" type="hidden" name="original_filename_1" id="hid-original-filename-1">
        <input class="filedrag-input hidden-new" type="hidden" name="new_filename_1" id="hid-new-filename-1">
      </div>
    </div>
  5. Initialize the uploader:

    $(function () {
      initUploader('example-1', 'example_post_handler.php');
    });
  6. Implement server-side post handling. Here's an example of how this can be achieved in PHP:

    $filename = (isset($_SERVER['HTTP_X_FILENAME']) ? $_SERVER['HTTP_X_FILENAME'] : false);
    $ext = pathinfo($filename, PATHINFO_EXTENSION);
    $file = file_get_contents('php://input');
    
    $new_filename = uniqid() . '.' . $ext;
    
    if(file_put_contents(__DIR__ . '/uploads/' . $new_filename, $file))
    {
      echo json_encode(array('success' => 1, 'error' => 0, 'original_filename' => $filename, 'new_filename' => $new_filename));
    }
    else
    {
      echo json_encode(array('success' => 0, 'error' => 'error writing file'));
      return false;
    }

Usage

  1. Click or drag a file into the dotted area to start the upload process.
  2. The file will be placed into the uploads folder and given a unique id to prevent naming collisions.

Browser Compatibility

IE10+, Firefox 4+, Safari 5+, Chrome 7+

Configuration Options

Examples of these options can be found in example.html

You can wire in a custom callback, to be called once the file has been successfully uploaded, an example of which can be found in the included example. It looks like this:

//Custom callback example
function responseCallback(response) {
  console.log(response);
}

$(function () {
  initUploader('example-1', 'example_post_handler.php', 'responseCallback');
});

To pre-load an existing file (in this case an image):

$(function () {
  initUploader('example-1', 'example_post_handler.php', 'responseCallback', '59cbcb7723def.jpg', 'example.png', '/uploads/');
});

License

neat-little-uploader is open-sourced software licensed under the MIT License.

Contact