Spaces:

colivafr
/

test

Running

App Files Files Community

colivafr commited on Aug 30, 2025

Commit

e40d70e

verified ·

1 Parent(s): 9a13588

it seems there is nothing sent to webhook - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +260 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Test
-emoji: 🏆
-colorFrom: red
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: test
+emoji: 🐳
+colorFrom: green
+colorTo: gray
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,260 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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() {
+            // Initialize Dropzone
+            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, // MB
+                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) {
+                        // Show loading state
+                        responseSection.classList.remove('hidden');
+                        loadingIndicator.classList.remove('hidden');
+                        apiResponse.classList.add('hidden');
+                        errorMessage.classList.add('hidden');
+                        // Create object URL for the file and store it on the file object
+                        file.objectUrl = URL.createObjectURL(file);
+                        // Add file URL and metadata to the request
+                        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');
+                        // Format and display the response
+                        apiResponse.textContent = JSON.stringify(response, null, 2);
+                        // Send complete file info to webhook
+                        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);
+                        });
+                        // Clean up object URL and remove file preview
+                        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);
+                        }
+                    });
+                }
+            });
+            // Clear response button
+            clearResponseBtn.addEventListener('click', function() {
+                apiResponse.textContent = '';
+                responseSection.classList.add('hidden');
+            });
+            // Submit to webhook button
+            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>