Spaces:

coollsd
/

fileuploader

Running

App Files Files Community

coollsd commited on 5 days ago

Commit

77a91cf

•

1 Parent(s): cff545e

Update app.py

Browse files

Files changed (1) hide show

app.py +59 -10

app.py CHANGED Viewed

@@ -170,14 +170,29 @@ HTML_CONTENT = """
             font-size: 0.8rem;
             color: #aaa;
         }
     </style>
 </head>
 <body>
     <div class="container">
         <h1>Radd PRO Uploader</h1>
         <form id="uploadForm">
-            <input type="file" name="files" id="files" class="file-input" accept=".zip,.mp4,.txt,.mp3,image/*,.pdf" required multiple>
-            <label for="files" class="btn">Choose Files</label>
             <div class="file-name" id="fileName"></div>
             <button type="button" id="uploadBtn" class="btn" style="display: none; margin-top: 1rem;">Upload Files</button>
             <div class="progress-container" id="progressContainer"></div>
@@ -185,7 +200,7 @@ HTML_CONTENT = """
         </form>
         <div class="result-container" id="resultContainer"></div>
         <div class="file-types">
-            Allowed file types: .zip, .mp4, .txt,.mp3, all image types, .pdf
         </div>
     </div>
@@ -196,14 +211,9 @@ HTML_CONTENT = """
         const progressContainer = document.getElementById('progressContainer');
         const loadingSpinner = document.getElementById('loadingSpinner');
         const resultContainer = document.getElementById('resultContainer');
-        fileInput.addEventListener('change', (e) => {
-            if (e.target.files.length > 0) {
-                const fileNames = Array.from(e.target.files).map(file => file.name).join(', ');
-                fileName.textContent = fileNames;
-                uploadBtn.style.display = 'inline-block';
-            }
-        });
         uploadBtn.addEventListener('click', () => {
             if (fileInput.files.length > 0) {
@@ -211,6 +221,45 @@ HTML_CONTENT = """
             }
         });
         function uploadFiles(files) {
             progressContainer.innerHTML = '';
             progressContainer.style.display = 'block';

             font-size: 0.8rem;
             color: #aaa;
         }
+        .drop-zone {
+            border: 2px dashed #aaa;
+            border-radius: 10px;
+            padding: 20px;
+            text-align: center;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+        .drop-zone:hover, .drop-zone.drag-over {
+            border-color: #ffffff;
+            background-color: rgba(255, 255, 255, 0.1);
+        }
     </style>
 </head>
 <body>
     <div class="container">
         <h1>Radd PRO Uploader</h1>
         <form id="uploadForm">
+            <div id="dropZone" class="drop-zone">
+                <input type="file" name="files" id="files" class="file-input" accept=".zip,.mp4,.txt,.mp3,image/*,.pdf" required multiple>
+                <label for="files" class="btn">Choose Files</label>
+                <p>or drag and drop files here</p>
+            </div>
             <div class="file-name" id="fileName"></div>
             <button type="button" id="uploadBtn" class="btn" style="display: none; margin-top: 1rem;">Upload Files</button>
             <div class="progress-container" id="progressContainer"></div>
         </form>
         <div class="result-container" id="resultContainer"></div>
         <div class="file-types">
+            Allowed file types: .zip, .mp4, .txt, .mp3, all image types, .pdf
         </div>
     </div>
         const progressContainer = document.getElementById('progressContainer');
         const loadingSpinner = document.getElementById('loadingSpinner');
         const resultContainer = document.getElementById('resultContainer');
+        const dropZone = document.getElementById('dropZone');
+        fileInput.addEventListener('change', handleFiles);
         uploadBtn.addEventListener('click', () => {
             if (fileInput.files.length > 0) {
             }
         });
+        // Drag and drop functionality
+        dropZone.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            dropZone.classList.add('drag-over');
+        });
+        dropZone.addEventListener('dragleave', () => {
+            dropZone.classList.remove('drag-over');
+        });
+        dropZone.addEventListener('drop', (e) => {
+            e.preventDefault();
+            dropZone.classList.remove('drag-over');
+            handleFiles({ target: { files: e.dataTransfer.files } });
+        });
+        // Paste functionality
+        document.addEventListener('paste', (e) => {
+            const items = e.clipboardData.items;
+            const files = [];
+            for (let i = 0; i < items.length; i++) {
+                if (items[i].kind === 'file') {
+                    const file = items[i].getAsFile();
+                    files.push(file);
+                }
+            }
+            if (files.length > 0) {
+                handleFiles({ target: { files: files } });
+            }
+        });
+        function handleFiles(e) {
+            if (e.target.files.length > 0) {
+                const fileNames = Array.from(e.target.files).map(file => file.name).join(', ');
+                fileName.textContent = fileNames;
+                uploadBtn.style.display = 'inline-block';
+            }
+        }
         function uploadFiles(files) {
             progressContainer.innerHTML = '';
             progressContainer.style.display = 'block';