Spaces:

gewei20
/

upload-r2

Running

App Files Files Community

gewei20 commited on May 8

Commit

3f88ce0

verified ·

1 Parent(s): d1b5e4b

Add 2 files

Browse files

Files changed (2) hide show

index.html +52 -67
prompts.txt +2 -1

index.html CHANGED Viewed

@@ -28,6 +28,9 @@
             from { transform: rotate(0deg); }
             to { transform: rotate(360deg); }
         }
     </style>
 </head>
 <body class="bg-gray-50 min-h-screen">
@@ -91,7 +94,7 @@
             <div class="mb-4">
                 <label class="block text-sm font-medium text-gray-700 mb-1">Folder Path</label>
                 <div class="flex">
-                    <input type="text" id="folderPath" class="flex-1 px-3 py-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Enter folder path or drag & drop">
                     <button id="browseBtn" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-r-md hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
                         <i class="fas fa-folder-open mr-1"></i> Browse
                     </button>
@@ -104,6 +107,10 @@
                 <p class="text-sm text-gray-500">Supports multiple files and folders</p>
             </div>
             <div class="flex justify-between">
                 <div>
                     <label class="block text-sm font-medium text-gray-700 mb-1">Prefix (optional)</label>
@@ -193,6 +200,8 @@
         const logConsole = document.getElementById('logConsole');
         const testConnectionBtn = document.getElementById('testConnectionBtn');
         const connectionStatus = document.getElementById('connectionStatus');
         // State variables
         let filesToUpload = [];
@@ -201,8 +210,7 @@
         // Event Listeners
         dropzone.addEventListener('click', () => {
-            // In a real app, this would trigger file selection
-            addLog("File selection dialog would open here in a real application");
         });
         dropzone.addEventListener('dragover', (e) => {
@@ -218,19 +226,40 @@
             e.preventDefault();
             dropzone.classList.remove('active');
-            // In a real app, this would handle dropped files
-            const files = []; // Array.from(e.dataTransfer.files);
             if (files.length > 0) {
                 filesToUpload = files;
                 updateFileList();
                 addLog(`Added ${files.length} file(s) from drag & drop`);
             }
         });
         browseBtn.addEventListener('click', () => {
-            // In a real app, this would trigger folder selection
-            addLog("Folder selection dialog would open here in a real application");
-            folderPathInput.value = "D:/app/JupyterLab/crawl4ai/output/docs_scrapy";
         });
         uploadBtn.addEventListener('click', () => {
@@ -265,8 +294,16 @@
         });
         document.getElementById('exportLogBtn').addEventListener('click', () => {
-            // In a real app, this would export the log
-            addLog("Log export functionality would be implemented here");
         });
         // Functions
@@ -289,7 +326,7 @@
                         <i class="fas fa-folder text-blue-500 mr-3"></i>
                         <div class="flex-1">
                             <div class="font-medium">${folderPathInput.value.split('/').pop() || folderPathInput.value.split('\\').pop()}</div>
-                            <div class="text-xs text-gray-500">Folder (contents will be uploaded)</div>
                         </div>
                         <div class="text-sm text-gray-500">Pending</div>
                     </div>
@@ -377,7 +414,7 @@
             // Reset counters
             document.getElementById('filesProcessed').textContent = '0';
-            document.getElementById('totalFiles').textContent = folderPathInput.value ? 'Calculating...' : filesToUpload.length;
             document.getElementById('successCount').textContent = '0';
             document.getElementById('failedCount').textContent = '0';
             document.getElementById('overallProgressBar').style.width = '0%';
@@ -394,62 +431,10 @@
             if (folderPathInput.value) {
                 addLog(`Uploading folder: ${folderPathInput.value}`);
-                // In a real app, this would scan the folder and upload its contents
-                simulateFolderUpload(folderPathInput.value, prefix);
-            } else {
-                // In a real app, this would upload the selected files
-                simulateFileUpload(filesToUpload, prefix);
             }
