photo scan V2 (#5255)

# Description of Changes

<!--
Please provide a summary of the changes, including:

- What was changed
- Why the change was made
- Any challenges encountered

Closes #(issue_number)
-->

---

## Checklist

### General

- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md)
(if applicable)
- [ ] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md)
(if applicable)
- [ ] I have performed a self-review of my own code
- [ ] My changes generate no new warnings

### Documentation

- [ ] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

### UI Changes (if applicable)

- [ ] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)

### Testing (if applicable)

- [ ] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing)
for more details.

frontend/src/core/components/fileManager/FileSourceButtons.tsx

@@ -1,12 +1,14 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Stack, Text, Button, Group } from '@mantine/core';
 import HistoryIcon from '@mui/icons-material/History';
 import CloudIcon from '@mui/icons-material/Cloud';
+import PhonelinkIcon from '@mui/icons-material/Phonelink';
 import { useTranslation } from 'react-i18next';
 import { useFileManagerContext } from '@app/contexts/FileManagerContext';
 import { useGoogleDrivePicker } from '@app/hooks/useGoogleDrivePicker';
 import { useFileActionTerminology } from '@app/hooks/useFileActionTerminology';
 import { useFileActionIcons } from '@app/hooks/useFileActionIcons';
+import MobileUploadModal from '@app/components/shared/MobileUploadModal';
 
 interface FileSourceButtonsProps {
   horizontal?: boolean;
@@ -15,12 +17,13 @@ interface FileSourceButtonsProps {
 const FileSourceButtons: React.FC<FileSourceButtonsProps> = ({
   horizontal = false
 }) => {
-  const { activeSource, onSourceChange, onLocalFileClick, onGoogleDriveSelect } = useFileManagerContext();
+  const { activeSource, onSourceChange, onLocalFileClick, onGoogleDriveSelect, onNewFilesSelect } = useFileManagerContext();
   const { t } = useTranslation();
   const { isEnabled: isGoogleDriveEnabled, openPicker: openGoogleDrivePicker } = useGoogleDrivePicker();
   const terminology = useFileActionTerminology();
   const icons = useFileActionIcons();
   const UploadIcon = icons.upload;
+  const [mobileUploadModalOpen, setMobileUploadModalOpen] = useState(false);
 
   const handleGoogleDriveClick = async () => {
     try {
@@ -33,6 +36,16 @@ const FileSourceButtons: React.FC<FileSourceButtonsProps> = ({
     }
   };
 
+  const handleMobileUploadClick = () => {
+    setMobileUploadModalOpen(true);
+  };
+
+  const handleFilesReceivedFromMobile = (files: File[]) => {
+    if (files.length > 0) {
+      onNewFilesSelect(files);
+    }
+  };
+
   const buttonProps = {
     variant: (source: string) => activeSource === source ? 'filled' : 'subtle',
     getColor: (source: string) => activeSource === source ? 'var(--mantine-color-gray-2)' : undefined,
@@ -105,24 +118,59 @@ const FileSourceButtons: React.FC<FileSourceButtonsProps> = ({
       >
         {horizontal ? t('fileManager.googleDriveShort', 'Drive') : t('fileManager.googleDrive', 'Google Drive')}
       </Button>
+
+      <Button
+        variant="subtle"
+        color='var(--mantine-color-gray-6)'
+        leftSection={<PhonelinkIcon />}
+        justify={horizontal ? "center" : "flex-start"}
+        onClick={handleMobileUploadClick}
+        fullWidth={!horizontal}
+        size={horizontal ? "xs" : "sm"}
+        styles={{
+          root: {
+            backgroundColor: 'transparent',
+            border: 'none',
+            '&:hover': {
+              backgroundColor: 'var(--mantine-color-gray-0)'
+            }
+          }
+        }}
+      >
+        {horizontal ? t('fileManager.mobileShort', 'Mobile') : t('fileManager.mobileUpload', 'Mobile Upload')}
+      </Button>
     </>
   );
 
   if (horizontal) {
     return (
-      <Group gap="xs" justify="center" style={{ width: '100%' }}>
-        {buttons}
-      </Group>
+      <>
+        <Group gap="xs" justify="center" style={{ width: '100%' }}>
+          {buttons}
+        </Group>
+        <MobileUploadModal
+          opened={mobileUploadModalOpen}
+          onClose={() => setMobileUploadModalOpen(false)}
+          onFilesReceived={handleFilesReceivedFromMobile}
+        />
+      </>
     );
   }
 
   return (
-    <Stack gap="xs" style={{ height: '100%' }}>
-      <Text size="sm" pt="sm" fw={500} c="dimmed" mb="xs" style={{ paddingLeft: '1rem' }}>
-        {t('fileManager.myFiles', 'My Files')}
-      </Text>
-      {buttons}
-    </Stack>
+    <>
+      <Stack gap="xs" style={{ height: '100%' }}>
+        <Text size="sm" pt="sm" fw={500} c="dimmed" mb="xs" style={{ paddingLeft: '1rem' }}>
+          {t('fileManager.myFiles', 'My Files')}
+        </Text>
+        {buttons}
+      </Stack>
+      <MobileUploadModal
+        opened={mobileUploadModalOpen}
+        onClose={() => setMobileUploadModalOpen(false)}
+        onFilesReceived={handleFilesReceivedFromMobile}
+      />
+    </>
   );
 };