Final

src/app/(app)/qr/[id]/edit/page.tsx

@@ -7,6 +7,18 @@ import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
 import { showToast } from '@/components/ui/Toast';
 import { useCsrf } from '@/hooks/useCsrf';
+import { Upload, FileText, HelpCircle } from 'lucide-react';
+
+// Tooltip component for form field help
+const Tooltip = ({ text }: { text: string }) => (
+  <div className="group relative inline-block ml-1">
+    <HelpCircle className="w-4 h-4 text-gray-400 cursor-help" />
+    <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-2 bg-gray-900 text-white text-xs rounded-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50 w-48 text-center">
+      {text}
+      <div className="absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-gray-900"></div>
+    </div>
+  </div>
+);
 
 export default function EditQRPage() {
   const router = useRouter();
@@ -16,6 +28,7 @@ export default function EditQRPage() {
 
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
+  const [uploading, setUploading] = useState(false);
   const [qrCode, setQrCode] = useState<any>(null);
   const [title, setTitle] = useState('');
   const [content, setContent] = useState<any>({});
@@ -45,6 +58,41 @@ export default function EditQRPage() {
     fetchQRCode();
   }, [qrId, router]);
 
+  const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    // 10MB limit
+    if (file.size > 10 * 1024 * 1024) {
+      showToast('File size too large (max 10MB)', 'error');
+      return;
+    }
+
+    setUploading(true);
+    const formData = new FormData();
+    formData.append('file', file);
+
+    try {
+      const response = await fetch('/api/upload', {
+        method: 'POST',
+        body: formData,
+      });
+      const data = await response.json();
+
+      if (response.ok) {
+        setContent({ ...content, fileUrl: data.url, fileName: data.filename });
+        showToast('File uploaded successfully!', 'success');
+      } else {
+        showToast(data.error || 'Upload failed', 'error');
+      }
+    } catch (error) {
+      console.error('Upload error:', error);
+      showToast('Error uploading file', 'error');
+    } finally {
+      setUploading(false);
+    }
+  };
+
   const handleSave = async () => {
     setSaving(true);
 
@@ -244,19 +292,58 @@ export default function EditQRPage() {
 
           {qrCode.contentType === 'PDF' && (
             <>
-              <Input
-                label="PDF/File URL"
-                value={content.fileUrl || ''}
-                onChange={(e) => setContent({ ...content, fileUrl: e.target.value })}
-                placeholder="https://drive.google.com/file/d/.../view"
-                required
-              />
-              <Input
-                label="File Name (optional)"
-                value={content.fileName || ''}
-                onChange={(e) => setContent({ ...content, fileName: e.target.value })}
-                placeholder="Product Catalog 2026"
-              />
+              <div>
+                <div className="flex items-center mb-1">
+                  <label className="block text-sm font-medium text-gray-700">Upload Menu / PDF</label>
+                  <Tooltip text="Upload your menu PDF (Max 10MB). Hosted securely." />
+                </div>
+
+                <div className="mt-2 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-lg hover:bg-gray-50 transition-colors relative">
+                  <div className="space-y-1 text-center">
+                    {uploading ? (
+                      <div className="flex flex-col items-center">
+                        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-500 mb-2"></div>
+                        <p className="text-sm text-gray-500">Uploading...</p>
+                      </div>
+                    ) : content.fileUrl ? (
+                      <div className="flex flex-col items-center">
+                        <div className="mx-auto h-12 w-12 text-primary-500 bg-primary-50 rounded-full flex items-center justify-center mb-2">
+                          <FileText className="h-6 w-6" />
+                        </div>
+                        <p className="text-sm text-green-600 font-medium mb-1">Upload Complete!</p>
+                        <a href={content.fileUrl} target="_blank" rel="noopener noreferrer" className="text-xs text-primary-500 hover:underline break-all max-w-xs mb-3 block">
+                          {content.fileName || 'View File'}
+                        </a>
+                        <label htmlFor="file-upload" className="cursor-pointer bg-white py-2 px-3 border border-gray-300 rounded-md shadow-sm text-sm leading-4 font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
+                          <span>Replace File</span>
+                          <input id="file-upload" name="file-upload" type="file" className="sr-only" accept=".pdf,image/*" onChange={handleFileUpload} />
+                        </label>
+                      </div>
+                    ) : (
+                      <>
+                        <Upload className="mx-auto h-12 w-12 text-gray-400" />
+                        <div className="flex text-sm text-gray-600 justify-center">
+                          <label htmlFor="file-upload" className="relative cursor-pointer bg-white rounded-md font-medium text-primary-600 hover:text-primary-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-primary-500">
+                            <span>Upload a file</span>
+                            <input id="file-upload" name="file-upload" type="file" className="sr-only" accept=".pdf,image/*" onChange={handleFileUpload} />
+                          </label>
+                          <p className="pl-1">or drag and drop</p>
+                        </div>
+                        <p className="text-xs text-gray-500">PDF, PNG, JPG up to 10MB</p>
+                      </>
+                    )}
+                  </div>
+                </div>
+              </div>
+
+              {content.fileUrl && (
+                <Input
+                  label="File Name / Menu Title"
+                  value={content.fileName || ''}
+                  onChange={(e) => setContent({ ...content, fileName: e.target.value })}
+                  placeholder="Product Catalog 2026"
+                />
+              )}
             </>
           )}