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.

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 Uploading multiple files in PHP

How the $_FILES array is shaped and how to process a batch safely.

Reference API documentation

Every property and server-side event the component exposes.

Get started Download the trial

The evaluation build ships with these samples and full source.

Examples

Avatar Drop Zone with Preview