Avatar Uploader

Grab the Source! by Dan Harper.


Click the image to replace it.


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: