main page

src/components/FileUploadModal.jsx

@@ -0,0 +1,96 @@
+import { useState, useRef } from 'react'
+import { FaTimes, FaSpinner } from 'react-icons/fa'
+import { storage, BUCKET_ID, ID } from '../lib/appwrite'
+
+export default function FileUploadModal({ isOpen, onClose, workorderId, onUploadComplete }) {
+  const [uploading, setUploading] = useState(false)
+  const [dragOver, setDragOver] = useState(false)
+  const fileInputRef = useRef(null)
+
+  const handleDrop = async (e) => {
+    e.preventDefault()
+    setDragOver(false)
+    
+    const file = e.dataTransfer.files[0]
+    if (file) {
+      await uploadFile(file)
+    }
+  }
+
+  const handleFileSelect = async (e) => {
+    const file = e.target.files[0]
+    if (file) {
+      await uploadFile(file)
+    }
+  }
+
+  const uploadFile = async (file) => {
+    // Validate file type
+    const allowedTypes = ['application/pdf', 'image/gif', 'image/png', 'image/jpeg']
+    if (!allowedTypes.includes(file.type)) {
+      alert('Only PDF, GIF, PNG, and JPEG files are allowed.')
+      return
+    }
+
+    setUploading(true)
+    
+    try {
+      const response = await storage.createFile(
+        BUCKET_ID,
+        ID.unique(),
+        file
+      )
+      
+      onUploadComplete?.(response)
+      onClose()
+    } catch (error) {
+      console.error('Upload error:', error)
+      alert('Error uploading file: ' + error.message)
+    } finally {
+      setUploading(false)
+    }
+  }
+
+  if (!isOpen) return null
+
+  return (
+    <div className="overlay">
+      <span className="overlay-close" onClick={onClose}>
+        <FaTimes />
+      </span>
+      <div className="overlay-content">
+        <h2 className="text-center mb-2">UPLOAD AREA</h2>
+        <p className="mb-2">Upload Attachments for WOID {workorderId}</p>
+        
+        <div
+          className={`drop-zone ${dragOver ? 'border-green' : ''}`}
+          onDrop={handleDrop}
+          onDragOver={(e) => { e.preventDefault(); setDragOver(true) }}
+          onDragLeave={() => setDragOver(false)}
+          onClick={() => fileInputRef.current?.click()}
+        >
+          {uploading ? (
+            <div>
+              <FaSpinner className="spinner" size={32} />
+              <p className="mt-1">Uploading file...</p>
+            </div>
+          ) : (
+            <>
+              <p>Drop file here (.pdf, .gif, .png, .jpg, .jpeg)</p>
+              <p className="mt-1">or</p>
+              <button className="btn btn-dark mt-1">Select File</button>
+            </>
+          )}
+        </div>
+        
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept=".pdf,.gif,.png,.jpg,.jpeg"
+          style={{ display: 'none' }}
+          onChange={handleFileSelect}
+        />
+      </div>
+    </div>
+  )
+}