Initial commit

frontend/js/upload.js

@@ -0,0 +1,105 @@
+// Upload functionality
+let selectedFile = null;
+
+const uploadArea = document.getElementById('upload-area');
+const fileInput = document.getElementById('file-input');
+const previewContainer = document.getElementById('preview-container');
+const previewImage = document.getElementById('preview-image');
+const statusMessage = document.getElementById('status-message');
+
+if (uploadArea && fileInput) {
+    uploadArea.addEventListener('click', () => fileInput.click());
+
+    uploadArea.addEventListener('dragover', (e) => {
+        e.preventDefault();
+        uploadArea.classList.add('dragover');
+    });
+
+    uploadArea.addEventListener('dragleave', () => {
+        uploadArea.classList.remove('dragover');
+    });
+
+    uploadArea.addEventListener('drop', (e) => {
+        e.preventDefault();
+        uploadArea.classList.remove('dragover');
+        const files = e.dataTransfer.files;
+        if (files.length > 0) {
+            handleFile(files[0]);
+        }
+    });
+
+    fileInput.addEventListener('change', (e) => {
+        if (e.target.files.length > 0) {
+            handleFile(e.target.files[0]);
+        }
+    });
+}
+
+function handleFile(file) {
+    selectedFile = file;
+    
+    if (file.type.startsWith('image/')) {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            previewImage.src = e.target.result;
+            previewContainer.style.display = 'block';
+        };
+        reader.readAsDataURL(file);
+    } else if (file.type === 'application/pdf') {
+        previewImage.src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0iI2VjZjBmMSIvPjx0ZXh0IHg9IjUwJSIgeT0iNTAlIiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMTgiIGZpbGw9IiM3ZjhjOGQiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGR5PSIuM2VtIj5QREY8L3RleHQ+PC9zdmc+';
+        previewContainer.style.display = 'block';
+    }
+}
+
+async function uploadFile() {
+    if (!selectedFile) return;
+    
+    const formData = new FormData();
+    formData.append('archivo', selectedFile);
+    
+    statusMessage.style.display = 'none';
+    const btn = document.querySelector('.btn-upload');
+    if (btn) {
+        btn.disabled = true;
+        btn.textContent = 'Subiendo...';
+    }
+    
+    try {
+        const response = await fetch(`${API_CONFIG.BASE_URL}/albaranes/upload/`, {
+            method: 'POST',
+            body: formData
+        });
+        
+        if (!response.ok) {
+            const error = await response.json().catch(() => ({ detail: 'Error desconocido' }));
+            throw new Error(error.detail || `Error ${response.status}`);
+        }
+        
+        const data = await response.json();
+        
+        statusMessage.className = 'status-message success';
+        statusMessage.textContent = 'Albarán subido y procesado correctamente';
+        statusMessage.style.display = 'block';
+        
+        // Reset
+        setTimeout(() => {
+            selectedFile = null;
+            fileInput.value = '';
+            previewContainer.style.display = 'none';
+            statusMessage.style.display = 'none';
+            if (btn) {
+                btn.disabled = false;
+                btn.textContent = 'Subir Albarán';
+            }
+        }, 3000);
+    } catch (error) {
+        statusMessage.className = 'status-message error';
+        statusMessage.textContent = 'Error al subir el albarán: ' + error.message;
+        statusMessage.style.display = 'block';
+        if (btn) {
+            btn.disabled = false;
+            btn.textContent = 'Subir Albarán';
+        }
+    }
+}
+