feat: Add file upload UX with advanced options

- Show Advanced Options (userId, groupId, fileMode) only when device
supports `POSIX_FILE_TRANSFER_STORAGE` or `POSIX_FILE_TRANSFER_STREAM`
- add a folder icon to the file dropzone for clearer visual guidance
- fix some i18n keys in the forms

Signed-off-by: Omar <omar.brbutovic@secomind.com>

Author: OmarBrbutovic

frontend/src/components/DeviceTabs/FilesUploadTab.tsx

@@ -182,11 +182,13 @@ const formatRelayErrors = (
 type ManualFileDownloadRequestFormWrapperProps = {
   setErrorFeedback: (feedback: React.ReactNode) => void;
   deviceId: string;
+  showAdvancedOptions: boolean;
 };
 
 const ManualFileDownloadRequestFormWrapper = ({
   setErrorFeedback,
   deviceId,
+  showAdvancedOptions,
 }: ManualFileDownloadRequestFormWrapperProps) => {
   const intl = useIntl();
   const [isUploading, setIsUploading] = useState(false);
@@ -229,6 +231,9 @@ const ManualFileDownloadRequestFormWrapper = ({
           destination,
           ttlSeconds,
           progressTracked,
+          fileMode,
+          userId,
+          groupId,
         } = values;
 
         let uploadBlob: Blob;
@@ -265,13 +270,6 @@ const ManualFileDownloadRequestFormWrapper = ({
         const fileDownloadRequestId = uuidv7();
         const digest = await computeDigest(archiveData);
 
-        // Note: The browser File API does not expose Unix file permissions (fileMode),
-        // userId, or groupId. These are OS-level metadata not available in web browsers.
-        // We use sensible defaults: fileMode 0 (rw-r--r--), userId -1, groupId -1.
-        const fileMode = 0;
-        const userId = -1;
-        const groupId = -1;
-
         // Get presigned URL from the backend
         const presignedUrls = await new Promise<{
           get_url: string;
@@ -433,6 +431,7 @@ const ManualFileDownloadRequestFormWrapper = ({
     <ManualFileDownloadRequestForm
       isLoading={isUploading}
       onFileSubmit={handleFileUpload}
+      showAdvancedOptions={showAdvancedOptions}
     />
   );
 };
@@ -441,12 +440,14 @@ type ManualFileDownloadRequestFromRepositoryFormWrapperProps = {
   setErrorFeedback: (feedback: React.ReactNode) => void;
   repositoriesQueryRef: PreloadedQuery<FilesUploadTab_getRepositories_Query>;
   deviceId: string;
+  showAdvancedOptions: boolean;
 };
 
 const ManualFileDownloadRequestFromRepositoryFormWrapper = ({
   setErrorFeedback,
   repositoriesQueryRef,
   deviceId,
+  showAdvancedOptions,
 }: ManualFileDownloadRequestFromRepositoryFormWrapperProps) => {
   const intl = useIntl();
   const [isUploading, setIsUploading] = useState(false);
@@ -473,6 +474,9 @@ const ManualFileDownloadRequestFromRepositoryFormWrapper = ({
           destination,
           ttlSeconds,
           progressTracked,
+          fileMode,
+          userId,
+          groupId,
         } = values;
 
         let compression: string | null = null;
@@ -483,12 +487,6 @@ const ManualFileDownloadRequestFromRepositoryFormWrapper = ({
 
         const fileDownloadRequestId = uuidv7();
 
-        // Default Unix file permissions since the repository doesn't store this metadata.
-        // Defaults: fileMode 0 (rw-r--r--), userId -1, groupId -1.
-        const fileMode = 0;
-        const userId = -1;
-        const groupId = -1;
-
         // Create the file download request with all metadata
         await new Promise<void>((resolve, reject) => {
           createFileDownloadRequest({
@@ -566,17 +564,23 @@ const ManualFileDownloadRequestFromRepositoryFormWrapper = ({
       repositoriesData={repositoriesData}
       isLoading={isUploading}
       onFileSubmit={handleFileUpload}
+      showAdvancedOptions={showAdvancedOptions}
     />
   );
 };
 
-type FileDownloadRequestsContentProps = {
+type FilesUploadTabProps = {
   deviceRef: FilesUploadTab_fileDownloadRequests$key;
 };
 
-const FileDownloadRequestsContent = ({
-  deviceRef,
-}: FileDownloadRequestsContentProps) => {
+const FilesUploadTab = ({ deviceRef }: FilesUploadTabProps) => {
+  const intl = useIntl();
+  const { deviceId } = useParams();
+
+  const [updateMode, setUpdateMode] = useState<"repository" | "file">("file");
+
+  const [errorFeedback, setErrorFeedback] = useState<React.ReactNode>(null);
+
   const { data } = usePaginationFragment<
     FilesUploadTab_PaginationQuery,
     FilesUploadTab_fileDownloadRequests$key
@@ -587,20 +591,9 @@ const FileDownloadRequestsContent = ({
     [data.fileDownloadRequests],
   );
 
-  return <FileDownloadRequestsTable requests={fileDownloadRequests} />;
-};
-
-type FilesUploadTabProps = {
-  deviceRef: FilesUploadTab_fileDownloadRequests$key;
-};
-
-const FilesUploadTab = ({ deviceRef }: FilesUploadTabProps) => {
-  const intl = useIntl();
-  const { deviceId } = useParams();
-
-  const [updateMode, setUpdateMode] = useState<"repository" | "file">("file");
-
-  const [errorFeedback, setErrorFeedback] = useState<React.ReactNode>(null);
+  const showAdvancedOptions =
+    data.capabilities.includes("POSIX_FILE_TRANSFER_STORAGE") ||
+    data.capabilities.includes("POSIX_FILE_TRANSFER_STREAM");
 
   const [getRepositoriesQuery, getRepositories] =
     useQueryLoader<FilesUploadTab_getRepositories_Query>(
@@ -687,13 +680,15 @@ const FilesUploadTab = ({ deviceRef }: FilesUploadTabProps) => {
               <ManualFileDownloadRequestFormWrapper
                 setErrorFeedback={setErrorFeedback}
                 deviceId={deviceId || ""}
+                showAdvancedOptions={showAdvancedOptions}
               />
             ) : (
               getRepositoriesQuery && (
                 <ManualFileDownloadRequestFromRepositoryFormWrapper
                   repositoriesQueryRef={getRepositoriesQuery}
                   setErrorFeedback={setErrorFeedback}
                   deviceId={deviceId || ""}
+                  showAdvancedOptions={showAdvancedOptions}
                 />
               )
             )}
@@ -711,7 +706,7 @@ const FilesUploadTab = ({ deviceRef }: FilesUploadTabProps) => {
           />
         </h5>
 
-        <FileDownloadRequestsContent deviceRef={deviceRef} />
+        <FileDownloadRequestsTable requests={fileDownloadRequests} />
       </div>
     </Tab>
   );

frontend/src/components/FileDropzone.tsx

@@ -22,6 +22,7 @@ import { useCallback, useMemo, useRef, useState } from "react";
 import { FormattedMessage } from "react-intl";
 
 import CloseButton from "@/components/CloseButton";
+import Icon from "@/components/Icon";
 import Tag from "@/components/Tag";
 import { formatFileSize } from "@/lib/files";
 
@@ -193,6 +194,9 @@ const FileDropzone = ({ files, onChange, isInvalid }: FileDropzoneProps) => {
       >
         {files.length === 0 ? (
           <div className="py-2">
+            <div className="mb-2 text-secondary">
+              <Icon icon="folder" size="3x" />
+            </div>
             <p className="mb-1 text-muted">
               <FormattedMessage
                 id="components.FileDropzone.dropzonePrompt"