archivos_dropzone.php

 

Estructura General

Es un componente de interfaz para subir archivos adjuntos a una solicitud, usando la librería Dropzone.js.

Partes del Código:

1. Encabezado y Descripción

html

<div class="mb-4">
    <h5>Subir Archivos</h5>
    <p class="text-muted">Puedes subir documentos relacionados con esta solicitud (PDF, Word, imágenes).</p>

• mb-4: Margen inferior

• Texto explicativo para el usuario

2. Verificación de Archivo Existente

php

<?php if (!empty($solicitud['archivo'])): ?>
    <div class="alert alert-success mb-4">
        <i class="bi bi-check-circle"></i> Actualmente hay un archivo adjunto:
        <a href="uploads/<?= htmlspecialchars($prefolio) ?>/<?= htmlspecialchars($solicitud['archivo']) ?>" 
           target="_blank" class="file-link d-block mt-2">
            <i class="bi bi-file-earmark"></i> <?= htmlspecialchars($solicitud['archivo']) ?>
        </a>
    </div>
<?php else: ?>
    <div class="alert alert-warning">
        <i class="bi bi-exclamation-triangle"></i> No hay archivos adjuntos a esta solicitud.
    </div>
<?php endif; ?>

• Si hay archivo: Muestra alerta verde con enlace al archivo

• Si no hay archivo: Muestra alerta amarilla de advertencia

• htmlspecialchars(): Previene ataques XSS

• El archivo se guarda en: uploads/[prefolio]/[nombre_archivo]

3. Formulario Dropzone

html

<form action="?prefolio=<?= htmlspecialchars($prefolio) ?>" class="dropzone" id="fileDropzone" method="post" enctype="multipart/form-data">
    <div class="dz-message">
        Arrastra archivos aquí o haz clic para subir<br>
        <span class="note">(Se aceptan PDF, Word, imágenes - Máximo 5MB)</span>
    </div>
</form>

• dropzone: Clase que activa la librería Dropzone.js

• action: URL donde se enviará el archivo, incluyendo el parámetro prefolio

• enctype="multipart/form-data": Necesario para subida de archivos

4. Información Adicional

html

<div class="alert alert-info mt-3">
    <i class="bi bi-lightbulb"></i> Al subir un nuevo archivo, reemplazarás el archivo existente (si hay uno).
</div>

• Informa al usuario que subir un nuevo archivo reemplazará el existente

Variables PHP Utilizadas:

• $solicitud['archivo']: Nombre del archivo adjunto actual

• $prefolio: Identificador único de la solicitud

Características de Seguridad:

• XSS protection: Uso de htmlspecialchars()

• Ruta específica: Archivos organizados por prefólio

• Tipos limitados: Solo acepta PDF, Word e imágenes

• Tamaño máximo: 5MB por archivo

Este componente proporciona una interfaz moderna y amigable para la gestión de archivos adjuntos en el sistema.

<div class="mb-4">

    <h5>Subir Archivos</h5>

    <p class="text-muted">Puedes subir documentos relacionados con esta solicitud (PDF, Word, imágenes).</p>

   

    <?php if (!empty($solicitud['archivo'])): ?>

        <div class="alert alert-success mb-4">

            <i class="bi bi-check-circle"></i> Actualmente hay un archivo adjunto a esta solicitud:

            <a href="uploads/<?= htmlspecialchars($prefolio) ?>/<?= htmlspecialchars($solicitud['archivo']) ?>"

               target="_blank" class="file-link d-block mt-2">

                <i class="bi bi-file-earmark"></i> <?= htmlspecialchars($solicitud['archivo']) ?>

            </a>

        </div>

    <?php else: ?>

        <div class="alert alert-warning">

            <i class="bi bi-exclamation-triangle"></i> No hay archivos adjuntos a esta solicitud.

        </div>

    <?php endif; ?>

   

    <form action="?prefolio=<?= htmlspecialchars($prefolio) ?>" class="dropzone" id="fileDropzone" method="post" enctype="multipart/form-data">

        <div class="dz-message">

            Arrastra archivos aquí o haz clic para subir<br>

            <span class="note">(Se aceptan PDF, Word, imágenes - Máximo 5MB)</span>

        </div>

    </form>

   

    <div class="alert alert-info mt-3">

        <i class="bi bi-lightbulb"></i> Al subir un nuevo archivo, reemplazarás el archivo existente (si hay uno).

    </div>

</div>