Spaces:

coollsd
/

fileuploader

Paused

App Files Files Community

coollsd commited on Sep 19, 2024

Commit

548abbb

verified ·

1 Parent(s): c0ee329

Update app.py

Browse files

Files changed (1) hide show

app.py +167 -133

app.py CHANGED Viewed

@@ -1,12 +1,21 @@
-from fastapi import FastAPI, File, UploadFile, Request
 from fastapi.responses import HTMLResponse, JSONResponse, StreamingResponse
 import requests
 import time
 import asyncio
 from typing import Dict
-import os
-import shutil
 app = FastAPI()
 HTML_CONTENT = """
 <!DOCTYPE html>
 <html lang="en">
@@ -28,6 +37,7 @@ HTML_CONTENT = """
             padding: 20px;
             box-sizing: border-box;
         }
         body::before {
             content: "";
             position: fixed;
@@ -40,6 +50,7 @@ HTML_CONTENT = """
             opacity: 0.2;
             pointer-events: none;
         }
         @keyframes grain {
             0% { transform: translate(0, 0); }
             10% { transform: translate(-5%, -5%); }
@@ -53,6 +64,7 @@ HTML_CONTENT = """
             90% { transform: translate(10%, 5%); }
             100% { transform: translate(5%, 0); }
         }
         .container {
             position: relative;
             width: 100%;
@@ -66,12 +78,14 @@ HTML_CONTENT = """
             text-align: center;
             box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
         }
         h1 {
             margin-bottom: 1.5rem;
             font-size: 1.8rem;
             color: #ffffff;
             text-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
         }
         .btn {
             display: inline-block;
             position: relative;
@@ -88,10 +102,12 @@ HTML_CONTENT = """
             z-index: 1;
             transition: color 0.3s ease, box-shadow 0.3s ease;
         }
         .btn:hover {
             color: #ffffff;
             box-shadow: 0 0 15px rgba(200, 200, 200, 0.5);
         }
         .btn:hover::before {
             content: '';
             position: absolute;
@@ -102,14 +118,17 @@ HTML_CONTENT = """
             z-index: -1;
             pointer-events: none;
         }
         @keyframes glowAnimation {
             0% { transform: scale(0.8); }
             50% { transform: scale(1.2); }
             100% { transform: scale(0.8); }
         }
         .btn:active {
             transform: scale(0.98);
         }
         .small-btn {
             padding: 6px 12px;
             font-size: 0.8rem;
@@ -125,10 +144,12 @@ HTML_CONTENT = """
             z-index: 1;
             margin: 0.25rem;
         }
         .small-btn:hover {
             color: #ffffff;
             box-shadow: 0 0 10px rgba(200, 200, 200, 0.5);
         }
         .small-btn:hover::before {
             content: '';
             position: absolute;
@@ -139,9 +160,11 @@ HTML_CONTENT = """
             z-index: -1;
             pointer-events: none;
         }
         .small-btn:active {
             transform: scale(0.98);
         }
         .drop-zone {
             position: relative;
             padding: 20px;
@@ -153,11 +176,13 @@ HTML_CONTENT = """
             background: rgba(255, 255, 255, 0.05);
             overflow: hidden;
         }
         .drop-zone:hover, .drop-zone.drag-over {
             border-color: #ffffff;
             background: rgba(255, 255, 255, 0.1);
             position: relative;
         }
         .drop-zone:hover::before, .drop-zone.drag-over::before {
             content: '';
             position: absolute;
@@ -168,24 +193,29 @@ HTML_CONTENT = """
             z-index: -1;
             pointer-events: none;
         }
         @keyframes grainGlow {
             0% { opacity: 0.2; }
             50% { opacity: 0.5; }
             100% { opacity: 0.2; }
         }
         .file-input {
             display: none;
         }
         .file-name {
             margin-top: 1rem;
             font-size: 0.9rem;
             color: #aaa;
             word-break: break-all;
         }
         .progress-container {
             display: none;
             margin-top: 1.5rem;
         }
         .progress-bar {
             width: 100%;
             height: 10px;
@@ -194,12 +224,14 @@ HTML_CONTENT = """
             overflow: hidden;
             margin-bottom: 10px;
         }
         .progress {
             width: 0%;
             height: 100%;
             background-color: #ffffff;
             transition: width 0.3s ease;
         }
         .loading-spinner {
             display: none;
             width: 40px;
@@ -210,14 +242,17 @@ HTML_CONTENT = """
             animation: spin 1s linear infinite;
             margin: 20px auto;
         }
         @keyframes spin {
             0% { transform: rotate(0deg); }
             100% { transform: rotate(360deg); }
         }
         .result-container {
             display: none;
             margin-top: 1.5rem;
         }
         .result-link {
             color: #ffffff;
             text-decoration: none;
@@ -226,21 +261,25 @@ HTML_CONTENT = """
             margin-right: 10px;
             word-break: break-all;
         }
         .result-link:hover {
             text-decoration: underline;
         }
         .link-buttons {
             display: flex;
             justify-content: center;
             flex-wrap: wrap;
             margin-top: 10px;
         }
