Spaces:

coollsd
/

fileuploader

Running

App Files Files Community

coollsd commited on Sep 17, 2024

Commit

2b158ec

verified ·

1 Parent(s): 75193ce

Update app.py

Browse files

Files changed (1) hide show

app.py +166 -104

app.py CHANGED Viewed

@@ -1,131 +1,195 @@
 from fastapi import FastAPI, File, UploadFile, Request
-from fastapi.responses import HTMLResponse, StreamingResponse, JSONResponse
 import requests
-from urllib.parse import urljoin
 import time
 from typing import Dict
-import uvicorn
 app = FastAPI()
-HTML_CONTENT = '''
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>File Upload</title>
-    <!-- Include Bootstrap CSS for styling -->
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
-    <!-- Include custom styles -->
     <style>
         body {
-            background: linear-gradient(135deg, #1abc9c, #3498db);
-            color: #fff;
             height: 100vh;
             display: flex;
             justify-content: center;
             align-items: center;
-            flex-direction: column;
-            font-family: Arial, sans-serif;
-            overflow: hidden;
         }
         h1 {
-            margin-bottom: 30px;
-            animation: fadeInDown 1s;
         }
-        form {
-            background: rgba(255, 255, 255, 0.1);
-            padding: 30px;
-            border-radius: 10px;
-            animation: fadeInUp 1s;
         }
-        .btn-upload {
-            margin-top: 20px;
         }
         .progress {
-            margin-top: 20px;
             display: none;
         }
-        @keyframes fadeInDown {
-            from {opacity: 0; transform: translateY(-50px);}
-            to {opacity: 1; transform: translateY(0);}
         }
-        @keyframes fadeInUp {
-            from {opacity: 0; transform: translateY(50px);}
-            to {opacity: 1; transform: translateY(0);}
         }
     </style>
 </head>
 <body>
-    <h1>Upload Your File</h1>
-    <form id="upload-form">
-        <div class="custom-file">
-            <input type="file" class="custom-file-input" id="file-input" name="file" accept="/" required>
-            <label class="custom-file-label" for="file-input">Choose file...</label>
-        </div>
-        <button type="submit" class="btn btn-primary btn-upload">Upload</button>
-        <div class="progress">
-            <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;"></div>
-        </div>
-    </form>
-    <!-- Include jQuery and Bootstrap JS for handling events and styles -->
-    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
-    <!-- Include Popper and Bootstrap JS -->
-    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
-    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
-    <!-- Custom script -->
     <script>
-        $(document).ready(function(){
-            $('#file-input').on('change', function(){
-                // Get the file name and display it
-                var fileName = $(this).val().split('\\').pop();
-                $(this).next('.custom-file-label').html(fileName);
-            });
-            $('#upload-form').on('submit', function(e){
-                e.preventDefault();
-                var formData = new FormData();
-                var fileInput = $('#file-input')[0];
-                if (fileInput.files.length === 0) {
-                    alert('Please select a file to upload.');
-                    return;
                 }
-                formData.append('file', fileInput.files[0]);
-                $('.progress').show();
-                $.ajax({
-                    url: '/upload',
-                    type: 'POST',
-                    data: formData,
-                    contentType: false,
-                    processData: false,
-                    xhr: function(){
-                        var xhr = new window.XMLHttpRequest();
-                        xhr.upload.addEventListener('progress', function(e){
-                            if (e.lengthComputable) {
-                                var percentComplete = (e.loaded / e.total) * 100;
-                                $('.progress-bar').css('width', percentComplete + '%');
-                                $('.progress-bar').attr('aria-valuenow', percentComplete);
-                            }
-                        }, false);
-                        return xhr;
-                    },
-                    success: function(response){
-                        window.location.href = response.url;
-                    },
-                    error: function(jqXHR){
-                        var errorMsg = jqXHR.responseJSON && jqXHR.responseJSON.error ? jqXHR.responseJSON.error : 'File upload failed.';
-                        alert(errorMsg);
-                        $('.progress').hide();
-                        $('.progress-bar').css('width', '0%');
-                    }
-                });
             });
-        });
     </script>
 </body>
 </html>
-'''
 @app.get("/", response_class=HTMLResponse)
 async def index():
