Avatar Upload

Avatar / Profile Picture Upload

Upload a profile picture with a circular preview. The selected image is shown in a round crop frame before uploading, simulating a typical avatar picker.

No photo

Drag & drop files here, or paste from clipboard

<au:AjaxFileUpload ID="Uploader1" runat="server"
    AllowMultiple="false"
    CropAspectRatio="1"
    AllowedExtensions=".jpg,.jpeg,.png,.webp"
    MaxFileSize="5242880"
    AutoUpload="true" />

// JavaScript API approach
AjaxUploader.create(el, {
    uploadUrl: '/ajaxupload.axd/upload',
    multiple: false,
    allowedExtensions: '.jpg,.jpeg,.png,.webp',
    maxFileSize: 5 * 1024 * 1024,
    autoUpload: true,
    onSelect: function (file) {
        var reader = new FileReader();
        reader.onload = function (e) {
            avatarCircle.innerHTML = '<img src="' + e.target.result + '">';
        };
        reader.readAsDataURL(file);
    }
});