# HTML5 Image upload with drag & drop, crop & ratio

> HTML 5 Image upload uses the feature of HTML 5 and file handling. The requirments for using this tool are jQuery 1.9.x or higher and the use of Twitter Bootstrap.

Download this plugin at Code Canyon!

Basic usage
Form
Preview image
Server image
Ghosting & Original size
Retrieving filename
Sizing and CSS
Options list
Buttons list
Callback functions
Browser support
Frequently asked questions
Change log

## Basic usage

The basic usage of the HTML 5 Image upload is to write the HTML code below and assign the JavaScript class to the element. The code can be used on a single element as well as multiple elements.

HTML + CSS

    <div class="dropzone" data-width="960" data-height="540" data-resize="true" data-url="canvas.php" style="width: 100%;">
      <input type="file" name="thumb" />
    </div>

Javascript

    $('.dropzone').html5imageupload();

## BETA Smaller

The basic usage of the HTML 5 Image upload is to write the HTML code below and assign the JavaScript class to the element. The code can be used on a single element as well as multiple elements.

HTML + CSS

    <div class="dropzone" data-width="960" data-height="540" data-resize="true" data-url="canvas.php" style="width: 100%;">
      <input type="file" name="thumb" />
    </div>

Javascript

    $('.dropzone').html5imageupload();

Responsive

Not responsive

## Responsive

If you want the plugin to be responsive, add `data-resize` = `true`. That way, the plugin will resize with the window and when a mobile device changes orientation. When this option is not added, after initializing the plugin, it will not change width or height.

HTML + CSS

    <div class="dropzone" data-width="960" data-height="540" data-resize="true" data-url="canvas.php" style="width: 100%;">
      <input type="file" name="thumb" />
    </div>

Javascript

    $('.dropzone').html5imageupload();

Name
Title
Image

## Form

You can also use HTML5 Image upload with a form and let it submit the image when you submit the form. Depending if you use the `canvas` option or not, the file will be posted as a base64 encoded string or as an input file element (in PHP, it will be in the `$_FILES` variable).

If you want the form to be blocked (prevent submitting) when the image is not selected (or when the user is still in edit mode), use the `required="required"` attribute on the input field.

HTML + CSS

    <form>
      <div class="dropzone" data-width="960" data-ajax="false" data-height="540" style="width: 100%;">
        <input type="file" name="thumb" required="required" />
      </div>
    </form>

Javascript

    <script src="assets/js/html5imageupload.js"></script>
    <script>$('.dropzone').html5imageupload();</script>

## Download usage

If you want a download link so people can download the cropped image after they are done, set `data-download` = `true`.

HTML + CSS

    <div class="dropzone" data-width="960" data-height="540" data-resize="true" data-url="canvas.php" style="width: 100%;">
      <input type="file" name="thumb" />
    </div>

Javascript

    $('.dropzone').html5imageupload();

## Preview

Want to preview an image you are using in your CMS, use the `image` option. You can also add the `removeurl` option to make AJAX calls to the server to remove uploaded images. The variables that will be given in the call `$_POST['name']` with the image source.

HTML + CSS

    <form>
      <div class="dropzone" data-width="960" data-originalsize="false" data-url="canvas.php" data-height="540" style="width: 100%;"  data-image="/assets/images/preview.jpg" data-removeurl="/your_remove_image_script.html">
        <input type="file" name="thumb" />
      </div>
    </form>

Javascript

    <script src="assets/js/html5imageupload.js"></script>
    <script>$('.dropzone').html5imageupload();</script>

## Server image

It is possible you already have the needed images on your server and you only need to crop them. With the added option of `image` and setting `editstart` the user can directly start editting an existing image on your server. Also, if the image is on your server and you don't want the use uploading the cropped image onto your server again, you could just send only the dimensions to your server. Use `dimensionsonly` to achive this.

HTML + CSS

    <form>
      <div class="dropzone" data-width="960" data-originalsize="false" data-height="540" data-url="canvas.php" style="width: 100%;"  data-image="/assets/images/preview.jpg"  data-editstart="true" data-dimensionsonly="true">
        <input type="file" name="thumb" />
      </div>
    </form>

