En este artículo, veremos cómo implementar una subida de imágenes utilizando DropzoneJS. Esta librería permite al usuario subir archivos mediante la función drag&drop, es decir, arrastrar y soltar. Además, mediante esta librería los usuarios podrán seleccionar los archivos en su equipo que más tarde se subirán a Dropzone. Dicho esto, vamos a ver cómo subir imágenes a tu sitio web con DropzoneJS.
En este ejemplo, crearemos una zona donde soltar los ficheros que el usuario quiera subir inicializando la librería DropzoneJS. La ruta de la imagen que se suva se almacenará en la base de datos. En este ejemplo también he agregado funciones CRUD para gestionar la información de las imágenes subidas. La tabla de la base de datos image_info contendrá los campos ID, la ruta de la imagen donde se almacena fisicamente el fichero y la fecha y hora de cuándo se subió.
Tabla image_info
El siguiente script SQL nos servirá para la tabla image_info, en donde almacenaremos la información de la subida de imágenes de los usuarios, y donde realizaremos las posteriores operaciones CRUD.
CREATE TABLE IF NOT EXISTS `images_info` ( `image_id` int(11) NOT NULL, `image_name` varchar(200) NOT NULL, `image_path` varchar(200) NOT NULL, `date` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (`image_id`) ) ENGINE=InnoDB AUTO_INCREMENT=26 DEFAULT CHARSET=utf8;
Subir una nueva imagen a través de Dropzone
En el siguiente código vamos a ver cómo crear una zona de subida (dropzone) con la referencia de un elemento del formulario HTML. Para ello he incluido la librería DropzoneJS y el CSS para crear la interfaz en donde el usuario pueda subir imágenes. La URL del action del formulario HTML la asignaremos a los eventos del elemento Dropzone. En el caso de que se suelte una imagen en nuestra zona satisfactoriamente, se llamrá al action del formulario el cual ejecutará el script PHP de subida de imágenes. Después de subir la imagen al directorio concreto, agregaremos la ruta del archivo a la base de datos.
<?php
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'];
if (move_uploaded_file($tempFile, $targetFile)) {
echo "true";
} else {
echo "false";
}
}
if (! empty($_GET["action"]) && $_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>
<head>
<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>
</head>
<body>
<form name="frmImage" action="image-add.php?action=save"
class="dropzone"></form>
<div class="btn-menu">
<a href="index.php" class="link">Back to List</a>
</div>
</body>
</html>
Listar imágenes de la base de datos
El siguiente código nos servirá para extraer registros de la base de datos de imágenes. Cada fila podrá ser editada y eliminada mediante iconos.
<?php
require_once ("db.php");
$sql = "SELECT * FROM images_info ORDER BY image_id DESC";
$result = mysqli_query($conn, $sql);
?>
<html>
<head>
<title>Images List</title>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
</head>
<body>
<form name="frmImage" method="post" action="">
<div>
<div class="message"><?php if(isset($message)) { echo $message; } ?></div>
<div class="btn-menu" align="right"
style="padding-bottom: 5px;">
<a href="image-add.php" class="link">Add Image</a>
</div>
<table border="0" cellpadding="10" cellspacing="1"
width="100%" class="tblListForm">
<tr class="listheader">
<td>Image Path</td>
<td>Added at</td>
<td>Action</td>
</tr>
<?php
$i = 0;
while ($row = mysqli_fetch_array($result)) {
?>
<tr class="row">
<td><?php echo $row["image_path"]; ?></td>
<td width="25%"><?php echo date("d-m-Y", strtotime($row["date"])); ?></td>
<td width="20%"><a
href="image-edit.php?image_id=<?php echo $row["image_id"]; ?>"
class="link"><img alt='Edit' title='Edit'
src='icons/edit.png' class="action-icon" /></a>
<a
href="image-delete.php?image_id=<?php echo $row["image_id"]; ?>"
class="link"><img alt='Delete' title='Delete'
src='icons/delete.png' class="action-icon" /></a></td>
</tr>
<?php
$i ++;
}
?>
</table>
</form>
</div>
</body>
</html>
Editar una imagen existente del Dropzone
En este código, veremos el HTML necesario para mostrar una preview de la imagen existente y también para mostrar el dropzone, donde agregaremos nuestro botón de añadir una nueva imagen. A la vez que se sube una nueva imagen, eliminaremos la antigua de la base de datos.
<?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($image[image_path])) {
echo ("Error deleting $image");
} else {
echo ("Deleted $image");
}
} else {
echo "false";
}
}
if (! empty($_GET["action"]) && $_GET["action"] == "save") {
$sql = "UPDATE images_info SET 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"] . "'";
$result = 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>
</head>
<body>
<div class="box-preview">
<img src="<?php echo $row["image_path"]; ?>" />
<div class="preview-footer"><?php echo $row["image_path"]; ?></div>
</div>
<form name="frmImage"
action="image-edit.php?action=save&image_id=<?php echo $_GET['image_id']?>"
class="dropzone"></form>
<div class="btn-menu">
<a href="index.php" class="link">Back to List</a>
</div>
</body>
</html>
Y así es como se eliminaría un registro existente.
<?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:index.php");
?>