@@ -138,22 +202,20 @@ async def handle_upload(file: UploadFile = File(...)):
     cookies = await get_cookies()
     if 'csrftoken' not in cookies or 'sessionid' not in cookies:
-        return JSONResponse(content={"error": "Failed to obtain necessary cookies."}, status_code=500)
-    try:
-        upload_result = await initiate_upload(cookies, file.filename, file.content_type)
-    except Exception as e:
-        return JSONResponse(content={"error": f"Failed to initiate upload: {e}"}, status_code=500)
     if not upload_result or 'upload_url' not in upload_result:
-        return JSONResponse(content={"error": "Failed to initiate upload."}, status_code=500)
     file_content = await file.read()
     upload_success = await retry_upload(upload_result['upload_url'], file_content, file.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]}"
     return JSONResponse(content={"url": mirrored_url})
 @app.get("/rbxg/{path:path}")
@@ -168,13 +230,13 @@ async def handle_video_stream(path: str, request: Request):
         for chunk in response.iter_content(chunk_size=8192):
             yield chunk
-    response_headers = dict(response.headers)
-    response_headers['Access-Control-Allow-Origin'] = ''
     if response.status_code == 206:
-        response_headers['Content-Range'] = response.headers.get('Content-Range')
-    return StreamingResponse(generate(), status_code=response.status_code, headers=response_headers)
 async def get_cookies() -> Dict[str, str]:
     try:
@@ -194,7 +256,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',

 from fastapi import FastAPI, File, UploadFile, Request
+from fastapi.responses import HTMLResponse, JSONResponse, StreamingResponse
 import requests
 import time
 from typing import Dict
 app = FastAPI()