-        /* File Types /
         .file-types {
             margin-top: 2rem;
             font-size: 0.8rem;
             color: #aaa;
         }
         .modal {
             display: none;
             position: fixed;
@@ -252,6 +291,7 @@ HTML_CONTENT = """
             overflow: auto;
             background-color: rgba(0,0,0,0.8);
         }
         .modal-content {
             background-color: #1e1e1e;
             margin: 15% auto;
@@ -264,10 +304,12 @@ HTML_CONTENT = """
             animation: modalFadeIn 0.3s;
             position: relative;
         }
         @keyframes modalFadeIn {
             from {opacity: 0; transform: scale(0.8);}
             to {opacity: 1; transform: scale(1);}
         }
         .close {
             color: #aaa;
             position: absolute;
@@ -277,18 +319,21 @@ HTML_CONTENT = """
             font-weight: bold;
             transition: color 0.3s ease;
         }
         .close:hover,
         .close:focus {
             color: #fff;
             text-decoration: none;
             cursor: pointer;
         }
         .embed-container {
             display: flex;
             flex-direction: column;
             align-items: stretch;
             margin-top: 15px;
         }
         #embedLink {
             width: 100%;
             padding: 10px;
@@ -299,20 +344,25 @@ HTML_CONTENT = """
             margin-bottom: 10px;
             font-size: 0.9rem;
         }
         @media (max-width: 480px) {
             .container {
                 padding: 1.5rem;
             }
             h1 {
                 font-size: 1.5rem;
             }
             .btn, .small-btn {
                 font-size: 0.9rem;
                 padding: 10px 20px;
             }
             .file-types {
                 font-size: 0.7rem;
             }
             .modal-content {
                 width: 95%;
                 margin: 10% auto;
@@ -325,7 +375,7 @@ HTML_CONTENT = """
         <h1>Radd PRO Uploader</h1>
         <form id="uploadForm">
             <div id="dropZone" class="drop-zone">
-                <input type="file" name="file" id="file" class="file-input" accept=".zip,.mp4,.txt,.mp3,image/,.pdf" required>
                 <label for="file" class="btn">Choose File</label>
                 <p>or drag and drop file here/paste image</p>
             </div>
@@ -339,9 +389,10 @@ HTML_CONTENT = """
             Allowed file types: .zip, .mp4, .txt, .mp3, all image types, .pdf
         </div>
     </div>
     <div id="embedModal" class="modal">
         <div class="modal-content">
-            <span class="close">×</span>
             <h2>Embed Video Link</h2>
             <p>copy the link to embed it on discord:</p>
             <div class="embed-container">
@@ -350,37 +401,44 @@ HTML_CONTENT = """
             </div>
         </div>
     </div>
     <script>
         const fileInput = document.getElementById('file');
         const fileName = document.getElementById('fileName');
         const uploadForm = document.getElementById('uploadForm');
         const progressContainer = document.getElementById('progressContainer');
         const loadingSpinner = document.getElementById('loadingSpinner');
-        const resultContainer = document.getElementById('resultContainer');
         const dropZone = document.getElementById('dropZone');
         const modal = document.getElementById('embedModal');
         const span = document.getElementsByClassName("close")[0];
         const embedLinkInput = document.getElementById('embedLink');
         const uploadBtn = document.getElementById('uploadBtn');
         fileInput.addEventListener('change', handleFileSelect);
-        uploadForm.addEventListener('submit', (e) => {
             e.preventDefault();
             if (fileInput.files.length > 0) {
-                uploadFile(fileInput.files[0]);
             }
         });
         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');
             handleFileSelect({ target: { files: e.dataTransfer.files } });
         });
         document.addEventListener('paste', (e) => {
             const items = e.clipboardData.items;
             for (let i = 0; i < items.length; i++) {
@@ -391,14 +449,17 @@ HTML_CONTENT = """
                 }
             }
         });
         span.onclick = function() {
             modal.style.display = "none";
         }
         window.onclick = function(event) {
             if (event.target == modal) {
                 modal.style.display = "none";
             }
         }
         function handleFileSelect(e) {
             if (e.target.files && e.target.files.length > 0) {
                 const file = e.target.files[0];
@@ -410,62 +471,58 @@ HTML_CONTENT = """
                 fileInput.files = dataTransfer.files;
             }
         }
         async function uploadFile(file) {
-            const chunkSize = 1024 * 1024; // 1 MB
-            const totalChunks = Math.ceil(file.size / chunkSize);
-            const uploadId = generateUploadId();
             progressContainer.innerHTML = '';
             progressContainer.style.display = 'block';
             loadingSpinner.style.display = 'block';
             uploadBtn.disabled = true;
             resultContainer.innerHTML = '';
             resultContainer.style.display = 'none';
             const progressBar = createProgressBar(file.name);
             progressContainer.appendChild(progressBar);
-            let chunkIndex = 0;
-            while (chunkIndex < totalChunks) {
-                const start = chunkIndex * chunkSize;
-                const end = Math.min(file.size, start + chunkSize);
-                const chunk = file.slice(start, end);
-                const formData = new FormData();
-                formData.append('file', chunk);
-                formData.append('chunkIndex', chunkIndex);
-                formData.append('totalChunks', totalChunks);
-                formData.append('uploadId', uploadId);
-                formData.append('fileName', file.name);
-                formData.append('contentType', file.type);
-                let success = false;
-                while (!success) {
-                    try {
-                        await uploadChunk(formData, progressBar.querySelector('.progress'), file.size, start, end);
-                        success = true;
-                    } catch (error) {
-                        console.error('Chunk upload error:', error);
-                        // Wait for a short time before retrying
-                        await new Promise(resolve => setTimeout(resolve, 1000));
                     }
-                }
-                chunkIndex++;
-            }
-            // After all chunks are uploaded, notify the server to assemble them
-            const response = await fetch('/assemble', {
-                method: 'POST',
-                body: JSON.stringify({ uploadId: uploadId, fileName: file.name, contentType: file.type }),
-                headers: { 'Content-Type': 'application/json' }
-            });
-            const result = await response.json();
-            if (response.ok && result.url) {
-                addResultLink(result.url, file.name);
                 resetUploadState();
-            } else {
-                alert('Failed to assemble file on server.');
             }
         }
-        function generateUploadId() {
-            return 'xxxxxxx'.replace(/[x]/g, function() {
-                return Math.floor(Math.random() * 16).toString(16);
-            });
-        }
         function createProgressBar(fileName) {
             const progressBarContainer = document.createElement('div');
             progressBarContainer.className = 'progress-bar';
@@ -481,6 +538,14 @@ HTML_CONTENT = """
             container.appendChild(progressBarContainer);
             return container;
         }
         function resetUploadState() {
             fileInput.value = '';
             fileName.textContent = '';
@@ -488,23 +553,22 @@ HTML_CONTENT = """
             uploadBtn.disabled = false;
             loadingSpinner.style.display = 'none';
         }
-        function updateProgress(event, progressBar) {
-            if (event.lengthComputable) {
-                const percentComplete = (event.loaded / event.total) * 100;
-                progressBar.style.width = percentComplete + '%';
-            }
-        }
         function addResultLink(url, fileName) {
             const linkContainer = document.createElement('div');
             linkContainer.style.marginBottom = '10px';
             const link = document.createElement('a');
             link.href = url;
-            link.textContent = View ${fileName};
             link.className = 'result-link';
-            link.target = 'blank';
             linkContainer.appendChild(link);
             const buttonsContainer = document.createElement('div');
             buttonsContainer.className = 'link-buttons';
             const copyBtn = document.createElement('button');
             copyBtn.textContent = 'Copy Link';
             copyBtn.className = 'small-btn copy-btn';
@@ -514,6 +578,7 @@ HTML_CONTENT = """
                 });
             };
             buttonsContainer.appendChild(copyBtn);
             if (fileName.toLowerCase().endsWith('.mp4')) {
                 const embedBtn = document.createElement('button');
                 embedBtn.textContent = 'Embed Video for Discord';
@@ -523,115 +588,79 @@ HTML_CONTENT = """
                 };
                 buttonsContainer.appendChild(embedBtn);
             }
             linkContainer.appendChild(buttonsContainer);
             resultContainer.appendChild(linkContainer);
             resultContainer.style.display = 'block';
         }
         function showEmbedModal(url) {
-            const embedUrl = ${window.location.origin}/embed?url=${encodeURIComponent(window.location.origin + url)}&thumbnail=${encodeURIComponent('https://coollsd-fileuploader.hf.space/rbxg/LdnShkhZFgMlMmCwkeX78RqHbiol6r554v5BryQS9upEC1wu/Untitled.png')};
             embedLinkInput.value = embedUrl;
             modal.style.display = "block";
         }
         function copyEmbedLink() {
             embedLinkInput.select();
             document.execCommand('copy');
             alert('Embed link copied to clipboard!');
         }
-        async function uploadChunk(formData, progressBar, totalSize, start, end) {
-            return new Promise((resolve, reject) => {
-                const xhr = new XMLHttpRequest();
-                xhr.open('POST', '/upload_chunk', true);
-                xhr.upload.onprogress = (event) => {
-                    if (event.lengthComputable) {
-                        const chunkProgress = (event.loaded / (end - start)) * 100;
-                        const totalProgress = ((start + event.loaded) / totalSize) * 100;
-                        progressBar.style.width = totalProgress + '%';
-                    }
-                };
-                xhr.onload = function() {
-                    if (xhr.status === 200) {
-                        resolve();
-                    } else {
-                        reject(new Error(Chunk upload failed with status ${xhr.status}));
-                    }
-                };
-                xhr.onerror = function() {
-                    reject(new Error('Network error occurred during chunk upload'));
-                };
-                xhr.send(formData);
-            });
-        }
     </script>
 </body>
 </html>
 """
 @app.get("/", response_class=HTMLResponse)
 async def index():
     return HTML_CONTENT
-@app.post("/upload_chunk")
-async def handle_upload_chunk(request: Request):
-    form = await request.form()
-    chunk = form['file'].file
-    chunk_index = int(form['chunkIndex'])
-    total_chunks = int(form['totalChunks'])
-    upload_id = form['uploadId']
-    file_name = form['fileName']
-    content_type = form['contentType']
-    temp_dir = f"temp_uploads/{upload_id}"
-    os.makedirs(temp_dir, exist_ok=True)
-    chunk_path = os.path.join(temp_dir, f"chunk{chunk_index}")
-    with open(chunk_path, 'wb') as f:
-        while True:
-            data = chunk.read(1024 * 1024)
-            if not data:
-                break
-            f.write(data)
-    return JSONResponse(content={"status": "chunk received"})
-@app.post("/assemble")
-async def assemble_chunks(request: Request):
-    data = await request.json()
-    upload_id = data['uploadId']
-    file_name = data['fileName']
-    content_type = data['contentType']
-    temp_dir = f"temp_uploads/{upload_id}"
-    chunk_files = sorted(os.listdir(temp_dir), key=lambda x: int(x.split('_')[1]))
-    file_path = os.path.join(temp_dir, file_name)
-    with open(file_path, 'wb') as outfile:
-        for chunk_file in chunk_files:
-            chunk_path = os.path.join(temp_dir, chunk_file)
-            with open(chunk_path, 'rb') as infile:
-                outfile.write(infile.read())
-    # Now proceed to upload the file to replicate.com as before
     cookies = await get_cookies()
-    upload_result = await initiate_upload(cookies, file_name, content_type)
     if not upload_result or 'upload_url' not in upload_result:
-        return JSONResponse(content={"error": "Failed to initiate upload"}, status_code=500)
-    # Read the assembled file
-    with open(file_path, 'rb') as f:
-        file_content = f.read()
-    upload_success = await retry_upload(upload_result['upload_url'], file_content, content_type)
     if not upload_success:
-        return JSONResponse(content={"error": "File upload failed after multiple attempts"}, status_code=500)
     original_url = upload_result['serving_url']
     mirrored_url = f"/rbxg/{original_url.split('/pbxt/')[1]}"
-    # Clean up temp files
-    shutil.rmtree(temp_dir)
     return JSONResponse(content={"url": mirrored_url})
 @app.get("/rbxg/{path:path}")
 async def handle_video_stream(path: str, request: Request):
     original_url = f'https://replicate.delivery/pbxt/{path}'
     range_header = request.headers.get('Range')
     headers = {'Range': range_header} if range_header else {}
     response = requests.get(original_url, headers=headers, stream=True)
     def generate():
         for chunk in response.iter_content(chunk_size=8192):
             yield chunk
     headers = dict(response.headers)
-    headers['Access-Control-Allow-Origin'] = ''
     headers['Content-Disposition'] = 'inline'
     if response.status_code == 206:
         headers['Content-Range'] = response.headers.get('Content-Range')
     return StreamingResponse(generate(), status_code=response.status_code, headers=headers)
 @app.get("/embed")
 async def embed_video(url: str, thumbnail: str):
     html = f'''
@@ -672,6 +701,7 @@ async def embed_video(url: str, thumbnail: str):
     </html>
     '''
     return HTMLResponse(content=html)
 async def get_cookies() -> Dict[str, str]:
     try:
         response = requests.get('https://replicate.com/levelsio/neon-tokyo', headers={
@@ -681,6 +711,7 @@ async def get_cookies() -> Dict[str, str]:
     except Exception as e:
         print(f'Error fetching the page: {e}')
         return {}
 async def initiate_upload(cookies: Dict[str, str], filename: str, content_type: str) -> Dict:
     url = f'https://replicate.com/api/upload/{filename}?content_type={content_type}'
     try:
@@ -689,7 +720,7 @@ async def initiate_upload(cookies: Dict[str, str], filename: str, content_type:
             'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36',
             'Referer': 'https://replicate.com/levelsio/neon-tokyo',
             'Origin': 'https://replicate.com',
-            'Accept': '/*',
             'Accept-Language': 'en-US,en;q=0.5',
             'Accept-Encoding': 'identity',
             'Sec-Fetch-Dest': 'empty',
@@ -702,6 +733,7 @@ async def initiate_upload(cookies: Dict[str, str], filename: str, content_type:
     except Exception as e:
         print(f'Error initiating upload: {e}')
         raise
 async def upload_file(upload_url: str, file_content: bytes, content_type: str) -> bool:
     try:
         response = requests.put(upload_url, data=file_content, headers={'Content-Type': content_type})
@@ -709,6 +741,7 @@ async def upload_file(upload_url: str, file_content: bytes, content_type: str) -
     except Exception as e:
         print(f'Error uploading file: {e}')
         return False
 async def retry_upload(upload_url: str, file_content: bytes, content_type: str, max_retries: int = 5, delay: int = 1) -> bool:
     retries = 0
     while retries < max_retries:
@@ -716,11 +749,12 @@ async def retry_upload(upload_url: str, file_content: bytes, content_type: str,
             success = await upload_file(upload_url, file_content, content_type)
             if success:
                 return True
-            print("Upload failed. Retrying...")
         except Exception as e:
-            print(f"Error during upload: {e}")
         await asyncio.sleep(delay)
         delay = min(delay * 2, 60)  # Exponential backoff, capped at 60 seconds
-        retries += 1
     return False

+from fastapi import FastAPI, File, UploadFile, Request, HTTPException
 from fastapi.responses import HTMLResponse, JSONResponse, StreamingResponse
+from fastapi.middleware.cors import CORSMiddleware
 import requests
 import time
 import asyncio
 from typing import Dict
 app = FastAPI()
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
 HTML_CONTENT = """
 <!DOCTYPE html>
 <html lang="en">
             padding: 20px;
             box-sizing: border-box;
         }
         body::before {
             content: "";
             position: fixed;
             opacity: 0.2;
             pointer-events: none;
         }
         @keyframes grain {
             0% { transform: translate(0, 0); }
             10% { transform: translate(-5%, -5%); }
             90% { transform: translate(10%, 5%); }
             100% { transform: translate(5%, 0); }
         }
         .container {
             position: relative;
             width: 100%;
             text-align: center;
             box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
         }
         h1 {
             margin-bottom: 1.5rem;
             font-size: 1.8rem;
             color: #ffffff;
             text-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
         }
         .btn {
             display: inline-block;
             position: relative;
             z-index: 1;
             transition: color 0.3s ease, box-shadow 0.3s ease;
         }
         .btn:hover {
             color: #ffffff;
             box-shadow: 0 0 15px rgba(200, 200, 200, 0.5);
         }
         .btn:hover::before {
             content: '';
             position: absolute;
             z-index: -1;
             pointer-events: none;
         }
         @keyframes glowAnimation {
             0% { transform: scale(0.8); }
             50% { transform: scale(1.2); }
             100% { transform: scale(0.8); }
         }
         .btn:active {
             transform: scale(0.98);
         }
         .small-btn {
             padding: 6px 12px;
             font-size: 0.8rem;
             z-index: 1;
             margin: 0.25rem;
         }
         .small-btn:hover {
             color: #ffffff;
             box-shadow: 0 0 10px rgba(200, 200, 200, 0.5);
         }
         .small-btn:hover::before {
             content: '';
             position: absolute;
             z-index: -1;
             pointer-events: none;
         }
         .small-btn:active {
             transform: scale(0.98);
         }
         .drop-zone {
             position: relative;
             padding: 20px;
             background: rgba(255, 255, 255, 0.05);
             overflow: hidden;
         }
         .drop-zone:hover, .drop-zone.drag-over {
             border-color: #ffffff;
             background: rgba(255, 255, 255, 0.1);
             position: relative;
         }
         .drop-zone:hover::before, .drop-zone.drag-over::before {
             content: '';
             position: absolute;
             z-index: -1;
             pointer-events: none;
         }
         @keyframes grainGlow {
             0% { opacity: 0.2; }
             50% { opacity: 0.5; }
             100% { opacity: 0.2; }
         }
         .file-input {
             display: none;
         }
         .file-name {
             margin-top: 1rem;
             font-size: 0.9rem;
             color: #aaa;
             word-break: break-all;
         }
         .progress-container {
             display: none;
             margin-top: 1.5rem;
         }
         .progress-bar {
             width: 100%;
             height: 10px;
             overflow: hidden;
             margin-bottom: 10px;
         }
         .progress {
             width: 0%;
             height: 100%;
             background-color: #ffffff;
             transition: width 0.3s ease;
         }
         .loading-spinner {
             display: none;
             width: 40px;
             animation: spin 1s linear infinite;
             margin: 20px auto;
         }
         @keyframes spin {
             0% { transform: rotate(0deg); }
             100% { transform: rotate(360deg); }
         }
         .result-container {
             display: none;
             margin-top: 1.5rem;
         }
         .result-link {
             color: #ffffff;
             text-decoration: none;
             margin-right: 10px;
             word-break: break-all;
         }
         .result-link:hover {
             text-decoration: underline;
         }
         .link-buttons {
             display: flex;
             justify-content: center;
             flex-wrap: wrap;
             margin-top: 10px;
         }
+        /* File Types */
         .file-types {
             margin-top: 2rem;
             font-size: 0.8rem;
             color: #aaa;
         }
         .modal {
             display: none;
             position: fixed;
             overflow: auto;
             background-color: rgba(0,0,0,0.8);
         }
         .modal-content {
             background-color: #1e1e1e;
             margin: 15% auto;
             animation: modalFadeIn 0.3s;
             position: relative;
         }
         @keyframes modalFadeIn {
             from {opacity: 0; transform: scale(0.8);}
             to {opacity: 1; transform: scale(1);}
         }
         .close {
             color: #aaa;
             position: absolute;
             font-weight: bold;
             transition: color 0.3s ease;
         }
         .close:hover,
         .close:focus {
             color: #fff;
             text-decoration: none;
             cursor: pointer;
         }
         .embed-container {
             display: flex;
             flex-direction: column;
             align-items: stretch;
             margin-top: 15px;
         }
         #embedLink {
             width: 100%;
             padding: 10px;
             margin-bottom: 10px;
             font-size: 0.9rem;
         }
         @media (max-width: 480px) {
             .container {
                 padding: 1.5rem;
             }
             h1 {
                 font-size: 1.5rem;
             }
             .btn, .small-btn {
                 font-size: 0.9rem;
                 padding: 10px 20px;
             }
             .file-types {
                 font-size: 0.7rem;
             }
             .modal-content {
                 width: 95%;
                 margin: 10% auto;
         <h1>Radd PRO Uploader</h1>
         <form id="uploadForm">
             <div id="dropZone" class="drop-zone">
+                <input type="file" name="file" id="file" class="file-input" accept=".zip,.mp4,.txt,.mp3,image/*,.pdf" required>
                 <label for="file" class="btn">Choose File</label>
                 <p>or drag and drop file here/paste image</p>
             </div>
             Allowed file types: .zip, .mp4, .txt, .mp3, all image types, .pdf
         </div>
     </div>
     <div id="embedModal" class="modal">
         <div class="modal-content">
+            <span class="close">&times;</span>
             <h2>Embed Video Link</h2>
             <p>copy the link to embed it on discord:</p>
             <div class="embed-container">
             </div>
         </div>
     </div>
     <script>
         const fileInput = document.getElementById('file');
         const fileName = document.getElementById('fileName');
         const uploadForm = document.getElementById('uploadForm');
         const progressContainer = document.getElementById('progressContainer');
         const loadingSpinner = document.getElementById('loadingSpinner');
+                const resultContainer = document.getElementById('resultContainer');
         const dropZone = document.getElementById('dropZone');
         const modal = document.getElementById('embedModal');
         const span = document.getElementsByClassName("close")[0];
         const embedLinkInput = document.getElementById('embedLink');
         const uploadBtn = document.getElementById('uploadBtn');
         fileInput.addEventListener('change', handleFileSelect);
+        uploadForm.addEventListener('submit', async (e) => {
             e.preventDefault();
             if (fileInput.files.length > 0) {
+                await uploadFile(fileInput.files[0]);
             }
         });
         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');
             handleFileSelect({ target: { files: e.dataTransfer.files } });
         });
         document.addEventListener('paste', (e) => {
             const items = e.clipboardData.items;
             for (let i = 0; i < items.length; i++) {
                 }
             }
         });
         span.onclick = function() {
             modal.style.display = "none";
         }
         window.onclick = function(event) {
             if (event.target == modal) {
                 modal.style.display = "none";
             }
         }
         function handleFileSelect(e) {
             if (e.target.files && e.target.files.length > 0) {
                 const file = e.target.files[0];
                 fileInput.files = dataTransfer.files;
             }
         }
         async function uploadFile(file) {
             progressContainer.innerHTML = '';
             progressContainer.style.display = 'block';
             loadingSpinner.style.display = 'block';
             uploadBtn.disabled = true;
             resultContainer.innerHTML = '';
             resultContainer.style.display = 'none';
             const progressBar = createProgressBar(file.name);
             progressContainer.appendChild(progressBar);
+            const formData = new FormData();
+            formData.append('file', file);
+            try {
+                const xhr = new XMLHttpRequest();
+                xhr.open('POST', '/upload', true);
+                xhr.upload.onprogress = (event) => updateProgress(event, progressBar.querySelector('.progress'));
+                xhr.onload = function() {
+                    if (xhr.status === 200) {
+                        const response = JSON.parse(xhr.responseText);
+                        if (response.url) {
+                            addResultLink(response.url, file.name);
+                        } else {
+                            throw new Error('Upload failed: ' + response.error);
+                        }
+                    } else {
+                        throw new Error(`HTTP error! status: ${xhr.status}`);
                     }
+                };
+                xhr.onerror = function() {
+                    throw new Error('Network error occurred');
+                };
+                xhr.send(formData);
+                await new Promise((resolve, reject) => {
+                    xhr.onloadend = resolve;
+                    xhr.onerror = reject;
+                });
+            } catch (error) {
+                console.error('Upload error:', error);
+                alert('Upload failed: ' + error.message);
+            } finally {
                 resetUploadState();
             }
         }
         function createProgressBar(fileName) {
             const progressBarContainer = document.createElement('div');
             progressBarContainer.className = 'progress-bar';
             container.appendChild(progressBarContainer);
             return container;
         }
