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

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();

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>


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.
data-download or download false Set this option to true if you want to let users download their cropped image.
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>


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.



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