Avatar Drop Zone with Preview

A round target for a single picture. The thumbnail is drawn from the dropped file itself, so it appears instantly rather than after the round trip, and dropping again replaces it.

Allowed file types: jpg, gif, png. Maximum file size: 10 MB.

data-preview=singleupl-dropzone--avatarAllowedFileExtensions

Live demo

Drop a photo

or click to browse

Try it: drop an image, or paste one with Ctrl+V — the preview is local, so it shows before the upload completes.

Working the way you need? Download the free trial or see licence pricing from $99.

dropzone-avatar.php

<?php
    require_once "phpuploader/include_phpuploader.php";

    $uploader = new PhpUploader();
    $uploader->Name = "myuploader";
    $uploader->MultipleFilesUpload = false;
    $uploader->MaxSizeKB = 10240;
    $uploader->AllowedFileExtensions = "jpeg,jpg,gif,png";
    $uploader->Render();
?>

<div class="upl-dropzone upl-dropzone--avatar"
     data-uploader="myuploader" data-preview="single">
    <p class="upl-dropzone__title">Drop a photo</p>
</div>
<link rel="stylesheet" href="/css/uploader-dropzone.css">
<script src="/js/uploader-dropzone.js"></script>

Guide Image upload and resize in PHP

Validate a real image, resize with GD, keep transparency, strip EXIF.

Reference API documentation

Every property and server-side event the component exposes.

Get started Download the free trial

The evaluation build ships with these samples and full source.

Pricing Licences from $99

Perpetual licence, free upgrades, no recurring fee. Domain, IP, team and enterprise.

Examples

Avatar Drop Zone with Preview