Javascript

    <script src="assets/js/html5imageupload.js"></script>
    <script>$('.dropzone').html5imageupload();</script>

## Ghosting & Original size

If you prefer to have no ghosting image shown, use the `ghost` option and set it to `false` (default is `true`).

The selected image from the input can be much bigger then needed, to make sure that the user can see the whole image when starting cropping, use `originalsize`. This will resize the image just a little bit bigger then the image preview (default is `true`).

HTML + CSS

    <form>
      <div class="dropzone" data-width="960" data-ghost="false" data-canvas="false" data-originalsize="false" data-height="540" data-url="canvas.php" style="width: 100%;">
        <input type="file" name="thumb" />
      </div>
    </form>

Javascript

    <script src="assets/js/html5imageupload.js"></script>
    <script>$('.dropzone').html5imageupload();</script>

## Retrieving filename

If you want to receive the filename/location of the image after processing it, just use the custom functions to do so. Here is an example for getting the file after it is uploaded.

HTML + CSS

    <div class="dropzone" data-width="960" data-height="540" data-url="canvas.php" style="width: 100%;">
      <input type="file" name="thumb" />
    </div>
    <input type="text" disabled name="filename" id="filename" class="form-control" />

Javascript

    $('.dropzone').html5imageupload({
    	onAfterProcessImage: function() {
    		$('#filename').val($(this.element).data('name'));
    	},
    	onAfterCancel: function() {
    		$('#filename').val('');
    	}
    });

## Modal dialog (Bootstrap JS)

If you want to use the plugin in a modal dialog, use the javascript below to let it load after the dialog is opened.

HTML + CSS

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-body">
            <div id="modaldialog" class="html5imageupload" data-resize="true" data-width="960" data-height="540" data-url="canvas.php" style="width: 100%;">
           	  <input type="file" name="thumb" />
            </div>
          </div>
        </div>
      </div>
    </div>

Javascript

    $( "#myModal" ).on('shown.bs.modal', function(){
    	$('#modaldialog').html5imageupload();
    });

## Sizes and CSS

### Pure CSS

When using pure CSS, you have to set the `width` and `height`! Otherwise the script doesn't know what the dimensions of the image are. You can use both pixels (`px`) or percentage (`%`).Not that resizing the window does not resize that imagepreview (will be build in later).

### Using options

Use the `width` and `height` option to set the size of the element. You need to set both in order for the script to know the dimensions.

### Mix and mingle

You can use the css `width` and `height` together with the `width` and `height` options, you can set the element. The important thing is that you use the same ratio, so if you choose a full HD image, ratio 16:9, the CSS should be also in that ratio. It's possible to use you one CSS element, `width` or `height`. HTML5 Upload image will calculate the missing element with the correct ratio.

HTML + CSS

    <form>
      <div class="dropzone" data-originalsize="false" data-url="canvas.php" style="width: 200px; height: 400px;">
        <input type="file" name="thumb" />
      </div>
    </form>

HTML + CSS

    <form>
      <div class="dropzone" data-width="300" data-height="300" data-originalsize="false" data-url="canvas.php">
        <input type="file" name="thumb" />
      </div>
    </form>

HTML + CSS

    <form>
      <div class="dropzone" data-width="1920" data-height="1080" data-originalsize="false" data-url="canvas.php" style="height: 200px;">
        <input type="file" name="thumb" />
      </div>
    </form>

### Incorrect use of the sizes

When the sizes are used incorrectly, an error message will be shown.

HTML + CSS

    <form>
      <div class="dropzone" data-width="1920" data-height="1080" data-originalsize="false" data-url="upload.php" style="width: 600px; height: 300px;">
        <input type="file" name="thumb" />
      </div>
    </form>

Download this plugin at Code Canyon!

## Options list

Below are all the options that can be given with the plugin. The options can be given via the `data-` attribute of the chosen element or within the javascript declaration.

