Avatar Upload

var uploader = new MultipleUpload(el, {
 uploadUrl: '/api/upload',
 accept: 'image/*',
 maxFiles: 1,
 autoUpload: true,
 onFileAdded: 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();
});

A single-image control

maxFiles: 1 with accept: 'image/*' is the whole configuration. Selecting a new image replaces the previous one rather than adding to a queue, which is the behaviour a profile picture wants.

Crop where the user can see it

Avatars are displayed in a fixed shape, usually a circle, and a photo that is not square will be cropped by something eventually. Doing it in the browser with a visible crop box lets the person choose what is kept; leaving it to CSS means the top of their head is removed by a rule nobody chose.