fix: selecting from "Photo Library" on iOS doesn't upload (#1401)

packages/web/src/javascripts/Components/AttachedFilesPopover/AttachedFilesPopover.tsx

@@ -10,6 +10,7 @@ import PopoverFileItem from './PopoverFileItem'
 import { PopoverFileItemActionType } from './PopoverFileItemAction'
 import { PopoverTabs } from './PopoverTabs'
 import { FilesController } from '@/Controllers/FilesController'
+import { StreamingFileReader } from '@standardnotes/filepicker'
 
 type Props = {
   application: WebApplication
@@ -32,6 +33,8 @@ const AttachedFilesPopover: FunctionComponent<Props> = ({
   setCurrentTab,
   attachedTabDisabled,
 }) => {
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
   const [searchQuery, setSearchQuery] = useState('')
   const searchInputRef = useRef<HTMLInputElement>(null)
 
@@ -42,13 +45,9 @@ const AttachedFilesPopover: FunctionComponent<Props> = ({
       ? filesList.filter((file) => file.name.toLowerCase().indexOf(searchQuery.toLowerCase()) !== -1)
       : filesList
 
-  const handleAttachFilesClick = async () => {
+  const attachFilesIfRequired = (files: FileItem[]) => {
-    const uploadedFiles = await filesController.uploadNewFile()
-    if (!uploadedFiles) {
-      return
-    }
     if (currentTab === PopoverTabs.AttachedFiles) {
-      uploadedFiles.forEach((file) => {
+      files.forEach((file) => {
         filesController
           .handleFileAction({
             type: PopoverFileItemActionType.AttachFileToNote,
@@ -59,6 +58,19 @@ const AttachedFilesPopover: FunctionComponent<Props> = ({
     }
   }
 
+  const handleAttachFilesClick = async () => {
+    if (!StreamingFileReader.available()) {
+      fileInputRef.current?.click()
+      return
+    }
+
+    const uploadedFiles = await filesController.uploadNewFile()
+    if (!uploadedFiles) {
+      return
+    }
+    attachFilesIfRequired(uploadedFiles)
+  }
+
   const previewHandler = (file: FileItem) => {
     filesController
       .handleFileAction({
@@ -161,6 +173,26 @@ const AttachedFilesPopover: FunctionComponent<Props> = ({
           </div>
         )}
       </div>
+      <input
+        type="file"
+        className="absolute top-0 left-0 opacity-0"
+        multiple
+        ref={fileInputRef}
+        onChange={async (event) => {
+          const files = event.currentTarget.files
+
+          if (!files) {
+            return
+          }
+
+          for (const file of files) {
+            const uploadedFiles = await filesController.uploadNewFile(file)
+            if (uploadedFiles) {
+              attachFilesIfRequired(uploadedFiles)
+            }
+          }
+        }}
+      />
       {filteredList.length > 0 && (
         <button
           className="flex w-full cursor-pointer items-center border-0 border-t border-solid border-border bg-transparent px-3 py-3 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"

packages/web/src/javascripts/Components/ContentListView/ContentListView.tsx

@@ -20,6 +20,7 @@ import ContentListHeader from './Header/ContentListHeader'
 import ResponsivePaneContent from '../ResponsivePane/ResponsivePaneContent'
 import { AppPaneId } from '../ResponsivePane/AppPaneMetadata'
 import { useResponsiveAppPane } from '../ResponsivePane/ResponsivePaneProvider'
+import { StreamingFileReader } from '@standardnotes/filepicker'
 
 type Props = {
   accountMenuController: AccountMenuController
@@ -46,6 +47,7 @@ const ContentListView: FunctionComponent<Props> = ({
 }) => {
   const { toggleAppPane } = useResponsiveAppPane()
 
+  const fileInputRef = useRef<HTMLInputElement>(null)
   const itemsViewPanelRef = useRef<HTMLDivElement>(null)
 
   const {
@@ -68,7 +70,12 @@ const ContentListView: FunctionComponent<Props> = ({
 
   const addNewItem = useCallback(async () => {
     if (isFilesSmartView) {
-      void filesController.uploadNewFile()
+      if (StreamingFileReader.available()) {
+        void filesController.uploadNewFile()
+        return
+      }
+
+      fileInputRef.current?.click()
     } else {
       await createNewNote()
       toggleAppPane(AppPaneId.Editor)
@@ -179,6 +186,23 @@ const ContentListView: FunctionComponent<Props> = ({
       <ResponsivePaneContent paneId={AppPaneId.Items}>
         <div id="items-title-bar" className="section-title-bar border-b border-solid border-border">
           <div id="items-title-bar-container">
+            <input
+              type="file"
+              className="absolute top-0 left-0 opacity-0"
+              multiple
+              ref={fileInputRef}
+              onChange={(event) => {
+                const files = event.currentTarget.files
+
+                if (!files) {
+                  return
+                }
+
+                for (const file of files) {
+                  void filesController.uploadNewFile(file)
+                }
+              }}
+            />
             <ContentListHeader
               application={application}
               panelTitle={panelTitle}

packages/web/src/javascripts/Controllers/FilesController.ts

@@ -302,7 +302,7 @@ export class FilesController extends AbstractViewController {
       const selectedFiles =
         fileOrHandle instanceof File
           ? [fileOrHandle]
-          : StreamingFileReader.available() && fileOrHandle instanceof FileSystemFileHandle
+          : shouldUseStreamingReader && fileOrHandle instanceof FileSystemFileHandle
           ? await StreamingFileReader.getFilesFromHandles([fileOrHandle])
           : await picker.selectFiles()