update: handle permissions changes when targeting API 34

Author: drangelod

apps/demo/src/plugin-demos/nativescript-filepicker.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @nrwl/nx/enforce-module-boundaries */
 import { EventData, Page, File, Frame, StackLayout, Color, Label, Image, alert, isAndroid, Device } from '@nativescript/core';
 import { DemoSharedNativescriptFilepicker } from '@demo/shared';
 import { filePicker, galleryPicker, MediaType, getFreeMBs } from '@voicethread/nativescript-filepicker';
@@ -9,83 +10,6 @@ export function navigatingTo(args: EventData) {
   page.bindingContext = new DemoModel();
 }
 export class DemoModel extends DemoSharedNativescriptFilepicker {
-  async pickDoc() {
-    let pickedFiles: File[];
-    try {
-      pickedFiles = await filePicker(MediaType.DOCUMENT, false);
-    } catch (err) {
-      if (err) alert(err?.message);
-    } finally {
-      this.handleFiles(pickedFiles);
-    }
-  }
-
-  async pickImage() {
-    let pickedFiles: File[];
-    try {
-      pickedFiles = await filePicker(MediaType.IMAGE, false);
-    } catch (err) {
-      if (err) alert(err?.message);
-    } finally {
-      this.handleFiles(pickedFiles);
-    }
-  }
-
-  async pickImages() {
-    let pickedFiles: File[];
-    try {
-      pickedFiles = await filePicker(MediaType.IMAGE, true);
-    } catch (err) {
-      if (err) alert(err?.message);
-    } finally {
-      this.handleFiles(pickedFiles);
-    }
-  }
-
-  async pickVideo() {
-    let pickedFiles: File[];
-
-    try {
-      let tempPath = TempFile.getPath('tempfile', 'tmp');
-      let freeSpace = getFreeMBs(tempPath);
-
-      console.log('free MBs on file picker temp directory', freeSpace);
-      console.log('temp directory path: ', tempPath);
-      if (freeSpace > 400) {
-        //check before allowing picker to create temp copy of selected files
-        pickedFiles = await filePicker(MediaType.VIDEO, false);
-      } else alert('Low free space on device, picking not allowed');
-    } catch (err) {
-      if (err) alert(err?.message);
-    } finally {
-      this.handleFiles(pickedFiles);
-    }
-  }
-
-  async pickAudio() {
-    let pickedFiles: File[];
-
-    try {
-      pickedFiles = await filePicker(MediaType.AUDIO, false);
-    } catch (err) {
-      if (err) alert(err?.message);
-    } finally {
-      this.handleFiles(pickedFiles);
-    }
-  }
-
-  async pickArchive() {
-    let pickedFiles: File[];
-
-    try {
-      pickedFiles = await filePicker(MediaType.ARCHIVE, false);
-    } catch (err) {
-      if (err) alert(err?.message);
-    } finally {
-      this.handleFiles(pickedFiles);
-    }
-  }
-
   async pickAllOne() {
     let pickedFiles: File[];
 
@@ -116,8 +40,8 @@ export class DemoModel extends DemoSharedNativescriptFilepicker {
           });
         }
         console.log('canPick?:', canPick);
