Avatar Upload

Single image upload with crop for user avatar/profile picture. Circular preview with aspect ratio lock.

What you should see: one image at a time (.jpg, 5 MB max) with a circular preview and a locked aspect ratio. Choosing a second image replaces the first rather than adding to a queue.

CoreUpload.create('#avatarUploader', {
 uploadUrl: '/api/upload/upload',
 allowedExtensions: '.jpg,.jpeg,.png,.webp',
 maxFileSize: 5 * 1024 * 1024,
 imagePreset: 'avatar',
 autoUpload: true,
 showProgress: true,
 buttonText: 'Upload Avatar',
 onTaskComplete: function(file, response) {
 // show the uploaded image in the circular preview
 }
});

A single-image control

One file, images only, replacing rather than accumulating — the behaviour a profile picture wants. Setting the count limit to one is what turns the queue into a picker.

Crop where the user can see it

Avatars are displayed in a fixed shape, usually a circle, and a non-square photo 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.