Important to know is that the options set with the `data-` attribute are prior to the options that are declared in JavaScript.

Option | Default | Description
--- | --- | ---
`data-width` or `width` | - | The width of the image in pixels
`data-height` or `height` | - | The height of the image in pixels
`data-url` or `url` | - | The url where to send the data when using AJAX to save the image.
`data-ajax` or `ajax` | `true` | Set this to `false` to use a form to save the image. When using the `data-canvas="true"` option, the data will be set in a input field. The name of the base64 encoded image is `data`, the whole field is json encoded, containing the width and height of the original image, the width and height of the final image and the left en top position of the crop that needs to be made.
`data-canvas` or `canvas` | `true` | Set this to `false` when you want to save the image with a serverside script. When `true` the data send to the server will be cropped and ready to be saved in a file. The data of the image is base64 encoded and is json encoded.
`data-originalsize` or `originalsize` | `true` | With this option the picked image by the uploader will apear in the original size or already resized to fill the element. Set `false` to let it resize.
`data-ghost` or `ghost` | `true` | This will show a ghost of the image outside the border of the element, to let the user know what he is cropping. Set `false` to hide this.
`data-image` or `image` | - | This will let you preview an image you already have on your server.
`data-removeurl` or `removeurl` | - | When given this url, everytime the user will upload an image and then clicks the trashcan, the url gets called so you can remove the image. This way your server doesn't get filled up with "tmp" images the user made. Also, when providing `data-image`, when the user clicks the trashcan, the url gets called so you can remove the preview image.
`data-dimensionsonly` or `dimensionsonly` | `false` | This option will let you `$_POST` only the dimensions and not the image source. Use this option if you only want the user to post dimensions, for example when you have the original image already stored on your server.
`data-editstart` or `editstart` | `false` | When you provide `data-image` you can let users start editing the image immediately
`data-save-original` or `save-original` | `false` | Set this option to `true` if you want to save the original image and the cropped one. You need to edited your saving scripts also!
`data-resize` or `resize` | `false` | Set this option to `true` if you want the plugin to change size when you resize your window or when a mobile device orientation is changed.
NEW `data-download` or `download` | `false` | Set this option to `true` if you want to let users download their cropped image.
NEW `data-save` or `save` | `true` | Set this option to `false` if you don't want the image to be saved and handle it yourself with your own function (use `onSave`, se below)
`data` | `{}` | The data option can only be filled within the javascript. It's a object that you can add when the image is saving via AJAX. The object will be added in with the `POST` call of the AJAX request.

HTML example

    <div class="dropzone" data-width="1920" data-height="1080" data-ghost="false" data-url="upload.php">
      <input type="file" name="thumb" />
    </div>

Javascript example

    <script>$('.dropzone').html5imageupload({width: 1920, height: 1080, ghost: false, url: 'upload.php', data: {customValue: 'here'}});</script>

## Buttons list

There have been requests for hiding buttons in the editor. You can achive this with CSS, but now i have made a change that you can do this with the (example) `data-button-edit` attribute (also the `buttonEdit`). The only thing you have to do, to not display the button, is set it to `false`!

Below a list of possible buttons.

Button | Data attribute | Option | CSS | Description
--- | --- | --- | --- | ---
| `data-button-edit` | `buttonEdit` | `.dropzone .btn-edit` | Edit an existing image (when providing `data-image`)
| `data-button-zoomin` | `buttonZoomin` | `.dropzone .btn-zoom-in` | Zooming in on the image in the editor
| `data-button-zoomout` | `buttonZoomout` | `.dropzone .btn-zoom-out` | Zooming out on the image in the editor
| `data-button-reset` | `buttonReset` | `.dropzone .btn-reset` | Reseting the image to the original size, same size as when selecting the image (so when `data-originalsize` = `false` it will be the smaller size, fitting the element)
| `data-button-cancel` | `buttonCancel` | `.dropzone .btn-cancel` | Canceling the uploaded image and reseting the uploader.
| `data-button-done` | `buttonDone` | `.dropzone .btn-done` | Crop the image to the selected dimensions. When hiding this button, you cannot crop the image!
| `data-button-del` | `buttonDel` | `.dropzone .btn-del` | "Deleting" the preview image or the image when done cropping. No actual deleting is done, only when using `data-removeurl` is set to a script removing an image.

