Cómo subir archivos arrastrando y soltando mediante DropzoneJS y PHP

Si quieres subir archivos arrastrándolos desde tu equipo y soltándolos en tu sitio web, este tutorial puede que te resulte de gran ayuda. Puedes implementar esta funcionalidad siguiente esta pequeña guía, y lo tendrás funcionando en menos que canta un gallo.

Mediante DropzoneJS y PHP podemos implementar una subida de ficheros en nuestro servidor, en la que los usuarios puedan arrastrar y soltar las imágenes y demás archivos en nuestra página. DropzoneJS es una librería open source que te proporciona la funcionalidad “drag'n drop” y además, es capaz de hacerte una preview de las imágenes subidas. Es una librería ligera y no tiene dependencias (como jQuery). Lo que no hace DropzoneJS es subirte los archivos al servidor. Para ello utilizaremos PHP. Es decir, con PHP subiremos los archivos al servidor e insertaremos la información en nuestra base de datos.

Necesitaremos dos archivos de la librería de Dropzone: dropzone.js y dropzone.css. Puedes descargarte estos dos ficheros de la página oficial de DropzoneJS. También puedes obtener estos ficheros del paquete descargable.

• Crea una carpeta js e insertar el fichero dropzone.js dentro de ella
• Crea una carpeta css e insertar el fichero dropzone.css dentro de ella
• Crea una carpeta uploads para almacenar los archivos subidos
• Crea un fichero index.html para la vista de nuestra página
• Crea un fichero upload.php para gestionar la subida del fichero a nuestro hosting y la inserción del la información en la base de datos.

De ese modo, la estructura de ficheros debería parecerse a esto:

js
> dropzone.js
css
> dropzone.css
uploads
index.html
upload.php

Creación de la base de datos

Si quieres almacenar información sobre los ficheros que subas, debes crear una tabla en tu base de datos. Yo te propongo esta, muy sencilla y con muy pocos campos.

CREATE TABLE `files` (
    `id` int(11) NOT NULL AUTO_INCREMENT,
    `file_name` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
    `uploaded` datetime NOT NULL,
    PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

index.html

Incluimos los archivos de la librería de Dropzone.

<!-- Add Dropzone -->
<link rel="stylesheet" type="text/css" href="css/dropzone.css" />
<script type="text/javascript" src="js/dropzone.js"></script>

Solo necesitas abrir y cerrar un elemento de formulario de HTML y nada más. Eso sí, el tag <form> debe tener un action y una clase concretas. El action debe apuntar hacia el fichero php que se encargará de subir el archivo, y la clase debe ser dropzone, para que lo identifique la librería Dropzone.

<div class="image_upload_div">
    <form action="upload.php" class="dropzone">
    </form>
</div>

upload.php

Este fichero lo utilizaremos para subir el fichero e introducir su correspondiente información en la base de datos.

<?php
if(!empty($_FILES)){
    
    //database configuration
    $dbHost = 'localhost';
    $dbUsername = 'root';
    $dbPassword = '';
    $dbName = 'prueba';
    //connect with the database
    $conn = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);
    if($mysqli->connect_errno){
        echo "Failed to connect to MySQL: (" . $mysqli->connect_errno . ") " . $mysqli->connect_error;
    }
    
    $targetDir = "uploads/";
    $fileName = $_FILES['file']['name'];
    $targetFile = $targetDir.$fileName;
    
    if(move_uploaded_file($_FILES['file']['tmp_name'],$targetFile)){
        //insert file information into db table
        $conn->query("INSERT INTO files (file_name, uploaded) VALUES('".$fileName."','".date("Y-m-d H:i:s")."')");
    }
    
}
?>

Fuente: codexworld.com