Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/hinddeep/capacitor-file-selector


https://github.com/hinddeep/capacitor-file-selector

Last synced: 24 days ago
JSON representation

Awesome Lists containing this project

README 

        
# Capacitor File Selector



For detailed tutorial on how to enable dark mode using this plugin visit:

https://medium.com/@hinddeep.purohit007/picking-files-in-capacitor-apps-a82c67384496 



Demo Application: https://github.com/hinddeep/demo-capacitor-file-picker 



Platforms Supported: Android, iOS, and Web/PWA



This plugin can be used to conditionally select files form Android/iOS devices and the web.



# Installation 



```

npm install capacitor-file-selector

```



# Android Configuration: 


Open MainActivity.java and add the following code inside this.init() 


```

add(FileSelector.class);

Adding the above mentioned line will add the following import statement: 

import com.bkon.capacitor.fileselector.FileSelector;

```

If you encounter errors, please add both the lines manually to MainActivity.java 



To view all the supported Extensions please visit: 


https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types 



# iOS Configuration: 


To view all the supported extensions please visit: 


https://developer.apple.com/library/archive/documentation/Miscellaneous/Reference/UTIRef/Articles/System-DeclaredUniformTypeIdentifiers.html 



# Web Configuration 


```

import { Plugins } from '@capacitor/core'; 

const { FileSelector } = Plugins; 

import ‘capacitor-file-selector’ // Comment out this line when building android/iOS app


```



 SPECIAL NOTE:  When building the app for Android/iOS please do not forget to comment out “import ‘capacitor-file-selector’ ”. The import statement is used to register the web implementation of the plugin. If you register the web implementation of the plugin on native android/iOS app, the code that gets invoked is the web implementation instead of the native Android/iOS implementation. 



# Select Files:



Supported extensions:- All extensions are supported. Please refer https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types   



Supported Broad Categories: “images”, “videos” and “audios”  



To allow the selection of all file types use “*” 



If you wish to allow the user to select more than file, set the multiple_selection variable to true, else set it to false. Use the ext array to list out all the permitted extensions / broader file categories. The user will be able to select only the files with extensions / category outlined in this ext array. 



The ext array IS case sensitive. All characters entered must be in lowercase. If not use Typescript’s map function to convert them into lowercase.  
 

```  

ext = ext.map(v => v.toLowerCase());

```



Data returned by the file picker contains: 


1. “paths” array - an array of web accessible URL(s) 


2. “original_names” - an array of the name(s) of the file(s) 


3. “extensions” - an array of extension(s) corresponding to the files selected 



2 and 3 can be combined to rebuild the original file name. The following function illustrates how to upload files fetched from Android/iOS/Web to any server. 



```

async select() { 

    let multiple_selection = true 

    //let ext = [".jpg",".png",".pdf",".jpeg"] // list of extensions

    let ext = ["MP3", "ImaGes"] // combination of extensions or category 

    //let ext = ["videos", "audios", "images"] // list of all category

    //let ext = ["*"] // Allow any file type

    ext = ext.map(v => v.toLowerCase()); 

    let formData = new FormData(); 

    let selectedFile = await FileSelector.fileSelector({ 

      multiple_selection: multiple_selection, 

      ext: ext 

    }) 



    if(this.platform.is("android")) 

    { 

      let paths = JSON.parse(selectedFile.paths) 

      let original_names = JSON.parse(selectedFile.original_names) 

      let extensions = JSON.parse(selectedFile.extensions) 

      for (let index = 0; index < paths.length; index++) { 

          const file = await fetch(paths[index]).then((r) => r.blob()); 

          formData.append( 

            "myfile[]", 

            file, 

            original_names[index] + extensions[index] 

          ); 

        }

    } 

    else if(this.platform.is("ios")) 

    { 

      for (let index = 0; index < selectedFile.paths.length; index++) { 

        const file = await fetch(selectedFile.paths[index]).then((r) => r.blob()); 

        formData.append( 

          "myfile[]", 

          file, 

          selectedFile.original_names[index] + selectedFile.extensions[index] 

        ); 

      } 

    } 

    else 

    { 

      FileSelector.addListener("onFilesSelected", (data:FileList) => { 

            for(var i = 0; i < data.length; i++) 

            { 

              formData.append( 

                "myfile[]", 

                data.item(i), 

                data.item(i).name + data.item(i).type  

              );

            }

        }); 

    } 

}

```