-        }
-        function simulateFolderUpload(folderPath, prefix) {
-            // Simulate folder scanning and file counting
-            setTimeout(() => {
-                const totalFiles = 42; // Simulated file count
-                document.getElementById('totalFiles').textContent = totalFiles;
-                addLog(`Found ${totalFiles} files in folder`);
-                // Simulate file uploads
-                let processed = 0;
-                let success = 0;
-                let failed = 0;
-                const uploadInterval = setInterval(() => {
-                    if (uploadCancelled || processed >= totalFiles) {
-                        clearInterval(uploadInterval);
-                        finishUpload(processed, success, failed);
-                        return;
-                    }
-                    processed++;
-                    const isSuccess = Math.random() > 0.1; // 90% success rate
-                    if (isSuccess) {
-                        success++;
-                        document.getElementById('successCount').textContent = success;
-                        addLog(`✔ Successfully uploaded ${prefix ? prefix + '/' : ''}file${processed}.txt`, "success");
-                        // Update file item status
-                        const fileItems = fileList.querySelectorAll('.file-item');
-                        if (fileItems.length > 0) {
-                            const randomIndex = Math.floor(Math.random() * fileItems.length);
-                            const statusDiv = fileItems[randomIndex].querySelector('div:last-child');
-                            statusDiv.innerHTML = '<span class="text-green-600"><i class="fas fa-check mr-1"></i>Done</span>';
-                        }
-                    } else {
-                        failed++;
-                        document.getElementById('failedCount').textContent = failed;
-                        addLog(`✖ Failed to upload ${prefix ? prefix + '/' : ''}file${processed}.txt`, "error");
-                    }
-                    document.getElementById('filesProcessed').textContent = processed;
-                    const progress = Math.floor((processed / totalFiles) * 100);
-                    document.getElementById('overallProgressBar').style.width = `${progress}%`;
-                    document.getElementById('overallProgressText').textContent = `${progress}%`;
-                }, 200);
-            }, 1000);
         }
         function simulateFileUpload(files, prefix) {

             from { transform: rotate(0deg); }
             to { transform: rotate(360deg); }
         }
+        #folderInput, #fileInput {
+            display: none;
+        }
     </style>
 </head>
 <body class="bg-gray-50 min-h-screen">
             <div class="mb-4">
                 <label class="block text-sm font-medium text-gray-700 mb-1">Folder Path</label>
                 <div class="flex">
+                    <input type="text" id="folderPath" class="flex-1 px-3 py-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Enter folder path or drag & drop" readonly>
                     <button id="browseBtn" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-r-md hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
                         <i class="fas fa-folder-open mr-1"></i> Browse
                     </button>
                 <p class="text-sm text-gray-500">Supports multiple files and folders</p>
             </div>
+            <!-- Hidden file inputs -->
+            <input type="file" id="fileInput" multiple>
+            <input type="file" id="folderInput" webkitdirectory directory multiple>
             <div class="flex justify-between">
                 <div>
                     <label class="block text-sm font-medium text-gray-700 mb-1">Prefix (optional)</label>
         const logConsole = document.getElementById('logConsole');
         const testConnectionBtn = document.getElementById('testConnectionBtn');
         const connectionStatus = document.getElementById('connectionStatus');
+        const fileInput = document.getElementById('fileInput');
+        const folderInput = document.getElementById('folderInput');
         // State variables
         let filesToUpload = [];
         // Event Listeners
         dropzone.addEventListener('click', () => {
+            fileInput.click();
         });
         dropzone.addEventListener('dragover', (e) => {
             e.preventDefault();
             dropzone.classList.remove('active');
+            const files = Array.from(e.dataTransfer.files);
             if (files.length > 0) {
                 filesToUpload = files;
+                folderPathInput.value = '';
                 updateFileList();
                 addLog(`Added ${files.length} file(s) from drag & drop`);
             }
         });
         browseBtn.addEventListener('click', () => {
+            folderInput.click();
+        });
+        fileInput.addEventListener('change', (e) => {
+            const files = Array.from(e.target.files);
+            if (files.length > 0) {
+                filesToUpload = files;
+                folderPathInput.value = '';
+                updateFileList();
+                addLog(`Added ${files.length} file(s) from file selection`);
+            }
+            fileInput.value = ''; // Reset to allow selecting same files again
+        });
+        folderInput.addEventListener('change', (e) => {
+            const files = Array.from(e.target.files);
+            if (files.length > 0) {
+                filesToUpload = files;
+                const path = e.target.files[0].webkitRelativePath.split('/')[0];
+                folderPathInput.value = path;
+                updateFileList();
+                addLog(`Added folder "${path}" containing ${files.length} files`);
+            }
+            folderInput.value = ''; // Reset to allow selecting same folder again
         });
         uploadBtn.addEventListener('click', () => {
         });
         document.getElementById('exportLogBtn').addEventListener('click', () => {
+            const blob = new Blob([logConsole.textContent], { type: 'text/plain' });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = 'cloudsync-log.txt';
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+            URL.revokeObjectURL(url);
+            addLog("Log exported as text file");
         });
         // Functions
                         <i class="fas fa-folder text-blue-500 mr-3"></i>
                         <div class="flex-1">
                             <div class="font-medium">${folderPathInput.value.split('/').pop() || folderPathInput.value.split('\\').pop()}</div>
