Drop Anywhere on the Page

With data-mode="overlay" the whole window becomes the target. An overlay fades in as soon as files are dragged over the page, so nobody has to aim at a small box. Dragging text or a link is ignored.

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

data-mode=overlayMultipleFilesUploadMaxSizeKB

Live demo

Drop files anywhere on this page

or click here to browse

Try it: start dragging a file over any part of this page — the overlay appears and you can release it wherever you like.

dropzone-overlay.php

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

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

<div class="upl-dropzone" data-uploader="myuploader" data-mode="overlay">
    <p class="upl-dropzone__title">Drop files anywhere on this page</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

Drop Anywhere on the Page