Avatar Upload

Circular avatar upload with instant preview. Click the avatar circle to select a new profile image.

Click to change avatar

var uploader = new MultipleUpload(el, {
 uploadUrl: '/api/upload',
 accept: 'image/*',
 maxFiles: 1,
 autoUpload: true,
 onQueueAdd: function(task) {
 // Show preview immediately
 var reader = new FileReader();
 reader.onload = function(e) {
 avatarImg.src = e.target.result;
 };
 reader.readAsDataURL(task.file);
 }
});

// Click avatar to trigger file selection
avatar.addEventListener('click', function() {
 uploader.openFileDialog();
});