+                            <div class="text-xs text-gray-500">Folder (${filesToUpload.length} files)</div>
                         </div>
                         <div class="text-sm text-gray-500">Pending</div>
                     </div>
             // Reset counters
             document.getElementById('filesProcessed').textContent = '0';
+            document.getElementById('totalFiles').textContent = filesToUpload.length;
             document.getElementById('successCount').textContent = '0';
             document.getElementById('failedCount').textContent = '0';
             document.getElementById('overallProgressBar').style.width = '0%';
             if (folderPathInput.value) {
                 addLog(`Uploading folder: ${folderPathInput.value}`);
             }
+            // Simulate file uploads
+            simulateFileUpload(filesToUpload, prefix);
         }
         function simulateFileUpload(files, prefix) {

prompts.txt CHANGED Viewed

	@@ -1 +1,2 @@
1	- import os import boto3 from dotenv import load_dotenv # 加载.env文件中的环境变量 load_dotenv() ACCOUNT_ID = os.getenv("S3_ACCOUNT_ID") ACCESS_KEY = os.getenv("S3_ACCESS_KEY") SECRET_KEY = os.getenv("S3_SECRET_KEY") BUCKET = "scrapydocs" s3 = boto3.client( "s3", endpoint_url=f"https://75f5ed467c14e39214f3a6f2a169f3d0.r2.cloudflarestorage.com/scrapydocs", aws_access_key_id=ACCESS_KEY, aws_secret_access_key=SECRET_KEY, region_name="auto", ) def upload_folder_contents(folder_path, bucket, prefix=""): try: file_count = 0 for root, _, files in os.walk(folder_path): for file in files: full_path = os.path.join(root, file) key = f"{prefix}/{file}" if prefix else file try: s3.upload_file(full_path, bucket, key) print(f"✔ Successfully uploaded {key}") file_count += 1 except Exception as e: print(f"✖ Failed to upload {key}: {str(e)}") print(f"\nUpload complete. Total files processed: {file_count}") return file_count except Exception as e: print(f"✖ Fatal error: {str(e)}") return 0 if __name__ == "__main__": print("Starting S3 upload process...") folder_path = "D:/app/JupyterLab/crawl4ai/output/docs_scrapy" if not os.path.exists(folder_path): print(f"✖ Error: Folder not found at {folder_path}") else: print(f"Testing connection to {s3.meta.endpoint_url}") print(s3.list_buckets()) # 这会验证你的凭证是否有效 upload_folder_contents(folder_path, BUCKET) print("Process completed.")


1	+ import os import boto3 from dotenv import load_dotenv # 加载.env文件中的环境变量 load_dotenv() ACCOUNT_ID = os.getenv("S3_ACCOUNT_ID") ACCESS_KEY = os.getenv("S3_ACCESS_KEY") SECRET_KEY = os.getenv("S3_SECRET_KEY") BUCKET = "scrapydocs" s3 = boto3.client( "s3", endpoint_url=f"https://75f5ed467c14e39214f3a6f2a169f3d0.r2.cloudflarestorage.com/scrapydocs", aws_access_key_id=ACCESS_KEY, aws_secret_access_key=SECRET_KEY, region_name="auto", ) def upload_folder_contents(folder_path, bucket, prefix=""): try: file_count = 0 for root, _, files in os.walk(folder_path): for file in files: full_path = os.path.join(root, file) key = f"{prefix}/{file}" if prefix else file try: s3.upload_file(full_path, bucket, key) print(f"✔ Successfully uploaded {key}") file_count += 1 except Exception as e: print(f"✖ Failed to upload {key}: {str(e)}") print(f"\nUpload complete. Total files processed: {file_count}") return file_count except Exception as e: print(f"✖ Fatal error: {str(e)}") return 0 if __name__ == "__main__": print("Starting S3 upload process...") folder_path = "D:/app/JupyterLab/crawl4ai/output/docs_scrapy" if not os.path.exists(folder_path): print(f"✖ Error: Folder not found at {folder_path}") else: print(f"Testing connection to {s3.meta.endpoint_url}") print(s3.list_buckets()) # 这会验证你的凭证是否有效 upload_folder_contents(folder_path, BUCKET) print("Process completed.")
2	+ Drag & drop files here or click to select Supports multiple files and folders 点击没有提示动作。还有 Browse点击不会自动打开本地文件目录选择文件