All Image Upload From Dropzone Using Php
PHP Prototype Upload Using DropzoneJs
by Vincy. Concluding modified on May 26th, 2021.
In this commodity, I volition walk you through to implement prototype upload using DropzoneJS. It provides a prissy and flexible interface information technology to the user. It allows the user to upload files by using drag and drop.
Also, it allows the users to explore the files and folders for choosing files to be uploaded via Dropzone. Beneath, nosotros are going to meet an case code for uploading images via DropzoneJS using PHP.
In this example, we have created image driblet zone by initializing the DropzoneJS library. The uploaded image path will be stored in the database. I added CRUD actions in this example to manage the uploaded paradigm information in the database.
The database table image_info contains columns to store the motorcar-generated unique epitome id, image path where it is uploaded and the date/time when it is added.
This screenshot shows the edit form with the existing image preview and a Dropzone to let the user upload the new epitome to supersede the existing one.
Database Table image_info
The following SQL script is used to create theimage_info database tabular array before getting started with the Dropzone image upload and its Grime actions.
I have given the complete SQL script which is to be imported while setting this instance code in your development environment.
CREATE TABLE IF NOT EXISTS `images_info` ( `image_id` int(11) Non NULL, `image_name` varchar(200) NOT Nix, `image_path` varchar(200) Not NULL, `appointment` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (`image_id`) ) ENGINE=InnoDB AUTO_INCREMENT=26 DEFAULT CHARSET=utf8;
Upload and Add together New Image via Dropzone
The following code shows the HTML for creating dropzone with the reference of an HTML form element. In this code, I included the DropzoneJs and the CSS to create the user interface for uploading images.
The HTML class activeness URL is mapped to the events of the Dropzone chemical element. On successful prototype file drop event, the form action URL will exist chosen to execute the PHP file upload script. Later on uploading the image to the folder and so the file path is added to the database.
<?php if (! empty($_FILES)) { $imagePath = isset($_FILES["file"]["name"]) ? $_FILES["file"]["proper noun"] : "Undefined"; $targetPath = "uploads/"; $imagePath = $targetPath . $imagePath; $tempFile = $_FILES['file']['tmp_name']; $targetFile = $targetPath . $_FILES['file']['name']; if (move_uploaded_file($tempFile, $targetFile)) { echo "true"; } else { echo "false"; } } if (! empty($_GET["activeness"]) && $_GET["action"] == "save") { require_once ("db.php"); print $sql = "INSERT INTO images_info (image_path) VALUES ('" . $imagePath . "')"; mysqli_query($conn, $sql); $current_id = mysqli_insert_id($conn); } ?> <html> <caput> <title>Add New Image</title> <link rel="stylesheet" type="text/css" href="css/styles.css" /> <link rel="stylesheet" type="text/css" href="dropzone/dropzone.css" /> <script type="text/javascript" src="dropzone/dropzone.js"></script> </caput> <body> <form name="frmImage" action="image-add.php?action=save" course="dropzone"></form> <div grade="btn-menu"> <a href="index.php" class="link">Back to List</a> </div> </body> </html> List Paradigm Data from Database
The following lawmaking is used to fetch the MySQL database table result to list the image information. Each row of image information will take the edit/delete action icons to handle the update and the delete actions.
<?php require_once ("db.php"); $sql = "SELECT * FROM images_info ORDER Past image_id DESC"; $result = mysqli_query($conn, $sql); ?> <html> <caput> <title>Images Listing</title> <link rel="stylesheet" type="text/css" href="css/styles.css" /> </head> <trunk> <form name="frmImage" method="post" action=""> <div> <div class="message"><?php if(isset($message)) { repeat $message; } ?></div> <div class="btn-bill of fare" align="right" style="padding-bottom: 5px;"> <a href="image-add.php" class="link">Add Image</a> </div> <table border="0" cellpadding="x" cellspacing="1" width="100%" class="tblListForm"> <tr form="listheader"> <td>Prototype Path</td> <td>Added at</td> <td>Action</td> </tr> <?php $i = 0; while ($row = mysqli_fetch_array($outcome)) { ?> <tr class="row"> <td><?php echo $row["image_path"]; ?></td> <td width="25%"><?php echo date("d-m-Y", strtotime($row["engagement"])); ?></td> <td width="20%"><a href="epitome-edit.php?image_id=<?php repeat $row["image_id"]; ?>" class="link"><img alt='Edit' championship='Edit' src='icons/edit.png' course="action-icon" /></a> <a href="prototype-delete.php?image_id=<?php repeat $row["image_id"]; ?>" class="link"><img alt='Delete' title='Delete' src='icons/delete.png' grade="action-icon" /></a></td> </tr> <?php $i ++; } ?> </table> </form> </div> </body> </html> Edit Existing Epitome Dropzone
In this lawmaking, I show the HTML for showing the preview of the existing epitome and to display dropzone with the reference of the edit grade form aspect equally we have done with theAdd activeness.
While uploading the existing image, the old prototype will be cleared from the database and from the target folder.
<?php require_once ("db.php"); $imagePath = ""; if (! empty($_FILES)) { $imagePath = isset($_FILES["file"]["name"]) ? $_FILES["file"]["name"] : "Undefined"; $targetPath = "uploads/"; $imagePath = $targetPath . $imagePath; $tempFile = $_FILES['file']['tmp_name']; $targetFile = $targetPath . $_FILES['file']['name']; $selectQuery = "select image_path from images_info where image_id='" . $_GET["image_id"] . "'"; $resultSelectQuery = mysqli_query($conn, $selectQuery); $image = mysqli_fetch_array($resultSelectQuery, MYSQLI_ASSOC); if (move_uploaded_file($tempFile, $targetFile)) { if (! unlink($paradigm[image_path])) { echo ("Mistake deleting $image"); } else { echo ("Deleted $epitome"); } } else { echo "simulated"; } } if (! empty($_GET["activeness"]) && $_GET["action"] == "save") { $sql = "UPDATE images_info Fix image_path ='" . $imagePath . "' WHERE image_id ='" . $_GET["image_id"] . "'"; mysqli_query($conn, $sql); $message = "Record Modified Successfully"; } $select_query = "SELECT * FROM images_info WHERE image_id='" . $_GET["image_id"] . "'"; $upshot = mysqli_query($conn, $select_query); $row = mysqli_fetch_assoc($result); ?> <html> <head> <title>Edit Image</title> <link rel="stylesheet" type="text/css" href="css/styles.css" /> <link rel="stylesheet" type="text/css" href="dropzone/dropzone.css" /> <script type="text/javascript" src="dropzone/dropzone.js"></script> </caput> <trunk> <div grade="box-preview"> <img src="<?php echo $row["image_path"]; ?>" /> <div course="preview-footer"><?php repeat $row["image_path"]; ?></div> </div> <course name="frmImage" action="image-edit.php?action=save&image_id=<?php echo $_GET['image_id']?>" course="dropzone"></class> <div class="btn-menu"> <a href="index.php" course="link">Back to List</a> </div> </body> </html> And the code to delete the existing image record also will articulate the database tape and also the file from the folder by using PHP unlink() function.
<?php require_once ("db.php"); if (isset($_GET["image_id"])) { $imageId = $_GET["image_id"]; } $sql = "DELETE FROM images_info WHERE image_id='" . $imageId . "'"; mysqli_query($conn, $sql); header("Location:alphabetize.php"); ?> Download
↑ Back to Acme
Source: https://phppot.com/php/php-image-upload-using-dropzonejs/
Post a Comment for "All Image Upload From Dropzone Using Php"