-      } else if (isAndroid) {
-        //just request external_storage perms otherwise
+      } else if (isAndroid && +Device.sdkVersion < 26) {
+        //request external_storage perms for API <26 devices when targeting API34+
         const result = await checkPermission('storage');
         if (result['storage'] != 'authorized') console.log('No storage permission, requesting...');
         await request('storage').then(result => {
@@ -164,8 +88,8 @@ export class DemoModel extends DemoSharedNativescriptFilepicker {
           });
         }
         console.log('canPick?:', canPick);
-      } else if (isAndroid) {
-        //just request external_storage perms otherwise
+      } else if (isAndroid && +Device.sdkVersion < 26) {
+        //request external_storage perms for API <26 devices when targeting API34+
         const result = await checkPermission('storage');
         if (result['storage'] != 'authorized') console.log('No storage permission, requesting...');
         await request('storage').then(result => {
@@ -203,6 +127,85 @@ export class DemoModel extends DemoSharedNativescriptFilepicker {
     });
   }
 
+  //The following examples may require permissions depending on the platform, OS version and build target,
+  //   check the Readme for more information or look at the examples above.
+  async pickDoc() {
+    let pickedFiles: File[];
+    try {
+      pickedFiles = await filePicker(MediaType.DOCUMENT, false);
+    } catch (err) {
+      if (err) alert(err?.message);
+    } finally {
+      this.handleFiles(pickedFiles);
+    }
+  }
+
+  async pickImage() {
+    let pickedFiles: File[];
+    try {
+      pickedFiles = await filePicker(MediaType.IMAGE, false);
+    } catch (err) {
+      if (err) alert(err?.message);
+    } finally {
+      this.handleFiles(pickedFiles);
+    }
+  }
+
+  async pickImages() {
+    let pickedFiles: File[];
+    try {
+      pickedFiles = await filePicker(MediaType.IMAGE, true);
+    } catch (err) {
+      if (err) alert(err?.message);
+    } finally {
+      this.handleFiles(pickedFiles);
+    }
+  }
+
+  async pickVideo() {
+    let pickedFiles: File[];
+
+    try {
+      const tempPath = TempFile.getPath('tempfile', 'tmp');
+      const freeSpace = getFreeMBs(tempPath);
+
+      console.log('free MBs on file picker temp directory', freeSpace);
+      console.log('temp directory path: ', tempPath);
+      if (freeSpace > 400) {
+        //check before allowing picker to create temp copy of selected files
+        pickedFiles = await filePicker(MediaType.VIDEO, false);
+      } else alert('Low free space on device, picking not allowed');
+    } catch (err) {
+      if (err) alert(err?.message);
+    } finally {
+      this.handleFiles(pickedFiles);
+    }
+  }
+
+  async pickAudio() {
+    let pickedFiles: File[];
+
+    try {
+      pickedFiles = await filePicker(MediaType.AUDIO, false);
+    } catch (err) {
+      if (err) alert(err?.message);
+    } finally {
+      this.handleFiles(pickedFiles);
+    }
+  }
+
+  async pickArchive() {
+    let pickedFiles: File[];
+
+    try {
+      pickedFiles = await filePicker(MediaType.ARCHIVE, false);
+    } catch (err) {
+      if (err) alert(err?.message);
+    } finally {
+      this.handleFiles(pickedFiles);
+    }
+  }
+
   handleFiles(results: File[]): void {
     console.log('showed the picker, results:', results);
     const itemList: StackLayout = Frame.topmost().getViewById('pickedFiles');

apps/demo/src/plugin-demos/nativescript-filepicker.xml

@@ -15,7 +15,7 @@
           tap="{{ pickDoc }}"/>
         <Button text="Pick Image"
           tap="{{ pickImage }}"/>
-        <Button text="Pick Image\n (Multiple - Android+iOS14+ only)"
+        <Button text="Pick Image (Multiple - Android/iOS14+ only)"
           tap="{{ pickImages }}"
 
           textWrap = "true"/>
@@ -27,10 +27,9 @@
           tap="{{ pickArchive }}"/>
         <Button text="Pick All"
           tap="{{ pickAllOne }}" />
-        <Button text="Pick All\n (Multiple - Android+iOS14+ only)"
+        <Button text="Pick All (Multiple - Android/iOS14+ only)"
           tap="{{ pickAll }}"
 
-          
           textWrap = "true"/>
 
         <Label text="iOS Gallery Picker - requests permission first (Android will just use filePicker internally)"

packages/nativescript-filepicker/README.md

@@ -69,9 +69,9 @@ try {
 
 ### Android Permissions
 
-To request permissions in the demo app, we use the @nativescript-community [perms plugin](https://github.com/nativescript-community/perms). While this is not required for all OS versions and their system pickers, just to be safe you should request it so user is aware.
+To request permissions in the demo app, we use the @nativescript-community [perms plugin](https://github.com/nativescript-community/perms). What's actually required to be granted by the user depends on the target API version and the device API version. 
 
-Be sure to have permissions add the following lines in AndroidManifest.xml if targeting API 26+.
+If targeting API 25-33, be sure to have the legacy storage permission declared in your app by adding the following lines in AndroidManifest.xml.
 
 ```xml
 <manifest ... >
@@ -83,23 +83,30 @@ Be sure to have permissions add the following lines in AndroidManifest.xml if ta
 </manifest>
 ```
 
-For API 33+, you'll also need to add the following to the Android Manifest as well as request additional permissions:
+*NOTE*: When targeting API 34+, the legacy permission has been deprecated on devices running API 26-32, but still requires the user to grant for API <26 devices.
+
+To request the legacy permission, use the following before opening the picker:
+```javascript
+request('storage');
+```
+
+To support API 33+ devices, you'll also need to add the following to the Android Manifest and request the new permissions:
 
 ```xml
 <uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
 <uses-permission android:name="android.permission.READ_MEDIA_VIDEO" />
 <uses-permission android:name="android.permission.READ_MEDIA_AUDIO" />
 ```
 
-Before launching the picker on API 33+, you'll need to request the following permissions to allow picker access to all file types:
+Before launching the picker on API 33+ devices, you'll need to request the following permissions to allow picker access to all file types:
 
 ```javascript
 request('photo');
 request('video');
 request('audio');
 ```
 
-For an example, look at the `pickAll` function inside the `filepicker.ts` file in the dmeo app.
+For a working permissions example, look at the `pickAll` function inside the `filepicker.ts` file in the demo app. 
 
 ### iOS Permissions
 
@@ -131,13 +138,13 @@ Each platform natively supports a different set of file/mime types, you can see
 
 The Android stock file picker also supports selecting files from Google Photos and Google Drive if you have an account signed in on the Android device. Other document provider apps installed on your device may also offer additional services.
 
-Tested and working on Android API 25-33.
+Tested and working on Android API 25-34.
 
 ## iOS
 
 The iOS pickers also support selecting files from an associated iCloud account if the user has signed in on the device. Note that for a production application, you'll need to add the iCloud capability to your iOS application, and register that entitlement via the Apple Developer site for that package id. After that, update the relevant keys as shown in the demo application's `Info.plist`.
 
-Tested and working on iOS 12.x-16.x
+Tested and working on iOS 12.0-17.2
 
 ## Additional Utils
 

packages/nativescript-filepicker/index.android.ts

@@ -1,3 +1,4 @@
+/* eslint-disable prefer-const */
 import { MediaType } from './index.common';
 import { AndroidApplication, AndroidActivityResultEventData, Application, Device, File, Utils } from '@nativescript/core';
 import { TempFile } from './files';