## Callback functions

There are several callback functions implemented in the plugin. You can use them in the JavaScript. The argument that we give to each callback is the plugin itself (`this`). Within the object, you can all the image (`this.image`), the element (`this.element`) and the input (`this.input`).

Callback | Description
--- | ---
`onAfterInitImage` | When the script has been initialized and the element is turned into the plugin.
`onAfterZoomImage` | When zooming the image
`onAfterMoveImage` | After draging the image
`onAfterResetImage` | When users reset the image to starting size.
`onAfterProcessImage` | Triggers after the user click on done button (green button) and after uploading via AJAX (when options is set).
`onAfterCancel` | When users clicks reset button (red button).
`onAfterRemoveImage` | When removing an image (clicking the delete button and making the ajax call)
`onSave` | When `data-save` = `false`, you can push your own function to process the data that would otherwise be send to the server. Set `data` as argument of your function and you will be able to handle the following data: {name, imageOriginalWidth, imageOriginalHeight, imageWidth, imageHeight, width, height, left, top, data (this is de base64 image)}

Javascript example

    <script>
    $('.dropzone').html5imageupload({
    	onAfterInitImage: function(this) {
    		console.log(this);
    	}
    });
    </script>

Download this plugin at Code Canyon!

## Browser support

Because this plugin heavely leans on the HTML5 file api, it only works with HTML5 browsers. At this point, we tested the plugin on pc and mac with these results

PC (Microsoft Windows 7+) | Mac (Mac OS X Lion+)
--- | ---
Firefox | Chrome | Internet Explorer | Opera | Safari | Safari | Firefox
3.6+ | 13+ | 10+ | 12+ | Not working | 6+ | 7+
|  | On click event not working in IE10 on input / drag field. Dragging image works. |  | Only supported with version 6 and above, the windows version of Safari ended with version 5.1 | Only supported with version 6 and above. You need OS X Lion or higher to get Safari version 6 or higher. |

## Not supported browsers

When a user try to use the plugin in a unsupported browser, the following message will show.

HTML5 Upload Image: Sadly.. this browser does not support the plugin, update your browser today!

### Mobile / Tablet support

NOW SUPPORTED! (21 november 2014)

Tested on iPad with iOS 8.1 (8.0 will not work! This is because Apple has forgotten to add the file API in safari!).

Tested on Android 4.4

## Frequently asked questions

### The image quality of the canvas worse then the original?

> Canvas doesn't use any kind of anti-aliasing when resizing an image. There are multiple custom solutions you can use for this problem and implement it in a callback function. http://lmgtfy.com/?q=canvas+image+quality+html5

### Can you make ... addition or ... change or available for mobile / tablet

> If there is a great interest for a new functionality, i will consider making it. When i start working on it, i will announce it here first.

Download this plugin at Code Canyon!

## Change log

UPDATE: jan. 24

New Download button
New Force not saving and pushing your own save function

UPDATE: nov. 21

Improvement Script is working with tablet and phone!
New Resize option added for responsive design

UPDATE: nov. 17

New Save original option added

UPDATE: oct. 20

Bugfix Input required will remain after deleting image

UPDATE: oct. 13

Improvement Saving button show directly when clicking
Improvement Mimetype on toDataURL
Improvement Hide buttons with data-button-edit = false
Improvement Set save text with data-save-label = "Saving"
Improvement Documentation
Bugfix Background text not hidding with transparent PNG
Bugfix Wrong script usage in demo

UPDATE: oct. 6

New Server image
New POST only dimensions
Improvement Buttons all have own CSS label for your own implementation

UPDATE: sept. 25

New Preview image
New Image remove server request
Improvement Better error response
Improvement PHP script examples
Bugfix `ajax``=false` not removing editor
Bugfix double image with canvas