wagtail-enap-designsystem 1.2.1.195__tar.gz → 1.2.1.196__tar.gz

{wagtail_enap_designsystem-1.2.1.195/wagtail_enap_designsystem.egg-info → wagtail_enap_designsystem-1.2.1.196}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: wagtail-enap-designsystem
-Version: 1.2.1.195
+Version: 1.2.1.196
 Summary: Módulo de componentes utilizado nos portais ENAP, desenvolvido com Wagtail + CodeRedCMS
 Author: Renan Campos
 Author-email: renan.oliveira@enap.gov.br

{wagtail_enap_designsystem-1.2.1.195 → wagtail_enap_designsystem-1.2.1.196}/enap_designsystem/blocks/form.py

@@ -1312,7 +1312,7 @@ class FormularioPage(Page):
         return super().serve(request, *args, **kwargs)
 
     def process_form_submission(self, request):
-        """Processa os dados do formulário"""
+        """Processa os dados do formulário com suporte para múltiplos arquivos"""
         form_data = {}
         files_data = {}  # ← Separar arquivos dos dados
         
@@ -1327,21 +1327,49 @@ class FormularioPage(Page):
                 
                 # PROCESSAR UPLOAD DE ARQUIVOS SEPARADAMENTE
                 if block.block_type == 'file_upload_field':
-                    if field_id in request.FILES:
-                        uploaded_file = request.FILES[field_id]
-                        
-                        # Salvar informações do arquivo (não o arquivo em si) no form_data
-                        form_data[field_id] = {
-                            'filename': uploaded_file.name,
-                            'size': uploaded_file.size,
-                            'content_type': uploaded_file.content_type,
-                        }
+                    # Verificar se é um campo que aceita múltiplos arquivos
+                    is_multiple = block.value.get('multiple_files', False)
+                    
+                    if is_multiple:
+                        # O nome do campo no HTML tem [] anexado
+                        field_id_arr = f"{field_id}[]"
+                        # Usar getlist para pegar todos os arquivos
+                        uploaded_files = request.FILES.getlist(field_id_arr)
                         
-                        # Salvar arquivo real em files_data para processamento
-                        files_data[field_id] = uploaded_file
+                        if uploaded_files:
+                            # Lista para metadados de múltiplos arquivos
+                            files_info = []
+                            
+                            # Processar cada arquivo
+                            for i, uploaded_file in enumerate(uploaded_files):
+                                # Metadados do arquivo
+                                file_info = {
+                                    'filename': uploaded_file.name,
+                                    'size': uploaded_file.size,
+                                    'content_type': uploaded_file.content_type,
+                                }
+                                files_info.append(file_info)
+                                
+                                # Cada arquivo tem sua própria chave
+                                files_data[f"{field_id}_{i}"] = uploaded_file
+                            
+                            # Armazenar a lista com todos os metadados
+                            form_data[field_id] = files_info
+                    else:
+                        # Código original para campo com um único arquivo
+                        if field_id in request.FILES:
+                            uploaded_file = request.FILES[field_id]
+                            
+                            form_data[field_id] = {
+                                'filename': uploaded_file.name,
+                                'size': uploaded_file.size,
+                                'content_type': uploaded_file.content_type,
+                            }
+                            
+                            files_data[field_id] = uploaded_file
                     continue
                 
-                # Processar outros tipos de campo
+                # O restante do código permanece igual
                 if block.block_type == 'checkbox_multiple_field':
                     values = request.POST.getlist(field_id)
                     if values:
@@ -1351,7 +1379,7 @@ class FormularioPage(Page):
                     if value:
                         form_data[field_id] = value
         
-        # Validar dados obrigatórios
+        # O restante da função permanece igual
         errors = self.validate_form_data(form_data, request)
         if errors:
             context = self.get_context(request)
@@ -1359,23 +1387,12 @@ class FormularioPage(Page):
             context['form_data'] = form_data
             return render(request, self.get_template(request), context)
         
-        # Salvar submissão
         submission = self.save_form_submission(form_data, files_data, request)
-        
-        # 📧 ENVIAR EMAILS COM SIMPLEEEMAILSERVICE
         email_results = self.send_emails_with_service(form_data, submission)
         
