Dropzone JS Archives - AtCodex: Empowering Your Financial Journey & Personal Well-Being https://atcodex.com/tag/dropzone-js/ Achieve financial success without sacrificing well-being! AtCodex provides actionable strategies for managing money, time, and personal growth—all in one place. Sat, 28 Aug 2021 17:15:16 +0000 en-US hourly 1 https://wordpress.org/?v=7.0 https://atcodex.com/wp-content/uploads/2020/05/cropped-New-Project-1-32x32.png Dropzone JS Archives - AtCodex: Empowering Your Financial Journey & Personal Well-Being https://atcodex.com/tag/dropzone-js/ 32 32 Drag and Drop Multiple File Upload using Dropzone JS and PHP https://atcodex.com/php/drag-and-drop-multiple-file-upload-using-dropzone-js-and-php/ Mon, 10 Aug 2020 18:36:02 +0000 https://atcodex.com/?p=698 DropzoneJS provide us the functionality to upload multiple files with drag and drop option. It is an open-source library that is easy to use. In this post, we will show …

The post Drag and Drop Multiple File Upload using Dropzone JS and PHP appeared first on AtCodex: Empowering Your Financial Journey & Personal Well-Being.

]]> DropzoneJS provide us the functionality to upload multiple files with drag and drop option. It is an open-source library that is easy to use.

In this post, we will show you how easily you can upload the file by just drag and drop, using dropzone js and PHP.

We need DropzoneJS library and simple PHP upload function to upload the file on destination folder.

In the below example you will learn the use of dropzone js.

Step 1 : Create index.php File

First you need to create an index.php file with the following code.

<!DOCTYPE html>
<html>
<head>
    <title>Drag and Drop File Upload using Dropzone JS and PHP - Atcodex.com</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/min/dropzone.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.2.0/min/dropzone.min.js"></script>
</head>
<body>

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h2>Drag and Drop File Upload using Dropzone JS and PHP - Atcodex.com</h2>
            <form action="fileUpload.php" enctype="multipart/form-data" class="dropzone" id="image-upload">
                <div>
                    <h3>Drag and Drop File</h3>
                </div>
            </form>
        </div>
    </div>
</div>

<script type="text/javascript">
    Dropzone.options.imageUpload = {
        maxFilesize:1,
        acceptedFiles: ".jpeg,.jpg,.png,.gif"
    };
</script>

</body>
</html>

Step 2 : Create fileUpload.php File

Next, you need to create fileUpload.php file in with the following code, which basically files uploading PHP code.

<?php

$directoryName = 'imageFolder';   // folder name where image need to be uploaded

if (!empty($_FILES)) {
 $tmpFile = $_FILES['file']['tmp_name'];
 $filename = $directoryName.'/'.time().'-'. $_FILES['file']['name'];
 move_uploaded_file($tmpFile,$filename);
}

?>

Step 3 : Create imageFolder folder

In the final step, you need to create imageFolder folder to store the images. You can give it a different name also.

Now you can run the code in localhost. below is the demo of the code.

Demo

Also you can check jQuery ajax image upload in PHP with preview

The post Drag and Drop Multiple File Upload using Dropzone JS and PHP appeared first on AtCodex: Empowering Your Financial Journey & Personal Well-Being.

]]>