Skip to content
The image/avatar uploader you always dreamed of
JavaScript CSS
Branch: master
Clone or download
danharper Merge pull request #3 from 40thieves/master
Fixes bug where original image not replaced by upload form on IE9
Latest commit 6229223 Jul 14, 2014
Type Name Latest commit message Commit time
Failed to load latest commit information.
LICENSE.txt release Jan 15, 2014 release Jan 15, 2014
avatar.css release Jan 15, 2014
avatar.js Fixes bug where original image not replaced by upload form on IE9 Jul 14, 2014
demo.html links Jan 15, 2014
placekitten.jpg release Jan 15, 2014
usage.html links Jan 15, 2014

Avatar Upload

by Dan Harper


1. Include Files

Include the avatar.js and avatar.css files in your document.

2. Wrap a Replacable Image

Insert the current image (or a placeholder) in the page, inside a div with a custom class (eg. avatar-upload):

<div class="avatar-upload">
    <img src="placekitten.jpg">

3. Set your max images widths

You must set a max width, otherwise images will fill the container. eg.

.avatar-upload {
    width: 200px;
    height: 200px;

.avatar-upload img {
    max-width: 200px;
    max-height: 200px;

4. Boot the module

Now boot the module, providing it with the element containing the image to replace & the URL to upload to.

new AvatarUpload({
    el: document.querySelector('.avatar-upload'),
    uploadUrl: ''

This will swap the contents of your .avatar-upload element with the uploader's markup. The image currently set won't appear any different. But you can now click the image to swap it out!

You can optionally provide the following configuration settings to the module:

  • el [required] The element containing the current replaceable image
  • uploadUrl [required] Where to sent the new image to
  • uploadMethod The HTTP method to use when uploading (defaults to POST)
  • uploadData An object of additional data to send with the upload
  • onProgress A function to be called continuously as the upload progresses - takes one argument, the current upload percentage completion
  • onSuccess A function to be called when the upload completes successfully - takes one argument, the response from the server
  • onError A function to be called when the upload fails - takes one argument, the error response from the server
  • pretentUpload If true, no upload will be performed, it will be faked through a setInterval, pretending to upload - useful for testing initial set up


Kitten image in demo courtesy of Paul Reynolds via placekitten

You can’t perform that action at this time.