-        # Log dos resultados
-        logger.info(f"Submissão {submission.id} processada. Emails: {email_results}")
-
-        # Redirecionar com status dos emails
-        success_url = f'{request.path}?success=1'
-        if email_results.get('user_sent'):
-            success_url += '&email_sent=1'
-        if email_results.get('admin_sent'):
-            success_url += '&admin_notified=1'
-            
-        return redirect(success_url)
+        logger.info(f"Submissão {submission.id} processada.")
+        # Redirecionar para página de sucesso
+        return redirect(self.url + '?success=1')
 
     def send_emails_with_service(self, form_data, submission):
         """Envia emails usando SimpleEmailService"""

{wagtail_enap_designsystem-1.2.1.195 → wagtail_enap_designsystem-1.2.1.196}/enap_designsystem/blocks/html_blocks.py

@@ -2444,14 +2444,14 @@ class ENAPNoticia(Page):
 		),
 	]
  
-	def save(self, *args, **kwargs):
-		if self.destaque_fixo:
-			self.desmarcar_destaques()
-		super().save(*args, **kwargs)
-
-	def desmarcar_destaques(self):
-		ENAPNoticia.objects.all().update(destaque_fixo=False)
-		self.destaque_fixo=True
+	# def save(self, *args, **kwargs):
+	# 	if self.destaque_fixo:
+	# 		self.desmarcar_destaques()
+	# 	super().save(*args, **kwargs)
+
+	# def desmarcar_destaques(self):
+	# 	ENAPNoticia.objects.all().update(destaque_fixo=False)
+	# 	self.destaque_fixo=True
         
 	@property
 	def titulo_filter(self):
@@ -2555,14 +2555,13 @@ class ENAPNoticia(Page):
 		return cls.objects.filter(
 			live=True,
 			destaque_fixo=True
-		).first()
+		).order_by('-date_display', '-first_published_at').first()
 
 	@classmethod
 	def get_noticias_normais(cls, limit=5):
 		"""Retorna outras notícias (sem a de destaque) ordenadas por data"""
 		return cls.objects.filter(
-			live=True,
-			destaque_fixo=False
+			live=True
 		).order_by('-date_display', '-first_published_at')[:limit]
 
 	@classmethod