+HTML_CONTENT = """
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Pro File Uploader</title>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
     <style>
         body {
+            font-family: 'Poppins', sans-serif;
+            background: linear-gradient(135deg, #20B2AA 0%, #48D1CC 100%);
             height: 100vh;
+            margin: 0;
             display: flex;
             justify-content: center;
             align-items: center;
+            color: #333;
+        }
+        .container {
+            background: rgba(255, 255, 255, 0.95);
+            padding: 2rem;
+            border-radius: 20px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+            text-align: center;
+            max-width: 400px;
+            width: 100%;
+            transition: all 0.3s ease;
+        }
+        .container:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
         }
         h1 {
+            color: #20B2AA;
+            margin-bottom: 1.5rem;
+            font-weight: 600;
+        }
+        .file-input {
+            display: none;
+        }
+        .file-label {
+            background-color: #20B2AA;
+            color: white;
+            padding: 12px 24px;
+            border-radius: 30px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            display: inline-block;
+            font-weight: 600;
+        }
+        .file-label:hover {
+            background-color: #48D1CC;
+            transform: scale(1.05);
         }
+        .file-name {
+            margin-top: 1rem;
+            font-size: 0.9rem;
+            color: #666;
         }
+        .progress-container {
+            margin-top: 1.5rem;
+            display: none;
+        }
+        .progress-bar {
+            width: 100%;
+            height: 10px;
+            background-color: #e0e0e0;
+            border-radius: 5px;
+            overflow: hidden;
         }
         .progress {
+            width: 0%;
+            height: 100%;
+            background-color: #20B2AA;
+            transition: width 0.5s ease;
+        }
+        .loading-spinner {
             display: none;
+            width: 40px;
+            height: 40px;
+            border: 4px solid #f3f3f3;
+            border-top: 4px solid #20B2AA;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+            margin: 20px auto;
         }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
         }
+        .result-link {
+            display: none;
+            margin-top: 1rem;
+            color: #20B2AA;
+            text-decoration: none;
+            font-weight: 600;
+            transition: all 0.3s ease;
+        }
+        .result-link:hover {
+            color: #48D1CC;
+            text-decoration: underline;
         }
     </style>
 </head>
 <body>
+    <div class="container">
+        <h1>Pro File Uploader</h1>
+        <form id="uploadForm" action="/upload" method="post" enctype="multipart/form-data">
+            <input type="file" name="file" id="file" class="file-input" accept="*/*" required>
+            <label for="file" class="file-label">Choose File</label>
+            <div class="file-name" id="fileName"></div>
+            <div class="progress-container" id="progressContainer">
+                <div class="progress-bar">
+                    <div class="progress" id="progress"></div>
+                </div>
+            </div>
+            <div class="loading-spinner" id="loadingSpinner"></div>
+        </form>
+        <a href="#" class="result-link" id="resultLink" target="_blank">View Uploaded File</a>
+    </div>
     <script>
+        const fileInput = document.getElementById('file');
+        const fileName = document.getElementById('fileName');
+        const uploadForm = document.getElementById('uploadForm');
+        const progressContainer = document.getElementById('progressContainer');
+        const progress = document.getElementById('progress');
+        const loadingSpinner = document.getElementById('loadingSpinner');
+        const resultLink = document.getElementById('resultLink');
+        fileInput.addEventListener('change', (e) => {
+            if (e.target.files.length > 0) {
+                fileName.textContent = e.target.files[0].name;
+                uploadFile(e.target.files[0]);
+            }
+        });
+        function uploadFile(file) {
+            const formData = new FormData();
+            formData.append('file', file);
+            progressContainer.style.display = 'block';
+            loadingSpinner.style.display = 'block';
+            fetch('/upload', {
+                method: 'POST',
+                body: formData
+            })
+            .then(response => response.json())
+            .then(data => {
+                loadingSpinner.style.display = 'none';
+                if (data.url) {
+                    resultLink.href = data.url;
+                    resultLink.textContent = 'View Uploaded File';
+                    resultLink.style.display = 'inline-block';
+                } else {
+                    resultLink.style.display = 'none';
+                    alert('Upload failed: ' + data.error);
                 }
+            })
+            .catch(error => {
+                loadingSpinner.style.display = 'none';
+                alert('Upload failed: ' + error);
             });
+            simulateProgress();
+        }
+        function simulateProgress() {
+            let width = 0;
+            const interval = setInterval(() => {
+                if (width >= 90) {
+                    clearInterval(interval);
+                } else {
+                    width++;
+                    progress.style.width = width + '%';
+                }
+            }, 50);
+        }
     </script>
 </body>
 </html>
+"""
 @app.get("/", response_class=HTMLResponse)
 async def index():
     cookies = await get_cookies()
     if 'csrftoken' not in cookies or 'sessionid' not in cookies:
+        return JSONResponse(content={"error": "Failed to obtain necessary cookies"}, status_code=500)
+    upload_result = await initiate_upload(cookies, file.filename, file.content_type)
     if not upload_result or 'upload_url' not in upload_result:
+        return JSONResponse(content={"error": "Failed to initiate upload"}, status_code=500)
     file_content = await file.read()
     upload_success = await retry_upload(upload_result['upload_url'], file_content, file.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]}"
     return JSONResponse(content={"url": mirrored_url})
 @app.get("/rbxg/{path:path}")
         for chunk in response.iter_content(chunk_size=8192):
             yield chunk
+    headers = dict(response.headers)
+    headers['Access-Control-Allow-Origin'] = '*'
     if response.status_code == 206:
+        headers['Content-Range'] = response.headers.get('Content-Range')
+    return StreamingResponse(generate(), status_code=response.status_code, headers=headers)
 async def get_cookies() -> Dict[str, str]:
     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',