Please allow to Send attachment files like: javascript, typescript, SQL etc.

auth/github/callback.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>GitHub Auth Callback</title>
+    <script src="../components/file-uploader.js"></script>
     <script>
         // Process the GitHub callback
         const urlParams = new URLSearchParams(window.location.search);
@@ -25,6 +26,15 @@
         <div class="text-center">
             <h1 class="text-2xl font-bold mb-4">Processing GitHub Authentication...</h1>
             <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary mx-auto"></div>
+            
+            <!-- File Upload Section -->
+            <div class="mt-8 p-6 max-w-md mx-auto bg-white rounded-lg shadow-md">
+                <h2 class="text-xl font-semibold mb-4">Upload Files</h2>
+                <file-uploader></file-uploader>
+                <button id="upload-submit" class="mt-4 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
+                    Upload Files
+                </button>
+            </div>
         </div>
     </div>
 </body>

components/file-uploader.js

@@ -0,0 +1,99 @@
+class FileUploader extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        .upload-container {
+          margin: 1rem 0;
+          border: 2px dashed #ccc;
+          border-radius: 0.5rem;
+          padding: 1.5rem;
+          text-align: center;
+          transition: all 0.3s;
+        }
+        .upload-container:hover {
+          border-color: #667eea;
+          background: #f7fafc;
+        }
+        .file-input {
+          display: none;
+        }
+        .upload-btn {
+          background: #667eea;
+          color: white;
+          padding: 0.5rem 1rem;
+          border-radius: 0.25rem;
+          cursor: pointer;
+          display: inline-block;
+          margin-bottom: 1rem;
+        }
+        .file-list {
+          text-align: left;
+          margin-top: 1rem;
+        }
+        .file-item {
+          display: flex;
+          align-items: center;
+          padding: 0.5rem;
+          border-bottom: 1px solid #eee;
+        }
+        .file-name {
+          flex-grow: 1;
+          margin-left: 0.5rem;
+        }
+        .remove-btn {
+          color: #f56565;
+          cursor: pointer;
+          margin-left: 0.5rem;
+        }
+      </style>
+      <div class="upload-container">
+        <input type="file" class="file-input" multiple accept=".js,.ts,.sql,.json,.txt,.md,.html,.css">
+        <button class="upload-btn">Choose Files</button>
+        <div class="file-list"></div>
+        <p>Supported files: JavaScript, TypeScript, SQL, JSON, etc.</p>
+      </div>
+    `;
+
+    const input = this.shadowRoot.querySelector('.file-input');
+    const button = this.shadowRoot.querySelector('.upload-btn');
+    const fileList = this.shadowRoot.querySelector('.file-list');
+    const files = [];
+
+    button.addEventListener('click', () => input.click());
+    
+    input.addEventListener('change', (e) => {
+      files.length = 0; // Clear previous files
+      fileList.innerHTML = '';
+      
+      Array.from(e.target.files).forEach(file => {
+        files.push(file);
+        
+        const fileItem = document.createElement('div');
+        fileItem.className = 'file-item';
+        fileItem.innerHTML = `
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+          </svg>
+          <span class="file-name">${file.name} (${(file.size / 1024).toFixed(2)} KB)</span>
+          <span class="remove-btn">×</span>
+        `;
+        
+        fileItem.querySelector('.remove-btn').addEventListener('click', () => {
+          const index = files.indexOf(file);
+          if (index > -1) {
+            files.splice(index, 1);
+          }
+          fileItem.remove();
+        });
+        
+        fileList.appendChild(fileItem);
+      });
+    });
+
+    // Expose files to parent component
+    this.getFiles = () => files;
+  }
+}
+
+customElements.define('file-uploader', FileUploader);