Se agregaron las funcionalidades de subir eventos e imagenes en carga masiva

2025-10-01 15:21:02 -06:00
parent 509ff4255a
commit 8f2ee27711
1 changed files with 141 additions and 4 deletions
@@ -1,7 +1,144 @@
-export default function CargaMasivaBanner() {
+"use client";
+
+import React, { useState } from "react";
+import axios from "axios";
+import { Image } from "react-bootstrap";
+
+//Para poder subir las imagenes
+interface UploadedImage {
+    originalName: string;
+    filename: string;
+    path: string;
+}
+
+export default function BannerUpload() {
+    const [files, setFiles] = useState<File[]>([]);
+    const [loading, setLoading] = useState(false);
+    const [uploaded, setUploaded] = useState<UploadedImage[]>([]);
+    const [progress, setProgress] = useState(0);
+
+    const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        if (e.target.files) {
+        setFiles(Array.from(e.target.files));
+        }
+    };
+
+    const handleUpload = async () => {
+        if (files.length === 0) {
+        alert("Selecciona al menos un archivo");
+        return;
+        }
+
+        const formData = new FormData();
+        files.forEach((file) => {
+        formData.append("banners", file);
+        });
+
+        try {
+        setLoading(true);
+        setProgress(0);
+
+        const res = await axios.post("/cuestionario/banners/bulk", formData, {
+            headers: { "Content-Type": "multipart/form-data" },
+            onUploadProgress: (progressEvent) => {
+            if (progressEvent.total) {
+                setProgress(
+                Math.round((progressEvent.loaded * 100) / progressEvent.total)
+                );
+            }
+            },
+        });
+
+        setUploaded(res.data);
+        alert("Banners subidos correctamente ✅");
+        setFiles([]);
+        } catch (error) {
+        console.error(error);
+        alert(error || "Error al subir archivos");
+        } finally {
+        setLoading(false);
+        }
+    };
+
    return (
-        <div>
-            Hola mundo
+        <div className="p-6 max-w-2xl mx-auto bg-white rounded-xl shadow-md">
+            <h2 className="text-2xl font-bold mb-4 text-gray-800">Subir Banners</h2>
+
+            {/* Área Drag & Drop */}
+            <label className="flex flex-col items-center justify-center w-full h-40 border-2 border-dashed border-gray-400 rounded-lg cursor-pointer hover:border-blue-500 transition">
+                <span className="text-gray-500">Arrastra o haz clic para subir</span>
+                <input
+                type="file"
+                multiple
+                accept=".jpg,.jpeg,.png,.webp"
+                onChange={handleFileChange}
+                className="hidden"
+                />
+            </label>
+
+            {/* Falta corregir el tamaño de la imagen */}
+            {/* Previsualización de imágenes */}
+            {files.length > 0 && (
+                <div className="grid grid-cols-3 gap-4 mt-4">
+                {files.map((file, i) => (
+                    <div
+                    key={i}
+                    className="relative border rounded-lg overflow-hidden shadow-sm"
+                    style={{ width: "350px", height: "350px" }}
+                    >
+                    <Image
+                        src={URL.createObjectURL(file)}
+                        alt={file.name}
+                        className="w-full h-28 object-cover"
+                    />
+                    <p className="text-xs text-center truncate p-1">{file.name}</p>
+                    </div>
+                ))}
+                </div>
+            )}
+
+            {/* Botón Subir */}
+            <button
+                onClick={handleUpload}
+                disabled={loading}
+                className="w-full mt-4 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition disabled:opacity-50"
+            >
+                {loading ? "Subiendo..." : "Subir Banners"}
+            </button>
+
+            {/* Barra de progreso */}
+            {loading && (
+                <div className="w-full bg-gray-200 rounded-full h-3 mt-3">
+                    <div
+                        className="bg-blue-600 h-3 rounded-full"
+                        style={{ width: `${progress}%` }}
+                    ></div>
+                </div>
+            )}
+
+            {/* Archivos subidos */}
+            {uploaded.length > 0 && (
+                <div className="mt-6">
+                    <h3 className="font-semibold mb-2 text-gray-700">Archivos subidos:</h3>
+                    <ul className="space-y-1">
+                        {uploaded.map((file, i) => (
+                        <li
+                            key={i}
+                            className="flex justify-between items-center text-sm bg-gray-100 px-3 py-2 rounded"
+                        >
+                            <span>{file.originalName}</span>
+                            <a
+                            href={`/${file.path}`}
+                            target="_blank"
+                            className="text-blue-600 hover:underline"
+                            >
+                            Ver
+                            </a>
+                        </li>
+                        ))}
+                    </ul>
+                </div>
+            )}
        </div>
    );
-}
+}