@@ -2572,13 +2571,12 @@ class ENAPNoticia(Page):
 		depois as outras por ordem cronológica
 		"""
 		destaque = cls.get_noticia_destaque()
-		normais = cls.get_noticias_normais(limit - 1 if destaque else limit)
+		normais = list(cls.get_noticias_normais(limit))
 		
-		if destaque:
-			# Destaque primeiro, depois as normais
-			return [destaque] + list(normais)
-		else:
-			return list(normais)
+		if destaque and destaque in normais:
+			normais.remove(destaque)
+   
+		return [destaque] + normais if destaque else normais
 
 	search_fields = Page.search_fields + [
 		index.SearchField("title", boost=3),

{wagtail_enap_designsystem-1.2.1.195 → wagtail_enap_designsystem-1.2.1.196}/enap_designsystem/templates/enap_designsystem/form_templates/formulario_page.html

@@ -1843,20 +1843,14 @@ document.addEventListener('DOMContentLoaded', function() {
         }
         
         if (e.target.classList.contains('phone-field')) {
-            // Remove todos os caracteres não numéricos
             let value = e.target.value.replace(/[^\d]/g, '');
-            
-            // Formato com apenas espaços
             if (value.length <= 10) {
-                // Para telefones fixos (até 10 dígitos): XX XXXX XXXX
-                if (value.length > 2) {
-                    value = value.replace(/(\d{2})(\d{0,4})(\d{0,4})/, '$1 $2 $3').trim();
-                }
+                value = value.replace(/(\d{2})(\d)/, '$1 $2');
+                value = value.replace(/(\d{4})(\d)/, '$1 $2');
             } else {
-                // Para celulares (11 dígitos): XX XXXXX XXXX
-                value = value.replace(/(\d{2})(\d{0,5})(\d{0,4})/, '$1 $2 $3').trim();
+                value = value.replace(/(\d{2})(\d)/, '$1 $2');
+                value = value.replace(/(\d{5})(\d)/, '$1 $2');
             }
-            
             e.target.value = value;
         }
     });
@@ -1893,37 +1887,169 @@ document.addEventListener('DOMContentLoaded', function() {
 });
 
 // FUNÇÕES DE UPLOAD (mantém as existentes)
+// Variável global para armazenar arquivos
+const selectedFilesMap = new Map();
+
+// Função para atualizar o nome do arquivo
 function updateFileName(input) {
     const fieldId = input.id;
     const displayDiv = document.getElementById(`file-display-${fieldId}`);
     const errorDiv = document.getElementById(`file-error-${fieldId}`);
     const dropzone = document.getElementById(`dropzone-${fieldId}`);
     
+    // Inicializar o armazenamento para este campo se não existir
+    if (!selectedFilesMap.has(fieldId)) {
+        selectedFilesMap.set(fieldId, new DataTransfer());
+    }
+    
+    // Obter o armazenamento atual
+    let dataTransfer = selectedFilesMap.get(fieldId);
+    
+    // Limpar mensagens de erro
     errorDiv.style.display = 'none';
     errorDiv.textContent = '';
     
+    // Verificar novos arquivos
     if (input.files && input.files.length > 0) {
         const maxSize = parseInt(input.dataset.maxSize) * 1024 * 1024;
-        const file = input.files[0];
+        const maxFiles = parseInt(input.dataset.maxFiles || 5);
         
-        if (file.size > maxSize) {
-            errorDiv.textContent = `Arquivo excede ${input.dataset.maxSize}MB`;
+        // Verificar se excederia o limite de arquivos
+        if (dataTransfer.files.length + input.files.length > maxFiles) {
+            errorDiv.textContent = `Máximo de ${maxFiles} arquivo(s) permitido(s)`;
             errorDiv.style.display = 'block';
-            input.value = '';
             return;
         }
         
+        // Validar e adicionar cada novo arquivo
+        for (let i = 0; i < input.files.length; i++) {
+            const file = input.files[i];
+            
+            // Verificar tamanho
+            if (file.size > maxSize) {
+                errorDiv.textContent = `Arquivo "${file.name}" excede ${input.dataset.maxSize}MB`;
+                errorDiv.style.display = 'block';
+                continue;
+            }
+            
+            // Verificar se já existe um arquivo com esse nome
+            let fileExists = false;
+            for (let j = 0; j < dataTransfer.files.length; j++) {
+                if (dataTransfer.files[j].name === file.name) {
+                    fileExists = true;
+                    break;
+                }
+            }
+            
+            if (!fileExists) {
+                // Adicionar ao DataTransfer
+                dataTransfer.items.add(file);
+            }
+        }
+        
+        // Atualizar o campo de input com os arquivos acumulados
+        input.files = dataTransfer.files;
+    }
+    
+    // Atualizar a exibição dos arquivos
+    updateFilesDisplay(fieldId);
+}
+
+// Função para atualizar a exibição dos arquivos
+function updateFilesDisplay(fieldId) {
+    const displayDiv = document.getElementById(`file-display-${fieldId}`);
+    const input = document.getElementById(fieldId);
+    const dataTransfer = selectedFilesMap.get(fieldId);
+    
+    if (!dataTransfer || dataTransfer.files.length === 0) {
+        displayDiv.innerHTML = '';
+        displayDiv.style.display = 'none';
+        return;
+    }
+    
+    let html = '';
+    let totalSize = 0;
+    
+    // Criar HTML para cada arquivo
+    for (let i = 0; i < dataTransfer.files.length; i++) {
+        const file = dataTransfer.files[i];
+        totalSize += file.size;
+        
         const fileSize = (file.size / (1024 * 1024)).toFixed(2);
-        displayDiv.innerHTML = `
-            <div style="display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem; background: #f8f9fa; border-radius: 4px;">
-                <span>📎</span>
-                <span style="flex: 1;">${file.name}</span>
-                <span style="color: #666; font-size: 0.8rem;">${fileSize}MB</span>
-                <span style="color: #28a745;">✓</span>
+        const fileIcon = getFileIcon(file.name);
+        
+        html += `
+            <div class="file-item" style="display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem; background: #f8f9fa; border-radius: 4px; margin-bottom: 0.5rem;">
+                <span style="font-size: 1.2rem;">${fileIcon}</span>
+                <span style="flex: 1; overflow: hidden; text-overflow: ellipsis;">${file.name}</span>
+                <span style="color: #666; font-size: 0.8rem; white-space: nowrap;">${fileSize}MB</span>
+                <button type="button" class="remove-file-btn" 
+                        style="background: #dc3545; color: white; border: none; width: 24px; height: 24px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-weight: bold;"
+                        onclick="removeFile('${fieldId}', ${i})">×</button>
+            </div>
+        `;
+    }
+    
+    // Adicionar resumo para múltiplos arquivos
+    if (dataTransfer.files.length > 1) {
+        const totalSizeMB = (totalSize / (1024 * 1024)).toFixed(2);
+        html += `
+            <div style="text-align: right; margin-top: 5px; padding: 3px 8px; background: #f0f0f0; border-radius: 4px;">
+                <span style="font-size: 0.9rem; font-weight: 500;">${dataTransfer.files.length} arquivos (${totalSizeMB}MB total)</span>
             </div>
         `;
-        displayDiv.style.display = 'block';
     }
+    
+    // Atualizar o display
+    displayDiv.innerHTML = html;
+    displayDiv.style.display = 'block';
+}
+
+// Função para remover um arquivo específico
+function removeFile(fieldId, index) {
+    if (!selectedFilesMap.has(fieldId)) return;
+    
+    const dataTransfer = selectedFilesMap.get(fieldId);
+    const newDataTransfer = new DataTransfer();
+    
+    // Copiar todos os arquivos exceto o que deve ser removido
+    for (let i = 0; i < dataTransfer.files.length; i++) {
+        if (i !== index) {
+            newDataTransfer.items.add(dataTransfer.files[i]);
+        }
+    }
+    
+    // Atualizar a lista de arquivos
+    selectedFilesMap.set(fieldId, newDataTransfer);
+    
+    // Atualizar o campo input
+    const input = document.getElementById(fieldId);
+    input.files = newDataTransfer.files;
+    
+    // Atualizar a exibição
+    updateFilesDisplay(fieldId);
+}
+
+// Função para tratar o drop de arquivos
+function handleFileDrop(e, inputId) {
+    e.preventDefault();
+    e.stopPropagation();
+    
+    const input = document.getElementById(inputId);
+    const files = e.dataTransfer.files;
+    
+    // Criar uma cópia dos arquivos para o input
+    const tempTransfer = new DataTransfer();
+    for (let i = 0; i < files.length; i++) {
+        tempTransfer.items.add(files[i]);
+    }
+    
+    input.files = tempTransfer.files;
+    updateFileName(input);
+    
+    // Resetar visual
+    e.currentTarget.style.borderColor = '#C8D1E0';
+    e.currentTarget.style.background = '#f8f9fa';
 }
 
 function getFileIcon(filename) {

{wagtail_enap_designsystem-1.2.1.195 → wagtail_enap_designsystem-1.2.1.196}/enap_designsystem/templates/enap_designsystem/includes/form_field.html

@@ -1196,14 +1196,14 @@
                                 
                                 <input 
                                     type="file" 
-                                    id="{{ field_block.block_type }}_{{ field_block.id }}" 
-                                    name="{{ field_block.block_type }}_{{ field_block.id }}"
+                                    id="{{ block.block_type }}_{{ block.id }}" 
+                                    name="{{ block.block_type }}_{{ block.id }}"
                                     style="display: none;"
-                                    {% if field_block.value.required %}required{% endif %}
-                                    {% if field_block.value.multiple_files|default:False %}multiple{% endif %}
-                                    accept="{% for file_type in field_block.value.allowed_types %}{% if file_type == 'pdf' %}.pdf{% elif file_type == 'doc' %}.doc,.docx{% elif file_type == 'image' %}.jpg,.jpeg,.png,.gif{% elif file_type == 'excel' %}.xls,.xlsx{% elif file_type == 'text' %}.txt{% elif file_type == 'csv' %}.csv{% endif %}{% if not forloop.last %},{% endif %}{% endfor %}"
-                                    data-max-size="{{ field_block.value.max_size_mb }}"
-                                    {% if field_block.value.multiple_files|default:False %}data-max-files="{{ field_block.value.max_files|default:3 }}"{% endif %}
+                                    {% if block.value.required %}required{% endif %}
+                                    {% if block.value.multiple_files|default:False %}multiple{% endif %}
+                                    accept="..."
+                                    data-max-size="{{ block.value.max_size_mb }}"
+                                    {% if block.value.multiple_files|default:False %}data-max-files="{{ block.value.max_files|default:3 }}"{% endif %}
                                     onchange="updateFileName(this)"
                                 >
                                 
@@ -1971,7 +1971,7 @@
         <input 
             type="file" 
             id="{{ block.block_type }}_{{ block.id }}" 
-            name="{{ block.block_type }}_{{ block.id }}"
+            name="{{ block.block_type }}_{{ block.id }}{% if block.value.multiple_files|default:False %}[]{% endif %}"
             style="display: none;"
             {% if block.value.required %}required{% endif %}
             {% if block.value.multiple_files|default:False %}multiple{% endif %}
@@ -2353,129 +2353,104 @@
 {% endif %}
 
 <script>
-    function updateFileName(input) {
-        const fieldId = input.id;
-        const displayDiv = document.getElementById(`file-display-${fieldId}`);
-        const errorDiv = document.getElementById(`file-error-${fieldId}`);
-        const dropzone = document.getElementById(`dropzone-${fieldId}`);
+    // FUNÇÃO DE UPLOAD CORRIGIDA
+function updateFileName(input) {
+    console.log("Função updateFileName chamada"); // Log para debug
+    
+    const fieldId = input.id;
+    const displayDiv = document.getElementById(`file-display-${fieldId}`);
+    const errorDiv = document.getElementById(`file-error-${fieldId}`);
+    const dropzone = document.getElementById(`dropzone-${fieldId}`);
+    
+    console.log("Files selecionados:", input.files.length); // Log para debug
+    console.log("Multiple?", input.multiple); // Log para debug
+    
+    // Limpar erros anteriores
+    errorDiv.style.display = 'none';
+    errorDiv.textContent = '';
+    displayDiv.innerHTML = ''; // Limpar a área de exibição
+    
+    if (input.files && input.files.length > 0) {
+        const maxSize = parseInt(input.dataset.maxSize) * 1024 * 1024;
+        const maxFiles = input.multiple ? (parseInt(input.dataset.maxFiles) || 5) : 1;
         
-        // Limpar erros anteriores
-        errorDiv.style.display = 'none';
-        errorDiv.textContent = '';
+        // Verificar se excedeu o número máximo de arquivos
+        if (input.files.length > maxFiles) {
+            errorDiv.textContent = `Máximo de ${maxFiles} arquivo(s) permitido(s)`;
+            errorDiv.style.display = 'block';
+            input.value = '';
+            return;
+        }
         
-        if (input.files && input.files.length > 0) {
-            const maxSize = parseInt(input.dataset.maxSize) * 1024 * 1024; // Converter MB para bytes
-            const isMultiple = input.hasAttribute('multiple');
-            const maxFiles = parseInt(input.dataset.maxFiles) || 1;
-            let hasError = false;
-            let errorMessages = [];
-            
-            // Verificar número de arquivos
-            if (isMultiple && input.files.length > maxFiles) {
-                errorMessages.push(`Máximo ${maxFiles} arquivo(s) permitido(s)`);
-                hasError = true;
-            }
+        // Verificar tamanho de cada arquivo
+        let totalSize = 0;
+        let fileHtml = '';
+        let errors = [];
+        
+        // Processar cada arquivo
+        for (let i = 0; i < input.files.length; i++) {
+            const file = input.files[i];
+            totalSize += file.size;
             
-            // Verificar cada arquivo
-            let validFiles = [];
-            for (let i = 0; i < input.files.length; i++) {
-                const file = input.files[i];
-                
-                // Verificar tamanho
-                if (file.size > maxSize) {
-                    errorMessages.push(`"${file.name}" excede ${input.dataset.maxSize}MB`);
-                    hasError = true;
-                    continue;
-                }
-                
-                validFiles.push(file);
+            // Verificar tamanho individual
+            if (file.size > maxSize) {
+                errors.push(`Arquivo "${file.name}" excede ${input.dataset.maxSize}MB`);
+                continue;
             }
             
-            if (hasError) {
-                errorDiv.textContent = errorMessages.join('; ');
-                errorDiv.style.display = 'block';
-                dropzone.style.borderColor = '#dc3545';
-                dropzone.style.background = '#fff5f5';
-                input.value = ''; // Limpar seleção
-                displayDiv.style.display = 'none';
-                return;
-            }
+            // Adicionar à lista de exibição
+            const fileSize = (file.size / (1024 * 1024)).toFixed(2);
+            const fileIcon = getFileIcon(file.name);
             
-            // Exibir arquivos válidos
-            let fileHtml = '';
-            validFiles.forEach(file => {
-                const fileSize = (file.size / (1024 * 1024)).toFixed(2);
-                const fileIcon = getFileIcon(file.name);
-                fileHtml += `
-                    <div class="selected-file" style="display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem; background: #f8f9fa; border-radius: 4px; margin-bottom: 0.25rem;">
-                        <span style="font-size: 1.2rem;">${fileIcon}</span>
-                        <span style="flex: 1; font-weight: 500;">${file.name}</span>
-                        <span style="font-size: 0.8rem; color: #666;">${fileSize}MB</span>
-                        <span style="color: #28a745; font-weight: bold;">✓</span>
-                    </div>
-                `;
-            });
-            
-            displayDiv.innerHTML = fileHtml;
-            displayDiv.style.display = 'block';
-            
-            // Atualizar visual do dropzone
-            dropzone.style.borderColor = '#28a745';
-            dropzone.style.background = '#f8fff8';
-            
-        } else {
-            displayDiv.style.display = 'none';
-            dropzone.style.borderColor = '#C8D1E0';
-            dropzone.style.background = '#f8f9fa';
+            fileHtml += `
+                <div style="display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem; background: #f8f9fa; border-radius: 4px; margin-bottom: 0.5rem;">
+                    <span style="font-size: 1.2rem;">${fileIcon}</span>
+                    <span style="flex: 1; overflow: hidden; text-overflow: ellipsis;">${file.name}</span>
+                    <span style="color: #666; font-size: 0.8rem; white-space: nowrap;">${fileSize}MB</span>
+                    <span style="color: #28a745; font-weight: bold;">✓</span>
+                </div>
+            `;
+        }
+        
+        // Se houver erros, mostrar e abortar
+        if (errors.length > 0) {
+            errorDiv.textContent = errors.join('; ');
+            errorDiv.style.display = 'block';
+            input.value = '';
+            return;
         }
-    }
-    
-    // Função para obter ícone baseado na extensão
-    function getFileIcon(filename) {
-        const ext = filename.split('.').pop().toLowerCase();
-        const icons = {
-            'pdf': '📄',
-            'doc': '📝', 'docx': '📝',
-            'xls': '📊', 'xlsx': '📊',
-            'jpg': '🖼️', 'jpeg': '🖼️', 'png': '🖼️', 'gif': '🖼️',
-            'txt': '📄',
-            'csv': '📋'
-        };
-        return icons[ext] || '📎';
-    }
-    
-    // Drag and Drop
-    function handleDragOver(e) {
-        e.preventDefault();
-        e.stopPropagation();
-        e.currentTarget.style.borderColor = '#007bff';
-        e.currentTarget.style.background = '#f0f8ff';
-    }
-    
-    function handleDragLeave(e) {
-        e.preventDefault();
-        e.stopPropagation();
-        e.currentTarget.style.borderColor = '#C8D1E0';
-        e.currentTarget.style.background = '#f8f9fa';
-    }
-    
-    function handleFileDrop(e, inputId) {
-        e.preventDefault();
-        e.stopPropagation();
         
-        const input = document.getElementById(inputId);
-        const files = e.dataTransfer.files;
+        // Se tudo estiver ok, exibir os arquivos
+        displayDiv.innerHTML = fileHtml;
         
-        if (files.length > 0) {
-            // Simular seleção de arquivo
-            input.files = files;
-            updateFileName(input);
+        // Adicionar resumo para múltiplos arquivos
+        if (input.files.length > 1) {
+            const totalSizeMB = (totalSize / (1024 * 1024)).toFixed(2);
+            const summaryDiv = document.createElement('div');
+            summaryDiv.style.textAlign = 'right';
+            summaryDiv.style.padding = '0.3rem 0.5rem';
+            summaryDiv.style.fontSize = '0.9rem';
+            summaryDiv.style.fontWeight = 'bold';
+            summaryDiv.style.color = '#2A5E2C';
+            summaryDiv.style.background = '#f0f8f0';
+            summaryDiv.style.borderRadius = '4px';
+            summaryDiv.style.marginTop = '0.5rem';
+            summaryDiv.textContent = `${input.files.length} arquivos (${totalSizeMB}MB total)`;
+            displayDiv.appendChild(summaryDiv);
         }
         
-        // Resetar visual
-        e.currentTarget.style.borderColor = '#C8D1E0';
-        e.currentTarget.style.background = '#f8f9fa';
+        displayDiv.style.display = 'block';
+        
+        // Atualizar visual do dropzone
+        dropzone.style.borderColor = '#28a745';
+        dropzone.style.background = '#f8fff8';
+    } else {
+        // Não há arquivos selecionados
+        displayDiv.style.display = 'none';
+        dropzone.style.borderColor = '#C8D1E0';
+        dropzone.style.background = '#f8f9fa';
     }
+}
 
     // Atualizar texto de rating
     document.addEventListener('click', function(e) {