Add form data and file upload support with UI controls

- Add form endpoints: /form/login, /form/contact for URL-encoded data
- Add file upload endpoints: /upload/file, /upload/files, /upload/file-with-data
- Add file management: GET /upload/files, GET/DELETE /upload/file/{id}
- Add Form tab with dynamic field management in UI
- Add File tab with drag-and-drop upload area
- Add code snippet panel to display generated cURL/Python/fetch/HTTPie code
- Update examples grid with form and file upload examples

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

app.py

@@ -10,12 +10,16 @@ Endpoints cover:
 - Headers, Status Codes, and more
 """
 
-from fastapi import FastAPI, Query, Path, Body, Header, Response, HTTPException, Request
+from fastapi import FastAPI, Query, Path, Body, Header, Response, HTTPException, Request, File, UploadFile, Form
 from fastapi.responses import PlainTextResponse, HTMLResponse, JSONResponse
 from pydantic import BaseModel, Field
 from typing import Optional, List
 from datetime import datetime
 import json
+import base64
+
+# In-memory storage for uploaded files
+uploaded_files_db = {}
 
 app = FastAPI(
     title="API Teaching Tool",
@@ -69,6 +73,7 @@ def api_info():
             "PUT examples": ["/items/{id}"],
             "DELETE examples": ["/items/{id}"],
             "PATCH examples": ["/items/{id}"],
+            "Form & File Upload": ["/form/login", "/form/contact", "/upload/file", "/upload/files", "/upload/file-with-data"],
             "Response formats": ["/format/json", "/format/text", "/format/html", "/format/xml"],
             "Educational": ["/echo", "/headers", "/status/{code}"],
         }
@@ -381,6 +386,130 @@ def ui():
         .json-boolean { color: #aa0d91; }
         .json-null { color: #86868b; }
 
+        /* Form fields */
+        .form-group { margin-bottom: 12px; }
+        .form-label {
+            display: block;
+            font-size: 12px;
+            font-weight: 500;
+            color: #86868b;
+            margin-bottom: 4px;
+        }
+        .form-input {
+            width: 100%;
+            padding: 8px 12px;
+            background: #f5f5f7;
+            border: 1px solid transparent;
+            border-radius: 6px;
+            font-size: 14px;
+            transition: border-color 0.2s;
+        }
+        .form-input:focus { border-color: #007aff; outline: none; }
+        .form-row { display: flex; gap: 12px; }
+        .form-row .form-group { flex: 1; }
+        .checkbox-group {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        .checkbox-group input { width: 16px; height: 16px; }
+
+        /* File upload */
+        .file-upload-area {
+            border: 2px dashed #d2d2d7;
+            border-radius: 8px;
+            padding: 24px;
+            text-align: center;
+            transition: all 0.2s;
+            cursor: pointer;
+            background: #fafafa;
+        }
+        .file-upload-area:hover { border-color: #007aff; background: #f0f7ff; }
+        .file-upload-area.dragover { border-color: #007aff; background: #e8f4ff; }
+        .file-upload-icon { font-size: 32px; margin-bottom: 8px; }
+        .file-upload-text { font-size: 13px; color: #86868b; }
+        .file-upload-text strong { color: #007aff; }
+        .file-input { display: none; }
+        .file-list { margin-top: 12px; }
+        .file-item {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 8px 12px;
+            background: #f5f5f7;
+            border-radius: 6px;
+            margin-bottom: 6px;
+            font-size: 13px;
+        }
+        .file-item-name { font-weight: 500; }
+        .file-item-size { color: #86868b; font-size: 11px; }
+        .file-item-remove {
+            background: none;
+            border: none;
+            color: #ff3b30;
+            cursor: pointer;
+            font-size: 16px;
+            padding: 0 4px;
+        }
+
+        /* Code snippet panel */
+        .code-panel {
+            margin-top: 20px;
+            background: #fff;
+            border-radius: 10px;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.08);
+            overflow: hidden;
+            display: none;
+        }
+        .code-panel.show { display: block; }
+        .code-panel-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 12px 16px;
+            background: #fafafa;
+            border-bottom: 1px solid #d2d2d7;
+        }
+        .code-panel-title { font-weight: 600; font-size: 13px; }
+        .code-panel-close {
+            background: none;
+            border: none;
+            font-size: 18px;
+            color: #86868b;
+            cursor: pointer;
+            padding: 0 4px;
+        }
+        .code-panel-close:hover { color: #1d1d1f; }
+        .code-panel-content {
+            padding: 16px;
+            font-family: 'SF Mono', Menlo, monospace;
+            font-size: 13px;
+            line-height: 1.6;
+            white-space: pre-wrap;
+            word-break: break-all;
+            background: #1d1d1f;
+            color: #f5f5f7;
+            max-height: 300px;
+            overflow: auto;
+        }
+        .code-panel-actions {
+            padding: 12px 16px;
+            background: #fafafa;
+            border-top: 1px solid #d2d2d7;
+            display: flex;
+            gap: 8px;
+        }
+        .code-copy-btn {
+            padding: 6px 12px;
+            background: #007aff;
+            color: #fff;
+            border: none;
+            border-radius: 6px;
+            font-size: 12px;
+            cursor: pointer;
+        }
+        .code-copy-btn:hover { background: #0056b3; }
+
         /* Preview */
         .preview-container {
             padding: 16px;
@@ -481,12 +610,56 @@ def ui():
             <div class="panel">
                 <div class="tabs" id="request-tabs">
                     <button class="tab active" data-tab="req-body">Body</button>
+                    <button class="tab" data-tab="req-form">Form</button>
+                    <button class="tab" data-tab="req-file">File</button>
                     <button class="tab" data-tab="req-headers">Headers</button>
                 </div>
                 <div class="panel-body">
                     <div class="tab-content active" id="req-body-tab">
                         <textarea id="body" placeholder='{"name": "Laptop", "price": 999.99, "quantity": 5}'></textarea>
                     </div>
+                    <div class="tab-content" id="req-form-tab">
+                        <div id="form-fields">
+                            <div class="form-row">
+                                <div class="form-group">
+                                    <label class="form-label">Field Name</label>
+                                    <input type="text" class="form-input form-field-name" placeholder="username">
+                                </div>
+                                <div class="form-group">
+                                    <label class="form-label">Value</label>
+                                    <input type="text" class="form-input form-field-value" placeholder="john_doe">
+                                </div>
+                            </div>
+                        </div>
+                        <button type="button" id="add-form-field" style="margin-top:8px;padding:6px 12px;background:#f5f5f7;border:1px solid #d2d2d7;border-radius:6px;font-size:12px;cursor:pointer;">+ Add Field</button>
+                        <div style="margin-top:12px;font-size:11px;color:#86868b;">
+                            Content-Type: application/x-www-form-urlencoded
+                        </div>
+                    </div>
+                    <div class="tab-content" id="req-file-tab">
+                        <div class="file-upload-area" id="file-drop-area">
+                            <div class="file-upload-icon">📁</div>
+                            <div class="file-upload-text">
+                                <strong>Click to upload</strong> or drag and drop<br>
+                                <span style="font-size:11px;">Any file type supported</span>
+                            </div>
+                            <input type="file" id="file-input" class="file-input" multiple>
+                        </div>
+                        <div class="file-list" id="file-list"></div>
+                        <div id="file-metadata" style="margin-top:12px;display:none;">
+                            <div class="form-group">
+                                <label class="form-label">Title (optional)</label>
+                                <input type="text" class="form-input" id="file-title" placeholder="My Document">
+                            </div>
+                            <div class="form-group">
+                                <label class="form-label">Description (optional)</label>
+                                <input type="text" class="form-input" id="file-description" placeholder="A description of the file">
+                            </div>
+                        </div>
+                        <div style="margin-top:12px;font-size:11px;color:#86868b;">
+                            Content-Type: multipart/form-data
+                        </div>
+                    </div>
                     <div class="tab-content" id="req-headers-tab">
                         <textarea id="headers" placeholder="Content-Type: application/json">Content-Type: application/json</textarea>
                     </div>
@@ -530,6 +703,18 @@ def ui():
             <h3>Examples</h3>
             <div class="examples-grid" id="examples"></div>
         </div>
+
+        <!-- Code Snippet Panel -->
+        <div class="code-panel" id="code-panel">
+            <div class="code-panel-header">
+                <span class="code-panel-title" id="code-panel-title">cURL</span>
+                <button class="code-panel-close" id="code-panel-close">&times;</button>
+            </div>
+            <div class="code-panel-content" id="code-panel-content"></div>
+            <div class="code-panel-actions">
+                <button class="code-copy-btn" id="code-copy-btn">Copy to Clipboard</button>
+            </div>
+        </div>
     </div>
 
     <script>
@@ -545,18 +730,21 @@ def ui():
             { method: 'PUT', url: '/items/1', title: 'Replace Item', body: '{"name": "Green Apple", "price": 2.50, "quantity": 200}' },
             { method: 'PATCH', url: '/items/1', title: 'Partial Update', body: '{"price": 1.99}' },
             { method: 'DELETE', url: '/items/3', title: 'Delete Item' },
+            { method: 'POST', url: '/form/login', title: 'Form Login', formData: {username: 'john_doe', password: 'secret123', remember_me: 'true'} },
+            { method: 'POST', url: '/form/contact', title: 'Contact Form', formData: {name: 'Alice', email: 'alice@example.com', subject: 'Hello', message: 'Nice API!'} },
+            { method: 'POST', url: '/upload/file', title: 'File Upload', isFileUpload: true },
+            { method: 'GET', url: '/upload/files', title: 'List Uploads' },
             { method: 'GET', url: '/format/json', title: 'JSON Format' },
             { method: 'GET', url: '/format/xml', title: 'XML Format' },
             { method: 'GET', url: '/format/html', title: 'HTML Format' },
             { method: 'GET', url: '/format/csv', title: 'CSV Format' },
-            { method: 'GET', url: '/format/yaml', title: 'YAML Format' },
-            { method: 'GET', url: '/format/markdown', title: 'Markdown' },
-            { method: 'GET', url: '/format/image', title: 'PNG Image' },
             { method: 'GET', url: '/headers', title: 'View Headers' },
             { method: 'GET', url: '/status/404', title: 'Error 404' },
-            { method: 'GET', url: '/status/201', title: 'Status 201' },
         ];
 
+        // Track selected files
+        let selectedFiles = [];
+
         // Render examples
         const examplesContainer = document.getElementById('examples');
         examples.forEach(ex => {
@@ -573,10 +761,52 @@ def ui():
                 document.getElementById('method').value = ex.method;
                 document.getElementById('url').value = ex.url;
                 document.getElementById('body').value = ex.body || '';
+
+                // Handle form data examples
+                if (ex.formData) {
+                    switchToTab('request-tabs', 'req-form');
+                    populateFormFields(ex.formData);
+                } else if (ex.isFileUpload) {
+                    switchToTab('request-tabs', 'req-file');
+                } else {
+                    switchToTab('request-tabs', 'req-body');
+                }
             };
             examplesContainer.appendChild(btn);
         });
 
+        function switchToTab(tabsId, tabName) {
+            const container = document.getElementById(tabsId);
+            container.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+            const tab = container.querySelector(`[data-tab="${tabName}"]`);
+            if (tab) {
+                tab.classList.add('active');
+                const panel = container.closest('.panel') || document;
+                panel.querySelectorAll(':scope > .tab-content, :scope > .panel-body > .tab-content').forEach(c => c.classList.remove('active'));
+                document.getElementById(tabName + '-tab').classList.add('active');
+            }
+        }
+
+        function populateFormFields(data) {
+            const container = document.getElementById('form-fields');
+            container.innerHTML = '';
+            Object.entries(data).forEach(([key, value], i) => {
+                const row = document.createElement('div');
+                row.className = 'form-row';
+                row.innerHTML = `
+                    <div class="form-group">
+                        <label class="form-label">${i === 0 ? 'Field Name' : ''}</label>
+                        <input type="text" class="form-input form-field-name" value="${key}" placeholder="field_name">
+                    </div>
+                    <div class="form-group">
+                        <label class="form-label">${i === 0 ? 'Value' : ''}</label>
+                        <input type="text" class="form-input form-field-value" value="${value}" placeholder="value">
+                    </div>
+                `;
+                container.appendChild(row);
+            });
+        }
+
         // Tab switching
         function setupTabs(containerId) {
             const container = document.getElementById(containerId);
@@ -604,12 +834,35 @@ def ui():
                 .replace(/: (null)/g, ': <span class="json-null">$1</span>');
         }
 
+        // Get active request type
+        function getActiveRequestType() {
+            const formTab = document.getElementById('req-form-tab');
+            const fileTab = document.getElementById('req-file-tab');
+            if (formTab.classList.contains('active')) return 'form';
+            if (fileTab.classList.contains('active')) return 'file';
+            return 'body';
+        }
+
+        // Get form data from the form fields
+        function getFormFieldsData() {
+            const data = {};
+            const names = document.querySelectorAll('.form-field-name');
+            const values = document.querySelectorAll('.form-field-value');
+            names.forEach((nameInput, i) => {
+                const name = nameInput.value.trim();
+                const value = values[i]?.value || '';
+                if (name) data[name] = value;
+            });
+            return data;
+        }
+
         // Send request
         async function sendRequest() {
             const method = document.getElementById('method').value;
             const url = document.getElementById('url').value;
             const body = document.getElementById('body').value;
             const headersText = document.getElementById('headers').value;
+            const requestType = getActiveRequestType();
 
             const headers = {};
             headersText.split('\\n').forEach(line => {
@@ -618,8 +871,32 @@ def ui():
             });
 
             const opts = { method, headers };
-            if (['POST', 'PUT', 'PATCH'].includes(method) && body) {
-                opts.body = body;
+
+            if (['POST', 'PUT', 'PATCH'].includes(method)) {
+                if (requestType === 'form') {
+                    // Form URL-encoded data
+                    const formData = getFormFieldsData();
+                    opts.body = new URLSearchParams(formData).toString();
+                    opts.headers['Content-Type'] = 'application/x-www-form-urlencoded';
+                } else if (requestType === 'file' && selectedFiles.length > 0) {
+                    // Multipart form data for file upload
+                    const formData = new FormData();
+                    if (selectedFiles.length === 1) {
+                        formData.append('file', selectedFiles[0]);
+                    } else {
+                        selectedFiles.forEach(f => formData.append('files', f));
+                    }
+                    // Add optional metadata
+                    const title = document.getElementById('file-title')?.value;
+                    const description = document.getElementById('file-description')?.value;
+                    if (title) formData.append('title', title);
+                    if (description) formData.append('description', description);
+                    opts.body = formData;
+                    // Don't set Content-Type for FormData - browser sets it with boundary
+                    delete opts.headers['Content-Type'];
+                } else if (body) {
+                    opts.body = body;
+                }
             }
 
             document.getElementById('send').disabled = true;
@@ -928,8 +1205,13 @@ def ui():
                 e.stopPropagation();
                 const format = btn.dataset.format;
                 const code = generateCode(format);
+                const formattedCode = code.replace(/\\\\n/g, '\\n');
+
+                // Show in code panel
+                showCodePanel(format, formattedCode);
+
                 try {
-                    await navigator.clipboard.writeText(code.replace(/\\\\n/g, '\\n'));
+                    await navigator.clipboard.writeText(formattedCode);
                     showToast(`Copied as ${format.toUpperCase()}!`);
                 } catch {
                     showToast('Failed to copy');
@@ -937,6 +1219,114 @@ def ui():
                 copyMenu.classList.remove('show');
             };
         });
+
+        // Code panel functionality
+        const codePanel = document.getElementById('code-panel');
+        const codePanelTitle = document.getElementById('code-panel-title');
+        const codePanelContent = document.getElementById('code-panel-content');
+        const codePanelClose = document.getElementById('code-panel-close');
+        const codeCopyBtn = document.getElementById('code-copy-btn');
+
+        function showCodePanel(format, code) {
+            const titles = {
+                curl: 'cURL Command',
+                python: 'Python (requests)',
+                fetch: 'JavaScript (fetch)',
+                httpie: 'HTTPie Command'
+            };
+            codePanelTitle.textContent = titles[format] || format.toUpperCase();
+            codePanelContent.textContent = code;
+            codePanel.classList.add('show');
+        }
+
+        codePanelClose.onclick = () => codePanel.classList.remove('show');
+        codeCopyBtn.onclick = async () => {
+            try {
+                await navigator.clipboard.writeText(codePanelContent.textContent);
+                showToast('Copied to clipboard!');
+            } catch {
+                showToast('Failed to copy');
+            }
+        };
+
+        // File upload handling
+        const fileDropArea = document.getElementById('file-drop-area');
+        const fileInput = document.getElementById('file-input');
+        const fileList = document.getElementById('file-list');
+        const fileMetadata = document.getElementById('file-metadata');
+
+        fileDropArea.onclick = () => fileInput.click();
+
+        fileDropArea.ondragover = (e) => {
+            e.preventDefault();
+            fileDropArea.classList.add('dragover');
+        };
+
+        fileDropArea.ondragleave = () => {
+            fileDropArea.classList.remove('dragover');
+        };
+
+        fileDropArea.ondrop = (e) => {
+            e.preventDefault();
+            fileDropArea.classList.remove('dragover');
+            handleFiles(e.dataTransfer.files);
+        };
+
+        fileInput.onchange = (e) => {
+            handleFiles(e.target.files);
+        };
+
+        function handleFiles(files) {
+            selectedFiles = Array.from(files);
+            renderFileList();
+        }
+
+        function renderFileList() {
+            if (selectedFiles.length === 0) {
+                fileList.innerHTML = '';
+                fileMetadata.style.display = 'none';
+                return;
+            }
+
+            fileList.innerHTML = selectedFiles.map((file, i) => `
+                <div class="file-item">
+                    <div>
+                        <span class="file-item-name">${file.name}</span>
+                        <span class="file-item-size">${formatFileSize(file.size)}</span>
+                    </div>
+                    <button class="file-item-remove" onclick="removeFile(${i})">&times;</button>
+                </div>
+            `).join('');
+
+            fileMetadata.style.display = 'block';
+        }
+
+        function formatFileSize(bytes) {
+            if (bytes < 1024) return bytes + ' B';
+            if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
+            return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
+        }
+
+        window.removeFile = function(index) {
+            selectedFiles.splice(index, 1);
+            renderFileList();
+        };
+
+        // Add form field button
+        document.getElementById('add-form-field').onclick = () => {
+            const container = document.getElementById('form-fields');
+            const row = document.createElement('div');
+            row.className = 'form-row';
+            row.innerHTML = `
+                <div class="form-group">
+                    <input type="text" class="form-input form-field-name" placeholder="field_name">
+                </div>
+                <div class="form-group">
+                    <input type="text" class="form-input form-field-value" placeholder="value">
+                </div>
+            `;
+            container.appendChild(row);
+        };
     </script>
 </body>
 </html>
@@ -1086,6 +1476,209 @@ async def echo_text(request: Request):
         "content_type": request.headers.get("content-type", "not specified")
     }
 
+# ============================================================================
+# FORM & FILE UPLOAD
+# ============================================================================
+
+next_file_id = 1
+
+@app.post("/form/login", tags=["Form & File Upload"])
+async def form_login(
+    username: str = Form(..., description="Username"),
+    password: str = Form(..., description="Password"),
+    remember_me: bool = Form(default=False, description="Remember me checkbox")
+):
+    """POST - Handle form data (like a login form)"""
+    return {
+        "message": "Form data received successfully",
+        "data": {
+            "username": username,
+            "password": "***hidden***",
+            "password_length": len(password),
+            "remember_me": remember_me
+        },
+        "note": "This demonstrates form-urlencoded data (Content-Type: application/x-www-form-urlencoded)"
+    }
+
+@app.post("/form/contact", tags=["Form & File Upload"])
+async def form_contact(
+    name: str = Form(..., description="Your name"),
+    email: str = Form(..., description="Your email"),
+    subject: str = Form(default="General Inquiry", description="Subject"),
+    message: str = Form(..., description="Your message")
+):
+    """POST - Contact form submission"""
+    return {
+        "message": "Contact form received",
+        "data": {
+            "name": name,
+            "email": email,
+            "subject": subject,
+            "message": message,
+            "message_length": len(message)
+        },
+        "timestamp": datetime.now().isoformat()
+    }
+
+@app.post("/upload/file", tags=["Form & File Upload"])
+async def upload_single_file(
+    file: UploadFile = File(..., description="File to upload")
+):
+    """POST - Upload a single file"""
+    global next_file_id
+
+    contents = await file.read()
+    file_size = len(contents)
+
+    # Store file metadata and content
+    file_id = next_file_id
+    uploaded_files_db[file_id] = {
+        "id": file_id,
+        "filename": file.filename,
+        "content_type": file.content_type,
+        "size": file_size,
+        "content": base64.b64encode(contents).decode("utf-8")
+    }
+    next_file_id += 1
+
+    return {
+        "message": "File uploaded successfully",
+        "file": {
+            "id": file_id,
+            "filename": file.filename,
+            "content_type": file.content_type,
+            "size": file_size,
+            "size_formatted": f"{file_size / 1024:.2f} KB" if file_size > 1024 else f"{file_size} bytes"
+        },
+        "download_url": f"/upload/file/{file_id}"
+    }
+
+@app.post("/upload/files", tags=["Form & File Upload"])
+async def upload_multiple_files(
+    files: List[UploadFile] = File(..., description="Multiple files to upload")
+):
+    """POST - Upload multiple files at once"""
+    global next_file_id
+
+    uploaded = []
+    for file in files:
+        contents = await file.read()
+        file_size = len(contents)
+
+        file_id = next_file_id
+        uploaded_files_db[file_id] = {
+            "id": file_id,
+            "filename": file.filename,
+            "content_type": file.content_type,
+            "size": file_size,
+            "content": base64.b64encode(contents).decode("utf-8")
+        }
+        next_file_id += 1
+
+        uploaded.append({
+            "id": file_id,
+            "filename": file.filename,
+            "content_type": file.content_type,
+            "size": file_size
+        })
+
+    return {
+        "message": f"Uploaded {len(uploaded)} files successfully",
+        "files": uploaded,
+        "total_size": sum(f["size"] for f in uploaded)
+    }
+
+@app.post("/upload/file-with-data", tags=["Form & File Upload"])
+async def upload_file_with_form_data(
+    file: UploadFile = File(..., description="File to upload"),
+    title: str = Form(..., description="Title for the file"),
+    description: str = Form(default="", description="Optional description"),
+    category: str = Form(default="general", description="Category")
+):
+    """POST - Upload file with additional form fields (multipart/form-data)"""
+    global next_file_id
+
+    contents = await file.read()
+    file_size = len(contents)
+
+    file_id = next_file_id
+    uploaded_files_db[file_id] = {
+        "id": file_id,
+        "filename": file.filename,
+        "content_type": file.content_type,
+        "size": file_size,
+        "content": base64.b64encode(contents).decode("utf-8"),
+        "metadata": {
+            "title": title,
+            "description": description,
+            "category": category
+        }
+    }
+    next_file_id += 1
+
+    return {
+        "message": "File uploaded with metadata",
+        "file": {
+            "id": file_id,
+            "filename": file.filename,
+            "content_type": file.content_type,
+            "size": file_size
+        },
+        "metadata": {
+            "title": title,
+            "description": description,
+            "category": category
+        },
+        "download_url": f"/upload/file/{file_id}"
+    }
+
+@app.get("/upload/files", tags=["Form & File Upload"])
+def list_uploaded_files():
+    """GET - List all uploaded files"""
+    files = [
+        {
+            "id": f["id"],
+            "filename": f["filename"],
+            "content_type": f["content_type"],
+            "size": f["size"],
+            "metadata": f.get("metadata")
+        }
+        for f in uploaded_files_db.values()
+    ]
+    return {"files": files, "count": len(files)}
+
+@app.get("/upload/file/{file_id}", tags=["Form & File Upload"])
+def download_file(file_id: int = Path(..., description="File ID to download")):
+    """GET - Download an uploaded file by ID"""
+    if file_id not in uploaded_files_db:
+        raise HTTPException(status_code=404, detail=f"File with id {file_id} not found")
+
+    file_data = uploaded_files_db[file_id]
+    content = base64.b64decode(file_data["content"])
+
+    return Response(
+        content=content,
+        media_type=file_data["content_type"],
+        headers={
+            "Content-Disposition": f'attachment; filename="{file_data["filename"]}"'
+        }
+    )
+
+@app.delete("/upload/file/{file_id}", tags=["Form & File Upload"])
+def delete_uploaded_file(file_id: int = Path(..., description="File ID to delete")):
+    """DELETE - Delete an uploaded file"""
+    if file_id not in uploaded_files_db:
+        raise HTTPException(status_code=404, detail=f"File with id {file_id} not found")
+
+    deleted = uploaded_files_db.pop(file_id)
+    return {
+        "message": "File deleted successfully",
+        "deleted_file": {
+            "id": deleted["id"],
+            "filename": deleted["filename"]
+        }
+    }
+
 # ============================================================================
 # DIFFERENT RESPONSE FORMATS
 # ============================================================================