Ajax Drag and Drop Image/File Upload Using DropzoneJS, PHP

muni 06:19 Leave a Comment
In this tutorial we are going to see how to Ajax Drag and Drop Image/File Upload Using DropzoneJS, PHP & jQuery.

Demo Ajax Image Upload DropzoneJS

Also refer this tutorial on
Ajax Image Upload Using Dropzone.js with Normal Form Fields On Button Click Using PHP


Step 1:

 Create new project called "dropzone-tutorial" in your server root either htdocs/www folder. Next create index.html file in it. Now copy paste the following html snippet in your index.html file.
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Ajax Image Upload Using Dropzone.js with Normal Form Fields On Button Click Using PHP</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.css">
</head>
<body>

    <div class="container mt-2">
        <div class="row">
            <div class="col-md-6 offset-md-3">
                <h1 class="text-center">Image Upload</h1>
                <form action="ajax.php" class="dropzone" id="my-awesome-dropzone"></form>
            </div>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.js"></script>
</body>
</html>

Download Image/File Upload Using DropzoneJS, PHP Script
Step 2: File/Upload Using PHP
Now write logic to handle the file upload by DropzoneJS via ajax. Next Create ajax.php file, then copy and paste below PHP scripts in it to handle the file/image upload logic. 
<?php
/**
 * PHP Image uploader Script
 */
try {
    $uploaddir = './uploader/';
    //create directory if not exists
    if (!file_exists($uploaddir)) {
        mkdir($uploaddir, 0777, true);
    }

    //Check real file exists
    if (!empty($_FILES['file']['name'])) {
        $image = $_FILES['file'];
        $data = [];
        $name = $image['name'];
        $uploadfile = $uploaddir . basename($name);
        if (move_uploaded_file($image['tmp_name'], $uploadfile)) {
            $data[$key]['success'] = true;
            $data[$key]['src'] = $name;

        } else {
            $data[$key]['success'] = false;
            $data[$key]['src'] = $name;
        }
        echo json_encode($data);exit;
    }
} catch(Exception $e) {
    throw new Exception($e->message);
}

0 comments:

Post a Comment