Fixes profile edit image selection not prompting users on web (#309) (#321)

* Fixes profile edit image selection not prompting users on web (#309)

* Fixes linting erros

2 files changed, 19 insertions, 0 deletions

diff --git a/src/lib/hooks/usePermissions.ts b/src/lib/hooks/usePermissions.ts
index 36a92ac32..19a420d9e 100644
--- a/src/lib/hooks/usePermissions.ts
+++ b/src/lib/hooks/usePermissions.ts
@@ -2,6 +2,7 @@ import {Alert} from 'react-native'
 import {Camera} from 'expo-camera'
 import * as MediaLibrary from 'expo-media-library'
 import {Linking} from 'react-native'
+import {isWeb} from 'platform/detection'
 
 const openSettings = () => {
   Linking.openURL('app-settings:')
@@ -24,6 +25,12 @@ const openPermissionAlert = (perm: string) => {
 export function usePhotoLibraryPermission() {
   const [mediaLibraryPermissions] = MediaLibrary.usePermissions()
   const requestPhotoAccessIfNeeded = async () => {
+    // On the, we use <input type="file"> to produce a filepicker
+    // This does not need any permission granting.
+    if (isWeb) {
+      return true
+    }
+
     if (mediaLibraryPermissions?.status === 'granted') {
       return true
     } else {
diff --git a/src/lib/media/picker.web.tsx b/src/lib/media/picker.web.tsx
index 43675074e..158c37971 100644
--- a/src/lib/media/picker.web.tsx
+++ b/src/lib/media/picker.web.tsx
@@ -111,6 +111,18 @@ export async function cropAndCompressFlow(
 // helpers
 // =
 
+/**
+ * Opens the select file dialog in the browser.
+ * NOTE:
+ * If in the future someone updates this method to use:
+ * https://developer.mozilla.org/en-US/docs/Web/API/window/showOpenFilePicker
+ * Check that the `showOpenFilePicker` API does not require any permissions
+ * granted to use. As of this writing, it does not, but that could change
+ * in the future. If the user does need to go through a permissions granting
+ * flow, then checkout the usePhotoLibraryPermission() hook in
+ *   src/lib/hooks/usePermissions.ts
+ * so that it gets appropriately updated.
+ */
 function selectFile(opts: PickerOpts): Promise<PickedFile> {
   return new Promise((resolve, reject) => {
     var input = document.createElement('input')