+        function updateProgress(event, progressBar) {
+            if (event.lengthComputable) {
+                const percentComplete = (event.loaded / event.total) * 100;
+                progressBar.style.width = percentComplete + '%';
+            }
+        }
         function resetUploadState() {
             fileInput.value = '';
             fileName.textContent = '';
             uploadBtn.disabled = false;
             loadingSpinner.style.display = 'none';
         }
         function addResultLink(url, fileName) {
             const linkContainer = document.createElement('div');
             linkContainer.style.marginBottom = '10px';
             const link = document.createElement('a');
             link.href = url;
+            link.textContent = `View ${fileName}`;
             link.className = 'result-link';
+            link.target = '_blank';
             linkContainer.appendChild(link);
             const buttonsContainer = document.createElement('div');
             buttonsContainer.className = 'link-buttons';
             const copyBtn = document.createElement('button');
             copyBtn.textContent = 'Copy Link';
             copyBtn.className = 'small-btn copy-btn';
                 });
             };
             buttonsContainer.appendChild(copyBtn);
             if (fileName.toLowerCase().endsWith('.mp4')) {
                 const embedBtn = document.createElement('button');
                 embedBtn.textContent = 'Embed Video for Discord';
                 };
                 buttonsContainer.appendChild(embedBtn);
             }
             linkContainer.appendChild(buttonsContainer);
             resultContainer.appendChild(linkContainer);
             resultContainer.style.display = 'block';
         }
         function showEmbedModal(url) {
+            const embedUrl = `${window.location.origin}/embed?url=${encodeURIComponent(window.location.origin + url)}&thumbnail=${encodeURIComponent('https://coollsd-fileuploader.hf.space/rbxg/LdnShkhZFgMlMmCwkeX78RqHbiol6r554v5BryQS9upEC1wu/Untitled.png')}`;
             embedLinkInput.value = embedUrl;
             modal.style.display = "block";
         }
         function copyEmbedLink() {
             embedLinkInput.select();
             document.execCommand('copy');
             alert('Embed link copied to clipboard!');
         }
     </script>
 </body>
 </html>
 """
 @app.get("/", response_class=HTMLResponse)
 async def index():
     return HTML_CONTENT
+@app.post("/upload")
+async def handle_upload(file: UploadFile = File(...)):
+    if not file:
+        raise HTTPException(status_code=400, detail="No file part")
+    if file.filename == '':
+        raise HTTPException(status_code=400, detail="No selected file")
     cookies = await get_cookies()
+    if 'csrftoken' not in cookies or 'sessionid' not in cookies:
+        raise HTTPException(status_code=500, detail="Failed to obtain necessary cookies")
+    upload_result = await initiate_upload(cookies, file.filename, file.content_type)
     if not upload_result or 'upload_url' not in upload_result:
+        raise HTTPException(status_code=500, detail="Failed to initiate upload")
+    file_content = await file.read()
+    upload_success = await retry_upload(upload_result['upload_url'], file_content, file.content_type)
     if not upload_success:
+        raise HTTPException(status_code=500, detail="File upload failed after multiple attempts")
     original_url = upload_result['serving_url']
     mirrored_url = f"/rbxg/{original_url.split('/pbxt/')[1]}"
     return JSONResponse(content={"url": mirrored_url})
 @app.get("/rbxg/{path:path}")
 async def handle_video_stream(path: str, request: Request):
     original_url = f'https://replicate.delivery/pbxt/{path}'
     range_header = request.headers.get('Range')
     headers = {'Range': range_header} if range_header else {}
     response = requests.get(original_url, headers=headers, stream=True)
     def generate():
         for chunk in response.iter_content(chunk_size=8192):
             yield chunk
     headers = dict(response.headers)
+    headers['Access-Control-Allow-Origin'] = '*'
     headers['Content-Disposition'] = 'inline'
     if response.status_code == 206:
         headers['Content-Range'] = response.headers.get('Content-Range')
     return StreamingResponse(generate(), status_code=response.status_code, headers=headers)
 @app.get("/embed")
 async def embed_video(url: str, thumbnail: str):
     html = f'''
     </html>
     '''
     return HTMLResponse(content=html)
 async def get_cookies() -> Dict[str, str]:
     try:
         response = requests.get('https://replicate.com/levelsio/neon-tokyo', headers={
     except Exception as e:
         print(f'Error fetching the page: {e}')
         return {}
 async def initiate_upload(cookies: Dict[str, str], filename: str, content_type: str) -> Dict:
     url = f'https://replicate.com/api/upload/{filename}?content_type={content_type}'
     try:
             'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36',
             'Referer': 'https://replicate.com/levelsio/neon-tokyo',
             'Origin': 'https://replicate.com',
+            'Accept': '*/*',
             'Accept-Language': 'en-US,en;q=0.5',
             'Accept-Encoding': 'identity',
             'Sec-Fetch-Dest': 'empty',
     except Exception as e:
         print(f'Error initiating upload: {e}')
         raise
 async def upload_file(upload_url: str, file_content: bytes, content_type: str) -> bool:
     try:
         response = requests.put(upload_url, data=file_content, headers={'Content-Type': content_type})
     except Exception as e:
         print(f'Error uploading file: {e}')
         return False
 async def retry_upload(upload_url: str, file_content: bytes, content_type: str, max_retries: int = 5, delay: int = 1) -> bool:
     retries = 0
     while retries < max_retries:
             success = await upload_file(upload_url, file_content, content_type)
             if success:
                 return True
+            print(f"Upload attempt {retries + 1} failed. Retrying...")
         except Exception as e:
+            print(f"Error during upload attempt {retries + 1}: {e}")
+        retries += 1
         await asyncio.sleep(delay)
         delay = min(delay * 2, 60)  # Exponential backoff, capped at 60 seconds
     return False