| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>DropzoneJS with Webhook Response</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" /> |
| <style> |
| .dropzone { |
| border: 2px dashed #4b5563; |
| border-radius: 0.5rem; |
| background: #f9fafb; |
| min-height: 150px; |
| padding: 20px; |
| } |
| .dropzone .dz-message { |
| margin: 3em 0; |
| color: #6b7280; |
| font-weight: 500; |
| } |
| .dropzone .dz-preview .dz-error-message { |
| background: #ef4444; |
| border-radius: 0.25rem; |
| } |
| .response-container { |
| transition: all 0.3s ease; |
| } |
| .spinner { |
| animation: spin 1s linear infinite; |
| } |
| @keyframes spin { |
| from { transform: rotate(0deg); } |
| to { transform: rotate(360deg); } |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 min-h-screen"> |
| <div class="container mx-auto px-4 py-8 max-w-4xl"> |
| <div class="text-center mb-8"> |
| <h1 class="text-3xl font-bold text-gray-800 mb-2">File Upload with Webhook</h1> |
| <p class="text-gray-600">Upload files and see the API response in real-time</p> |
| </div> |
|
|
| <div class="bg-white rounded-xl shadow-md p-6 mb-8"> |
| <form action="/upload" class="dropzone" id="fileDropzone"> |
| <div class="dz-message" data-dz-message> |
| <div class="flex flex-col items-center justify-center"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-gray-400 mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" /> |
| </svg> |
| <span class="text-lg">Drop files here or click to upload</span> |
| <span class="text-sm text-gray-500 mt-1">Max file size: 10MB</span> |
| </div> |
| </div> |
| </form> |
| <div class="mt-4 flex justify-center"> |
| <button id="submit-to-webhook" class="bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-lg transition-colors"> |
| Submit to Webhook |
| </button> |
| </div> |
| </div> |
|
|
| <div id="response-section" class="bg-white rounded-xl shadow-md p-6 hidden"> |
| <div class="flex items-center justify-between mb-4"> |
| <h2 class="text-xl font-semibold text-gray-800">API Response</h2> |
| <button id="clear-response" class="text-gray-500 hover:text-gray-700"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> |
| <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" /> |
| </svg> |
| </button> |
| </div> |
| <div id="loading-indicator" class="hidden flex items-center justify-center py-8"> |
| <svg class="animate-spin -ml-1 mr-3 h-8 w-8 text-blue-500 spinner" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> |
| <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> |
| <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path> |
| </svg> |
| <span class="text-gray-700">Processing your file...</span> |
| </div> |
| <pre id="api-response" class="bg-gray-50 p-4 rounded-lg overflow-x-auto text-sm text-gray-800 hidden"></pre> |
| <div id="error-message" class="hidden bg-red-50 border-l-4 border-red-500 p-4"> |
| <div class="flex"> |
| <div class="flex-shrink-0"> |
| <svg class="h-5 w-5 text-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> |
| <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" /> |
| </svg> |
| </div> |
| <div class="ml-3"> |
| <h3 class="text-sm font-medium text-red-800" id="error-title">Error</h3> |
| <div class="mt-2 text-sm text-red-700" id="error-content"> |
| <p>There was an error processing your request.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script> |
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| Dropzone.autoDiscover = false; |
| |
| const responseSection = document.getElementById('response-section'); |
| const apiResponse = document.getElementById('api-response'); |
| const loadingIndicator = document.getElementById('loading-indicator'); |
| const errorMessage = document.getElementById('error-message'); |
| const clearResponseBtn = document.getElementById('clear-response'); |
| |
| const dropzone = new Dropzone('#fileDropzone', { |
| url: 'https://n8n.flowbotix.com/webhook/test-webhook', |
| paramName: "file", |
| maxFilesize: 10, |
| acceptedFiles: 'image/*,.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt', |
| addRemoveLinks: true, |
| autoProcessQueue: true, |
| parallelUploads: 3, |
| dictDefaultMessage: "Drop files here or click to upload", |
| dictFallbackMessage: "Your browser does not support drag'n'drop file uploads.", |
| dictFileTooBig: "File is too big ({{filesize}}MB). Max filesize: {{maxFilesize}}MB.", |
| dictInvalidFileType: "You can't upload files of this type.", |
| dictResponseError: "Server responded with {{statusCode}} code.", |
| dictCancelUpload: "Cancel upload", |
| dictUploadCanceled: "Upload canceled.", |
| dictRemoveFile: "Remove file", |
| dictMaxFilesExceeded: "You can't upload any more files.", |
| headers: { |
| 'Accept': 'application/json' |
| }, |
| init: function() { |
| this.on('sending', function(file, xhr, formData) { |
| |
| responseSection.classList.remove('hidden'); |
| loadingIndicator.classList.remove('hidden'); |
| apiResponse.classList.add('hidden'); |
| errorMessage.classList.add('hidden'); |
| |
| |
| file.objectUrl = URL.createObjectURL(file); |
| |
| |
| formData.append('timestamp', Date.now()); |
| formData.append('client', 'dropzone-webhook-app'); |
| formData.append('file_url', file.objectUrl); |
| formData.append('file_name', file.name); |
| formData.append('file_size', file.size); |
| formData.append('file_type', file.type); |
| }); |
| |
| this.on('success', function(file, response) { |
| loadingIndicator.classList.add('hidden'); |
| apiResponse.classList.remove('hidden'); |
| errorMessage.classList.add('hidden'); |
| |
| |
| apiResponse.textContent = JSON.stringify(response, null, 2); |
| |
| |
| const fileInfo = { |
| event: 'file_upload_success', |
| timestamp: new Date().toISOString(), |
| file: { |
| name: file.name, |
| size: file.size, |
| type: file.type, |
| lastModified: file.lastModified, |
| uploadDate: new Date().toISOString(), |
| status: file.status, |
| objectUrl: file.objectUrl, |
| previewElement: file.previewElement ? true : false |
| }, |
| uploadResponse: response, |
| metadata: { |
| client: 'dropzone-webhook-app', |
| processingTime: Date.now() - file.upload.processingStarted |
| } |
| }; |
| |
| fetch('https://n8n.flowbotix.com/webhook/test-webhook', { |
| method: 'POST', |
| headers: { |
| 'Content-Type': 'application/json', |
| }, |
| body: JSON.stringify(fileInfo) |
| }) |
| .then(() => { |
| console.log('Webhook notification sent successfully'); |
| }) |
| .catch(error => { |
| console.error('Error sending to webhook:', error); |
| }); |
| |
| |
| URL.revokeObjectURL(file.objectUrl); |
| this.removeFile(file); |
| }); |
| |
| this.on('error', function(file, errorMessageText, xhr) { |
| loadingIndicator.classList.add('hidden'); |
| apiResponse.classList.add('hidden'); |
| errorMessage.classList.remove('hidden'); |
| |
| let errorContent = ''; |
| if (xhr) { |
| errorContent = `Status: ${xhr.status}\n`; |
| try { |
| const response = JSON.parse(xhr.responseText); |
| errorContent += `Message: ${response.message || xhr.responseText}`; |
| } catch (e) { |
| errorContent += `Response: ${xhr.responseText}`; |
| } |
| } else { |
| errorContent = errorMessageText; |
| } |
| |
| document.getElementById('error-content').textContent = errorContent; |
| }); |
| |
| this.on('complete', function(file) { |
| if (!file.accepted) { |
| this.removeFile(file); |
| } |
| }); |
| } |
| }); |
| |
| |
| clearResponseBtn.addEventListener('click', function() { |
| apiResponse.textContent = ''; |
| responseSection.classList.add('hidden'); |
| }); |
| |
| |
| document.getElementById('submit-to-webhook').addEventListener('click', function() { |
| const payload = { |
| name: "hello" |
| }; |
| |
| fetch('https://n8n.flowbotix.com/webhook/test-webhook', { |
| method: 'POST', |
| headers: { |
| 'Content-Type': 'application/json', |
| }, |
| body: JSON.stringify(payload) |
| }) |
| .then(response => response.json()) |
| .then(data => { |
| alert('Webhook called successfully!'); |
| console.log('Webhook response:', data); |
| }) |
| .catch(error => { |
| console.error('Error calling webhook:', error); |
| alert('Error calling webhook'); |
| }); |
| }); |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=colivafr/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
