martuanez / HTML5-ImageUploader

An Image upload and client-side resize javascript library using only HTML5 APIs

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

== HTML5 Image Uploader Readme ==

The primary goal of this project is ImageUploader.js, a javascript module which can perform client-side resizing of images and uploads to a remote server using only HTML5 features (e.g. the Canvas and FileReader APIs).

For demonstration purposes this is packaged with a Java web application with a RESTful service to handle the uploaded images. This is an Apache Maven project, use "mvn clean install" to build the webapp and "mvn jetty:run" to run the app on localhost:8080

== Usage ==

Create a new ImageUploader, passing in a javascript object hash of config, e.g.

var uploader = new ImageUploader(config);

Where config must contain the following properties:

'inputElement' - A file-type input element

'uploadUrl' - The URL to POST uploaded images to

And may contain the following optional properties:

'maxWidth' - An integer in pixels for the maximum width allowed for uploaded images, selected images with a greater width than this value will be scaled down before upload.

'quality' - A float between 0 and 1.00 for the image quality to use in the resulting image data, around 0.9 is recommended.

'timeout' - A number in milliseconds specifying the maximum time to wait for file uploads to finish, after which they will be aborted.

'debug' - A boolean flag to show the images in a <div> on the containing page before upload.

'workspace' - An element within which images are appended before upload (when 'debug' is set to true)

'onProgress' - A function which is invoked on upload progress, with a single argument of an object containing the following:
total - The total number of images selected for upload
done - The number of images uploaded so far
currentItemTotal - The number of bytes to be uploaded for the currently uploading image
currentItemDone - The total number of bytes to upload for the current image

'onFileComplete' - A function invoked on completion of uploading each selected image which is passed two arguments, the first is the event object from the XmlHttpRequest, and the second if the corresponding File object from the input element

'onComplete' - A function invoked on completion of all images being uploaded (passed no arguments)

About

An Image upload and client-side resize javascript library using only HTML5 APIs

License:Other


Languages

Language:JavaScript 65.7%Language:HTML 25.9%Language:Java 8.4%