A minimalistic HTML5 image uploader for use with JQuery
JavaScript CSS PHP
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
.gitignore
LICENSE
README.md
example.html
post_handler.php

README.md

jquery-html5-image-uploader

A minimalistic HTML5 drag-and-drop image uploader for use with JQuery.

This is what it looks like.

View this in pages.

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/style.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/code.js"></script>
  4. Place the following code where you'd like the uploader interface to appear on your page:

    <div class="filedrag" style="width: 500px;">
      <label class="filedrag-filename"></label>
      <img class="filedrag-preview" src="/img/placeholder.gif">
      <div class="filedrag-droparea">drop image (or click)</div>
      <div class="filedrag-progress"></div>
      <input type="file" class="filedrag-input" id="file-input" name="file-input">
    </div>
  5. Initialize the uploader:

    $(function () {
      initUploaders('post_handler.php');
    });
  6. Implement server-side post handling. Here's an example of how this is achieved in PHP:

    <?php
    
    $filename = (isset($_SERVER['HTTP_X_FILENAME']) ? $_SERVER['HTTP_X_FILENAME'] : false);
    $file = file_get_contents('php://input');
    $type = "image/" . $parameters['filetype'];
    
    if(file_put_contents(__DIR__ . '/uploads/' . $filename, $file)) {
      echo json_encode(array('success' => 1, 'error' => 0));
    }
    else { echo json_encode(array('success' => 0, 'error' => 'error writing file')); }

Usage

  1. Click on, or drag an image into, the dotted area to start the upload process. A preview will be visible while the image uploads.
  2. The image will be placed into the uploads folder.

Browser Compatibility

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

Configuration Options

...are fairly limited at this point.

You can wire in a custom callback, to be called once the image has 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 () {
  initUploaders('post_handler.php', 'responseCallback');
});

Contact