FIX: Simplificar input de archivos para asegurar subida cross-browser
This commit is contained in:
Nachou-u
@@ -129,23 +129,23 @@
|
||||
<div class="form-group" style="margin-bottom: 1.5rem; background: #f8fafc; padding: 1.5rem; border-radius: 6px; border: 1px solid var(--efintel-border);">
|
||||
<label style="font-weight: 600; font-size: 0.85rem; color: var(--efintel-petroleum); display:flex; align-items:center; gap:0.3rem; margin-bottom: 0.75rem;"><i data-lucide="paperclip" style="width:14px;"></i> Evidencias Adjuntas (Boletas / Facturas)</label>
|
||||
|
||||
<!-- Drag and Drop Zone Container -->
|
||||
<div id="drop-zone" style="border: 2px dashed var(--efintel-blue); border-radius: 6px; padding: 2rem; text-align: center; background: white; cursor: pointer; transition: all 0.3s; margin-bottom: 0.75rem; display: flex; flex-direction: column; align-items: center; justify-content: center;">
|
||||
<i data-lucide="upload-cloud" style="width: 36px; height: 36px; color: var(--efintel-blue); margin-bottom: 0.5rem; transition: transform 0.3s;"></i>
|
||||
<p style="margin: 0; font-size: 0.85rem; font-weight: 600; color: var(--efintel-petroleum);">Arrastre sus boletas/facturas aquí o haga clic para buscar</p>
|
||||
<span style="font-size: 0.7rem; color: var(--efintel-gray); display: block; margin-top: 0.25rem;">Formatos aceptados: PDF, PNG, JPG, JPEG (Múltiple)</span>
|
||||
</div>
|
||||
|
||||
<!-- Hidden native input (Visually hidden for Safari compatibility) -->
|
||||
<div style="width: 0; height: 0; overflow: hidden; opacity: 0; position: absolute; z-index: -1;">
|
||||
<!-- Simple & Reliable File Upload -->
|
||||
<div style="margin-bottom: 0.75rem;">
|
||||
<label for="id_receipt" style="display:block; font-size: 0.85rem; font-weight: 600; color: var(--efintel-petroleum); margin-bottom: 0.5rem;">
|
||||
Adjuntar Evidencia(s) (Boleta / Factura)
|
||||
</label>
|
||||
<div style="border: 2px dashed var(--efintel-blue); border-radius: 6px; padding: 1.5rem; background: #f8fafc;">
|
||||
{{ form.receipt }}
|
||||
<div style="margin-top: 0.5rem; font-size: 0.7rem; color: var(--efintel-gray);">
|
||||
Formatos aceptados: PDF, PNG, JPG, JPEG. Puede seleccionar múltiples archivos manteniendo presionada la tecla Ctrl (o Cmd en Mac).
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Live Queue files list -->
|
||||
<div id="new-files-list" style="margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem;"></div>
|
||||
|
||||
{% if form.receipt.errors %}<div style="color: var(--efintel-danger); font-size: 0.75rem; margin-top: 4px;">{{ form.receipt.errors }}</div>{% endif %}
|
||||
|
||||
|
||||
{% if form.instance.pk and form.instance.documents.all %}
|
||||
<div style="margin-top: 1.25rem; border-top: 1px solid #e2e8f0; padding-top: 0.75rem;">
|
||||
<strong style="font-size: 0.8rem; color: var(--efintel-petroleum); display: block; margin-bottom: 0.5rem;">Documentos Adjuntos Actuales:</strong>
|
||||
@@ -612,186 +612,6 @@
|
||||
});
|
||||
}
|
||||
|
||||
// Client-side Upload File Deletion Queue using DataTransfer + Drag and Drop
|
||||
const fileInput = document.getElementById('id_receipt');
|
||||
const newFilesList = document.getElementById('new-files-list');
|
||||
const dropZone = document.getElementById('drop-zone');
|
||||
|
||||
if (fileInput && newFilesList && dropZone) {
|
||||
let dt = new DataTransfer();
|
||||
|
||||
// Clicking the drop zone triggers the hidden file input
|
||||
dropZone.addEventListener('click', () => {
|
||||
fileInput.click();
|
||||
});
|
||||
|
||||
// Highlight drop zone on drag hover
|
||||
['dragenter', 'dragover'].forEach(eventName => {
|
||||
dropZone.addEventListener(eventName, (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
dropZone.style.border = '2px dashed var(--efintel-blue)';
|
||||
dropZone.style.background = 'var(--efintel-light)';
|
||||
const icon = dropZone.querySelector('i');
|
||||
if (icon) icon.style.transform = 'scale(1.2)';
|
||||
}, false);
|
||||
});
|
||||
|
||||
['dragleave', 'drop'].forEach(eventName => {
|
||||
dropZone.addEventListener(eventName, (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
dropZone.style.border = '2px dashed var(--efintel-blue)';
|
||||
dropZone.style.background = 'white';
|
||||
const icon = dropZone.querySelector('i');
|
||||
if (icon) icon.style.transform = 'scale(1)';
|
||||
}, false);
|
||||
});
|
||||
|
||||
// Handle dropped files
|
||||
dropZone.addEventListener('drop', (e) => {
|
||||
const files = e.dataTransfer.files;
|
||||
if (files.length > 0) {
|
||||
for (let i = 0; i < files.length; i++) {
|
||||
const f = files[i];
|
||||
// Validate file type before putting in queue (extensions: pdf, png, jpg, jpeg)
|
||||
const ext = f.name.split('.').pop().toLowerCase();
|
||||
if (['pdf', 'png', 'jpg', 'jpeg'].includes(ext)) {
|
||||
dt.items.add(f);
|
||||
} else {
|
||||
Swal.fire({
|
||||
icon: 'error',
|
||||
title: 'Archivo no permitido',
|
||||
text: `El archivo "${f.name}" no es una evidencia válida (PDF, PNG, JPG, JPEG).`,
|
||||
confirmButtonColor: 'var(--efintel-blue)'
|
||||
});
|
||||
}
|
||||
}
|
||||
fileInput.files = dt.files;
|
||||
renderNewFiles();
|
||||
}
|
||||
});
|
||||
|
||||
// Handle standard file selection
|
||||
fileInput.addEventListener('change', () => {
|
||||
let hasError = false;
|
||||
for (let i = 0; i < fileInput.files.length; i++) {
|
||||
const f = fileInput.files[i];
|
||||
const ext = f.name.split('.').pop().toLowerCase();
|
||||
if (['pdf', 'png', 'jpg', 'jpeg'].includes(ext)) {
|
||||
dt.items.add(f);
|
||||
} else {
|
||||
hasError = true;
|
||||
Swal.fire({
|
||||
icon: 'error',
|
||||
title: 'Archivo no permitido',
|
||||
text: `El archivo "${f.name}" no es una evidencia válida (PDF, PNG, JPG, JPEG).`,
|
||||
confirmButtonColor: 'var(--efintel-blue)'
|
||||
});
|
||||
}
|
||||
}
|
||||
fileInput.files = dt.files;
|
||||
renderNewFiles();
|
||||
|
||||
// Si hubo error, resetear el input nativo temporalmente para evitar que se envíe el archivo inválido
|
||||
if (hasError && dt.files.length === 0) {
|
||||
fileInput.value = '';
|
||||
}
|
||||
});
|
||||
|
||||
function renderNewFiles() {
|
||||
newFilesList.innerHTML = '';
|
||||
|
||||
if (dt.files.length > 0) {
|
||||
const header = document.createElement('strong');
|
||||
header.style.fontSize = '0.75rem';
|
||||
header.style.color = 'var(--efintel-blue)';
|
||||
header.style.display = 'block';
|
||||
header.style.marginBottom = '0.35rem';
|
||||
header.textContent = 'Archivos en cola para subir:';
|
||||
newFilesList.appendChild(header);
|
||||
}
|
||||
|
||||
Array.from(dt.files).forEach((file, index) => {
|
||||
const row = document.createElement('div');
|
||||
row.style.display = 'flex';
|
||||
row.style.justifyContent = 'space-between';
|
||||
row.style.alignItems = 'center';
|
||||
row.style.background = 'var(--efintel-light)';
|
||||
row.style.padding = '0.45rem 0.75rem';
|
||||
row.style.borderRadius = '4px';
|
||||
row.style.fontSize = '0.75rem';
|
||||
row.style.border = '1px solid var(--efintel-border)';
|
||||
row.style.marginBottom = '0.3rem';
|
||||
|
||||
// File Detail Info with preview
|
||||
const infoWrapper = document.createElement('div');
|
||||
infoWrapper.style.display = 'flex';
|
||||
infoWrapper.style.alignItems = 'center';
|
||||
infoWrapper.style.gap = '0.5rem';
|
||||
|
||||
// Check file extension
|
||||
const ext = file.name.split('.').pop().toLowerCase();
|
||||
if (['png', 'jpg', 'jpeg'].includes(ext)) {
|
||||
// Render image thumbnail
|
||||
const img = document.createElement('img');
|
||||
img.src = URL.createObjectURL(file);
|
||||
img.style.width = '24px';
|
||||
img.style.height = '24px';
|
||||
img.style.objectFit = 'cover';
|
||||
img.style.borderRadius = '3px';
|
||||
img.style.border = '1px solid #cbd5e1';
|
||||
img.onload = () => URL.revokeObjectURL(img.src); // Free memory
|
||||
infoWrapper.appendChild(img);
|
||||
} else if (ext === 'pdf') {
|
||||
// Render PDF file icon
|
||||
const pdfIcon = document.createElement('span');
|
||||
pdfIcon.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>`;
|
||||
infoWrapper.appendChild(pdfIcon);
|
||||
} else {
|
||||
const defaultIcon = document.createElement('span');
|
||||
defaultIcon.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--efintel-blue)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path></svg>`;
|
||||
infoWrapper.appendChild(defaultIcon);
|
||||
}
|
||||
|
||||
const nameSpan = document.createElement('span');
|
||||
nameSpan.style.color = 'var(--efintel-petroleum)';
|
||||
nameSpan.style.fontWeight = '600';
|
||||
nameSpan.textContent = `${file.name} (${(file.size / 1024).toFixed(1)} KB)`;
|
||||
infoWrapper.appendChild(nameSpan);
|
||||
row.appendChild(infoWrapper);
|
||||
|
||||
const deleteBtn = document.createElement('button');
|
||||
deleteBtn.type = 'button';
|
||||
deleteBtn.style.background = 'none';
|
||||
deleteBtn.style.border = 'none';
|
||||
deleteBtn.style.color = 'var(--efintel-danger)';
|
||||
deleteBtn.style.cursor = 'pointer';
|
||||
deleteBtn.style.padding = '0.2rem';
|
||||
deleteBtn.style.display = 'flex';
|
||||
deleteBtn.style.alignItems = 'center';
|
||||
deleteBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>`;
|
||||
|
||||
deleteBtn.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
const newDt = new DataTransfer();
|
||||
for (let i = 0; i < dt.files.length; i++) {
|
||||
if (i !== index) {
|
||||
newDt.items.add(dt.files[i]);
|
||||
}
|
||||
}
|
||||
dt = newDt;
|
||||
fileInput.files = dt.files;
|
||||
renderNewFiles();
|
||||
});
|
||||
row.appendChild(deleteBtn);
|
||||
|
||||
newFilesList.appendChild(row);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Toggle logic for unregistered vendor inputs
|
||||
const toggleNewVendor = document.getElementById('toggle-new-vendor');
|
||||
const newVendorFields = document.getElementById('new-vendor-fields');
|
||||
const originalVendorSelect = document.getElementById('id_vendor');
|
||||
|
||||
Reference in New Issue
Block a user