capawesome-team / capacitor-file-picker Goto Github PK

Plugin version:

0.5.2

Platform(s):

ios

Current behavior:

When I want to select multiple documents on ios only the first document is selected and the dialog is closed.

Expected behavior:

The dialog should be open until all wanted documents are selected and import all of them.

Steps to reproduce:

I ran the example poject which is linked in the description. I activated the multiple open but no difference

Related code:

insert short code snippets here

Other information:

Capacitor doctor:

insert the output from `npx cap doctor` here

Plugin version:

0.3.0

Platform(s):

android 11

Current behavior:

After I am choosing a PDF file and trying to get base64encoding file.data, this data is not equal to the result of base64 encoding from encoder https://base64.guru/converter/encode/file

Expected behavior:

I expect the result of file.data to be equal to base64 encoding value.

Steps to reproduce:

• Pick a PDF file
• Read the file.data
• Compare it with base64 encoder result (for instance https://base64.guru/converter/encode/file)

Related code:

insert short code snippets here

Other information:

Capacitor doctor:

insert the output from `npx cap doctor` here

Is your feature request related to a problem? Please describe:

Currently it is not possible to select multiple files at once.

Describe the solution you'd like:

Add support for multiple file selection.

Is your feature request related to a problem? Please describe:

We want to pick any image like files and it would be easier to just use image/*

Describe the solution you'd like:

Make the picker accept image/* and the likes

Describe alternatives you've considered:

Provide a constant resolving to the actual list of mime types that would match image/*

Additional context:

Plugin version: 0.5.6

Platform(s): iOS

Current behavior: I have "multiple" set to true. I select multiple images but the PickFilesResult returns only 1.

Expected behavior: Return all selected images.

Other information: It works fine on Android. Just iOS has this problem.

Plugin version:

Plugin version v0.4.0

Platform(s):

Ionic 6 Capcitor 4;

Current behavior:

I get when after selecting the file;

core.mjs:7640 ERROR Error: Uncaught (in promise): Error: "FilePicker.pickFiles()" is not implemented on android
Error: "FilePicker.pickFiles()" is not implemented on android

I havent tried on ios yet;
Kindly help.

Expected behavior:

return selected files;

Steps to reproduce:

Related code:

npm install @capawesome/capacitor-file-picker
npx cap sync

import { FilePicker } from '@capawesome/capacitor-file-picker';

 getFile(){
          const fileResult = await FilePicker.pickFiles({ 
              multiple: false
          }) ; 
          console.log(webfile);
    }

Other information:

Testing on Android Studio
Android Studio Arctic Fox | 2020.3.1 Patch 3
Build #AI-203.7717.56.2031.7784292, built on October 1, 2021
Runtime version: 11.0.10+0-b96-7249189 aarch64
VM: OpenJDK 64-Bit Server VM by JetBrains s.r.o.
macOS 11.6
GC: G1 Young Generation, G1 Old Generation
Memory: 2048M
Cores: 8
Registry: external.system.auto.import.disabled=true

Capacitor doctor:

💊   Capacitor Doctor  💊 

Latest Dependencies:

  @capacitor/cli: 4.1.0
  @capacitor/core: 4.1.0
  @capacitor/android: 4.1.0
  @capacitor/ios: 4.1.0

Installed Dependencies:

  @capacitor/ios: not installed
  @capacitor/cli: 4.0.1
  @capacitor/core: 4.0.0
  @capacitor/android: 4.0.1

Hi there,

sorry, I don't have an android device, so I have to ask. It is not apparent from the docs what happens if multiple is set to true and types to a filled array. Will it break? Will it throw an error? Will it be ignored and just a single select?

Maybe it would be useful for me and others to extend the docs. (Or to add this functionality for Android :D )

Q: How this plugin is different from <input type="file"/>. what are the advantages? as i have seen some issues related to large files and etc. input type file offers same functionality.

Plugin version:

All

Platform(s):
Android
IOS

Current behavior:

Pick file from Device.

Plugin version:

image/heic (not sure but maybe also 'image/heif') mimeTypes do not return any width or height when selected from the Files app in iOS

Platform(s):

iOS, android I haven't checked

Current behavior:

doesn't include height / width

Expected behavior:

should include height / width

Steps to reproduce:

here I attach 2 test .heic files. Please note that Apple's photo orientation needs to be considered in the width/height as well. AFAIK when rotating a photo inside the Apple Photos app, that rotation is not embedded in typical metadata but in a separate apple specific one or something.
heic photos.zip

Capacitor doctor:

💊   Capacitor Doctor  💊

Latest Dependencies:

  @capacitor/cli: 4.6.1
  @capacitor/core: 4.6.1
  @capacitor/android: 4.6.1
  @capacitor/ios: 4.6.1

Installed Dependencies:

  @capacitor/cli: 4.6.1
  @capacitor/core: 4.6.1
  @capacitor/android: 4.6.1
  @capacitor/ios: 4.6.1

Plugin version:
0.5.0

Platform(s):
Android

Current behavior:
Specifying the type "text/csv" does not allow files of type "text/csv" to be selectable in the ui (they are grayed out) because FilePickerPlugin.java@parseTypesOption method is replacing "text/csv" with "text/comma-separated-values".
See: FilePickerPlugin.java

Expected behavior:
We're expecting that specifying the type of "text/csv" will allow files of type "text/csv" to be selected.

We wish to specify the following types:

['text/csv', 'text/comma-separated-values', 'application/csv']

but after replacement it is yielding a picker filtering these values:

['text/comma-separated-values', 'text/comma-separated-values', 'application/csv']

Steps to reproduce:

• have a file with type of "text/csv" on your device
• invoke picker and note that the file is grayed out and not selectable

await FilePicker.pickFiles({ 
  types: ['text/csv', 'text/comma-separated-values', 'application/csv'],
  multiple: false 
})

Related code:
Following line of code prevents selection of any file with mime-type of "text/csv"
See: FilePickerPlugin.java

Other information:
We need to be able to specify all three types for selection:

 ['text/csv', 'text/comma-separated-values', 'application/csv']

Capacitor doctor:

💊   Capacitor Doctor  💊

Latest Dependencies:

  @capacitor/cli: 4.3.0
  @capacitor/core: 4.3.0
  @capacitor/android: 4.3.0
  @capacitor/ios: 4.3.0

Installed Dependencies:

  @capacitor/cli: 4.3.0
  @capacitor/core: 4.3.0
  @capacitor/android: 4.3.0
  @capacitor/ios: 4.3.0

[success] iOS looking great! 👌
[success] Android looking great! 👌

Just a personal opinion, but I think it's better to maybe rename the File interface of this library to something like DeviceFile or CapFile or CapacitorFile or PickedFile or FilePickerFile or something else.

The reason being, File is a built in interface by browsers, and it can cause some confusion when you see this on hover:

Is your feature request related to a problem? Please describe:
It's a very common use case to apply a max limit for photo selection. When multiple: true it seems like the user in theory could select an infinite number of tiles and attempt to pass that data over the bridge which could degrade or crash the app. A simple maxLimit property that takes effect when multiple: true is a big win.

Describe the solution you'd like:
When multiple: true also have the option to limit the number of media options a user can select in a single file picking session.

Describe alternatives you've considered:
The user could always handle this on the front end but in my opinion its a worse experience to throw an error to the user when it could be avoided.

Additional context:
https://github.com/EinfachHans/cordova-plugin-advanced-imagepicker#present - This has some nice config items that might be worth investigating implementing in this plugin.

Thanks again for this!

Not return result or error when attach large file (type: .mp4, size: 90mb)

test if there is a way for use to know wether or not a photo/video still needs to be downloaded from icloud when picked. And if so, can we get the download progress before the local copy process starts.

--

Main use case:

if the file doesn't need to be downloaded from iCloud

• in this case, with the assumption it won't take long, we can perhaps show a fullscreen blocking loading spinner, and automatically take the user to the next step after

if the file still needs to be downloaded from iCloud

• in this case, with the assumption it might take pretty long, we can have a non-blocking loading spinner somewhere in our app as a banner of the sorts, show some different loading text like: "downloading from iCloud & preparing file" and when it's finished show a button in this banner so the user can go to the next step.

--

This issue is related to capawesome-team/capacitor-plugins#12, in the sense that fixing capawesome-team/capacitor-plugins#12 might allow us do implement a better UX, nullifying the need for this issue in particular.

As mentioned in the title, the Select box, can't choose any files. It won't even click on them and they're disabled with gray color. Please check the screenshots.

This is probably not the plugin issue as I have tried <input type="file" /> but same results. Works fine on Windows in both cases.

const pickFile = async () => {
	const result = await FilePicker.pickFiles({
		types: ["text/csv"],
	});
	if (result) {
		content.value = result.files[0];
		console.log(content.value);
	}
}

Also please note that while on windows, it shows CSV files as set in types but on Android, it's showing all types of files. Not sure if that is how file selection works on Android.

I have tested this on Xiaomi 11T with MIUI v13.0.3, Android version 12, and OnePlus 5T with PixelExperience, Andoird version 12.

Any suggestion, what am I doing wrong? Is it some kind of android security?

Thanks

https://stackoverflow.com/questions/37296929/implement-document-picker-in-swift-ios

https://stackoverflow.com/questions/30789116/implementing-a-file-picker-in-android-and-copying-the-selected-file-to-another-l

Plugin version:

0.5.2

Platform(s):

Android

Current behavior:

Creates Blob only in web file picker but same is not seen in android web view. But data like path, name, etc are present

Expected behavior:

Should show picked file blob in android also

Steps to reproduce:

the file picker example in the example repo, try in it android web view. No blob present in the result.

Related code:

insert short code snippets here

Other information:

Capacitor doctor:

Capacitor Doctor   

Latest Dependencies:

  @capacitor/cli: 4.3.0
  @capacitor/core: 4.3.0
  @capacitor/android: 4.3.0
  @capacitor/core: 4.3.0
  @capacitor/ios: 4.3.0
  @capacitor/android: 4.3.0

[success] Android looking great! 

it seems like your file picker only returns the ms when it's divisible with 1000, so it's returning 0 or 1000 but nothing in between.

A video of around 900ms returns 0 duration for me.

related: #73

Plugin version:

0.5.9 latest

Platform(s):

Capacitor 4 ， android 12

Current behavior:

choose other app file explore to pick file ,no photo album

Expected behavior:

be in photo album to choose the video

Steps to reproduce:

Related code:

  const result = await FilePicker.pickVideos({
            multiple: false, // 限制一个
          }).catch(er => {
            console.error(er.message);
          });

Other information:

Plugin version:

[email protected]

Platform(s):

Android

Current behavior:

When I try to pick a large file with a size of 90mb but nothing happened

Expected behavior:

Return a result or error to display error message

The default value of readData should be false because the path is often sufficient and reading the data can lead to an OOM exception.

Is it in the scope of the plugin to choose whether to pick from files or from gallery / camera roll ? Thank you very much

Plugin version:

0.5.9

Platform(s):

iOS

Current behavior:

Using pickImages(), once the images are selected and "Add" is clicked, the following error is thrown, and no { files } are populated.

2023-01-25 13:43:02.712489-0700 App[50423:12554644] Error copying file type public.image. Error: Error Domain=NSItemProviderErrorDomain Code=-1000 "Cannot load representation of type public.image" UserInfo={NSLocalizedDescription=Cannot load representation of type public.image, NSUnderlyingError=0x600003f9d7a0 {Error Domain=NSCocoaErrorDomain Code=4101 "Couldn’t communicate with a helper application." UserInfo={NSUnderlyingError=0x600003f9dc50 {Error Domain=PHAssetExportRequestErrorDomain Code=0 "(null)" UserInfo={NSUnderlyingError=0x600003f9dd40 {Error Domain=PAMediaConversionServiceErrorDomain Code=2 "(null)" UserInfo=0x6000037471c0 (not displayed)}}}}}}
ERROR MESSAGE:  {"message":"Cannot load representation of type public.image","errorMessage":"Cannot load representation of type public.image"}
⚡️  [error] - {"message":"Cannot load representation of type public.image","errorMessage":"Cannot load representation of type public.image"}

Expected behavior:

I expect the selected images to returned to the files prop.

Steps to reproduce:

1. Create new React Ionic application
2. Wire up pickImages() to a button
3. Tap button, select images, tap "Add"

Related code:

  const [files, setFiles] = useState<PickedFile[]>([])

  const pickImages = async () => {
    const result = await FilePicker.pickImages({
      multiple: true,
    })
    setFiles(result.files)
  }

Other information:

I've tested this using iOS Simulator using iOS 14.5, 15.5, and 16.2.

However, this does work on a physical device with iOS 15.5.

I can upload the sample project I'm working with if that'd be helpful.

Capacitor doctor:

💊   Capacitor Doctor  💊 

Latest Dependencies:

  @capacitor/cli: 4.6.2
  @capacitor/core: 4.6.2
  @capacitor/android: 4.6.2
  @capacitor/ios: 4.6.2

Installed Dependencies:

  @capacitor/cli: 4.6.2
  @capacitor/core: 4.6.2
  @capacitor/android: 4.6.2
  @capacitor/ios: 4.6.2

[success] iOS looking great! 👌
[success] Android looking great! 👌

The code here returns a nullable string:

However, there are no null checks before calling .startsWithat these spots:

The Android docs specify:

 @return A MIME type for the content, or null if the URL is invalid or the type is unknown

Using Capacitor 3 framework with Ionic React. When i try implemnting in android it throws me error
FilePicker.pickFiles is not in android implementation. Please help me how to implment in both ios and android

On the web, the picker returns an object and optionally base64 string if readData is enabled.

I could convert base64 to Blob but ideally it should just return a Blob like the native file picker which is easier to work with without any conversions required.

Thanks

In the readme the size property of the File type is explained with "The size of the file." But in what unit? It looks like bytes but I'm not sure. A little clarification would be nice.

P.S.: While I'm already commenting the readme. In most of you capacitor projects it's hard to find out for which platforms they are made. It would be nice to have a little table (or something like that) with a short overview of the supported platforms.

Plugin version:
Latest

Platform(s):
Android

Current behavior:
If i select only 'image/jpeg' i can still pick heic types.

Expected behavior:
Heic should be not pickable or coverted to right format

Steps to reproduce:
Download heic file here : https://filesamples.com/formats/heic
And try to pick with this code :

    const filePicked = await FilePicker.pickFiles({
      types: ['image/jpeg', 'image/png'],
      multiple: false,
    })
    console.log('filePicked', filePicked)

You should be able to pick and see in your logs heic format

Capacitor doctor:

💊   Capacitor Doctor  💊 

Latest Dependencies:

  @capacitor/cli: 3.3.4
  @capacitor/core: 3.3.4
  @capacitor/android: 3.3.4
  @capacitor/ios: 3.3.4

Installed Dependencies:

  @capacitor/cli: 3.3.3
  @capacitor/android: 3.3.3
  @capacitor/core: 3.3.3
  @capacitor/ios: 3.3.3

[success] iOS looking great! 👌
[success] Android looking great! 👌

All works well on iOS but I get the following error when trying to display the selected video on Android in a video tag in my html.

java.lang.SecurityException: Permission Denial: reading com.google.android.apps.photos.contentprovider.impl.MediaContentProvider uri content://com.google.android.apps.photos.contentprovider/0/2/content%3A%2F%2Fmedia%2Fexternal%2Fvideo%2Fmedia%2F2523/ORIGINAL/NONE/video%2Fmp4/394201964#t=0.1 from pid=7125, uid=10270 requires the provider be exported, or grantUriPermission()

I have tried searching for an answer for a couple days now and nothing has worked. Wondering if you can provide some insight into this error and if any others have had this issue in the past.

const result = await FilePicker.pickMedia({
  multiple: true
});
result.files.forEach(file => {
  const url = Capacitor.convertFileSrc(file.path);
  // url is used as src in html
});

Is your feature request related to a problem? Please describe:

I have a custom file type in my project (.cs2). It is, basically, a file with a application/zip mime type and a cs2 file extension.
Passing its mime type to file picker still does not make the file pickable on iOS.

Describe the solution you'd like:

It would be great to also define the allowed file extensions when calling pickFiles method.

Describe alternatives you've considered:

I have considered using another init method for UiDocumentPickerViewController, the init(forOpeningContentTypes: [UTType]). reference.
Using this method, with a type initialized with UTType(filenameExtension). reference.
Using this methods in a bare swift application woks, tested on iOS16.

Additional context:

Plugin version:
0.5.5

Platform(s):
Only tested on iOS so far but also might effect Android.

Current behavior:
Steps to Reproduce:
1.) Pass multiple: true as an option into pickMedia, pickImages, pickVideo
2.) Select multiple files from iOS gallery (can be a mix of media)
3.) Observe that the result received in the JS only contains the first item

Expected behavior:
The files object received from the pick promise should return an array containing all files selected.

Steps to reproduce:
See current behavior above for steps.

Related code:

    const { files } = await FilePicker.pickMedia({ multiple: true });
    console.log('FILES SELECTED', files); // Observe this logs an array of one file

Full Code Function:

  const onFromMedia = async () => {
    setIsOpen(false);
    const { files } = await FilePicker.pickMedia({ multiple: true });
    console.log('FILES SELECTED', files);
    setIsProcessingFiles(true);
    const selectedItems = await Promise.all(
      files.map(async (file) => {
        const nativeSource = Capacitor.convertFileSrc(file.path);
        console.log('nativeSource', nativeSource);
        const blob = await fetch(nativeSource)
          .then((res) => res.blob())
          .catch((e) => console.log('ERROR', e.message));

        return blobToFile(
          blob,
          file.mimeType,
          file.name,
          UPLOAD_SOURCES.PHOTOS
        );
      })
    );

    setIsProcessingFiles(false);
    onDropCallback(selectedItems);
  };

Other information:
IOS Code Logs (Multiple images were selected)

⚡️  TO JS {"files":[{"size":2882584,"height":3024,"name":"1673295073.761005_69491255528__E7058C63-40B1-4BDF-8E01-DCC8984BB74C.jpeg","mimeType":"image\/jpeg","width":4032,"path":"file:\/\/\/private\/var\/mobile\/Containers\/Data\/Application\/02EBC152-5421-45AD-A4F4-
⚡️  [log] - FILES SELECTED [{"size":2882584,"height":3024,"name":"1673295073.761005_69491255528__E7058C63-40B1-4BDF-8E01-DCC8984BB74C.jpeg","mimeType":"image/jpeg","width":4032,"path":"file:///private/var/mobile/Containers/Data/Application/02EBC152-5421-45AD-A4F4-4F169F352E4B/tmp/1673295073.761005_69491255528__E7058C63-40B1-4BDF-8E01-DCC8984BB74C.jpeg"}]

Iphone: 14 (iOS 16.x)

Capacitor doctor:

💊   Capacitor Doctor  💊

Latest Dependencies:

  @capacitor/cli: 4.6.1
  @capacitor/core: 4.6.1
  @capacitor/android: 4.6.1
  @capacitor/ios: 4.6.1

Installed Dependencies:

  @capacitor/cli: 4.6.1
  @capacitor/core: 4.6.1
  @capacitor/android: 4.6.1
  @capacitor/ios: 4.6.1

[success] iOS looking great! 👌
[success] Android looking great! 👌

I believe we do Capacitor.convertFileSrc(path) to generate a string which we can bind to <img /> src.

But image/heic won't work. : S

Maybe the file picker can convert image/heic to image/jpeg on the fly if it's cheap to do so

I'm trying to save the last date of modification of uploaded files to get better information about the file's age and state. At the moment there is no possibility to get these information out of PickFilesResult.files when using the method FilePicker.pickFiles.

Would it be possible to add the date of last modification on the client's system per file in PickFilesResult?

Hello,
Capacitor V4 has been released.
Will this plugin support Capacitor V4 anytime soon ?
Thanks!

Is your feature request related to a problem? Please describe:

I would like to be able to pick files (a directory, see capawesome-team/capacitor-plugins#16 )
from my SD card .

Right now I can't see my SD card with the sample code I found on the README.

Is there a way to do that?

This is the code I use:

const pickFiles = async () => {
  const result = await FilePicker.pickFiles();
  const file = result.files[0];

  alert('Selected file is' +
      JSON.stringify(file) +
      ' ' + JSON.stringify(result));
  return result
};

I am getting this in my emulator.

Is your feature request related to a problem? Please describe:
how I can checkPermissions/requestPermissions to files?

Describe the solution you'd like:

Describe alternatives you've considered:
use Filesystem plugin ? but it seems to me that everything should be in one plugin. It is a pity that such functionality was removed from the core of the capacitor

Additional context:

Because of #43 this should be false now. Readme is wrong, too.

Plugin version:
0.2.2

Platform(s):
Android

Current behaviour:
show zoomed one

Expected behaviour:
should show 100% of the picture

Steps to reproduce:
Select a picture in gallery and then the preview is over zoom

Related code:

const file = async() => {
  try {
    const filePicked = await FilePicker.pickFiles({
      types: ['image/png', 'application/pdf'],
      multiple: false,
    })
    if (!filePicked.files.length) return
    emit('file', {
      ...filePicked.files[0],
    })
  }
  catch (error) {
    console.error(error)
  }
}

Other information:

Capacitor doctor:

💊   Capacitor Doctor  💊 

Latest Dependencies:

  @capacitor/cli: 3.3.3
  @capacitor/core: 3.3.3
  @capacitor/android: 3.3.3
  @capacitor/ios: 3.3.3

Installed Dependencies:

  @capacitor/cli: 3.3.2
  @capacitor/android: 3.3.3
  @capacitor/core: 3.3.3
  @capacitor/ios: 3.3.3

[success] iOS looking great! 👌
[success] Android looking great! 👌

Just wanted to let you know that when you inspect a <video /> element and grab the duration from the HTMLVideoElement (which inherits HTMLMediaElement) the duration will be in seconds.

It might be better to align duration returned by this plugin with the HTMLMediaElement interface, unless there are other mainstream types that use duration for ms instead.

But it would be a breaking change, so not ideal 😅

Problem encountered:
When I pick a file that is too large (more than 60MB), I get an OutOfMemory error on mobile, which is normal since heap size is unfortunately limited. Setting android: largeHeap to true does not solve the problem (and it's not a perfect solution anyway).

Solutions I thought of:

• Adding a size limit in PickFilesOptions would solve the problem for me, as it would prevent the user from picking a file that is too large.
• Additionally, files that are too large could be hidden in the picker or if it's simpler for you, there could be a simple error handling after calling fileResult.put("size", implementation.getSizeFromUri(uri)); to check if the size exceeds the limit. That second option would require you to move this call before fileResult.put("data", implementation.getDataFromUri(uri)); however.

If I'm missing something, let me know!

Is your feature request related to a problem? Please describe:

Reading the file needs some time depending on the size and may not always be desired.

Describe the solution you'd like:

Add a readData option.