File Picker in SwiftUI – fileImporter

In Order to access local files in SwiftUI We have to use fileImporter. FileImporter helps us to access our local storage and import local files into our project.

What this blog will cover:

• fileImporter
• OnCompletion block

Syntax:

        .fileImporter(isPresented:  , allowedContentTypes:  , allowsMultipleSelection:  , onCompletion: )

You’ll understand the syntax later in the tutorial.

Access Files from Local Storage in SwiftUI

So let’s see how we can use fileImporter in SwiftUI

var body: some View {
       VStack(spacing: 25){
       
           Text(self.fileName)
           
           Button {
           } label: {
               Text("Open Document Picker")
           }
           
       }
  }

I have taken a TextView and a Button. The selected file’s name will show in the text view and with the help button I’ll access our local storage.

Here’s what our app looks like now:

@State var fileName = "no file chosen"
   @State var openFile = false

I’ve declared two State variables. State variables are those that can be modified and swiftUI keeps track of views that uses these state variables so it will update the whole view when these variables get updated.

    var body: some View {
        VStack(spacing: 25){
        
            Text(self.fileName)
            
            Button {
//changes the state of boolean variable
                self.openFile.toggle()
            } label: {
                Text("Open Document Picker")
            }
            
        }
        
        .fileImporter( isPresented: $openFile, allowedContentTypes: [.audio], allowsMultipleSelection: false, onCompletion: {
            (Result) in
            
            do{
                let fileURL = try Result.get()
                print(fileURL)
                self.fileName = fileURL.first?.lastPathComponent ?? "file not available"
                
            }
            catch{
               print("error reading file \(error.localizedDescription)")
            }
            
        })
       
    }

Added the fileImporter modifier to the VStack. 

• isPresented requires a boolean binding modifier. and whenever the state of the variable changes from false to true it will present the document picker to our main view.
• allowedContentTypes is an array of document types, So you can put as many types as you like and it will show you all those types of files in the document picker for example 

       [.audio,.image,.pdf] // three different types

• allowsMultipleSelection: if it is true, you’ll be able to pick more than one document, and if it’s false only one document can be picked.
• onCompletion is a block is a closure that will run automatically after you have picked your files, so you can access your picked files in the completion block.

So now when the user will click on the button it will change the state of the binding variable, openFile, from false to true.

       Button { 
          //changes the state of boolean variable
            self.openFile.toggle() 
        }

Which will trigger the fileImporter modifier and will present the document picker to our screen. Which will look like this:

and the completion block will run after the file has been picked. The file name is updated in the completion block. and SwiftUI will update the text in our text view as well. So the file name you just picked will appear in the textView above button.

Here is the complete code for reference:

import SwiftUI

struct ContentView: View {
     @State var fileName = "no file chosen"
     @State var openFile = false
 
    var body: some View {
        VStack(spacing: 25){
        
            Text(self.fileName)
            
            Button {
                self.openFile.toggle()
            } label: {
                Text("Open Document Picker")
            }
            
        }
        
        .fileImporter( isPresented: $openFile, allowedContentTypes: [.audio,.image,.pdf], allowsMultipleSelection: false, onCompletion: {
            (Result) in
            
            do{
                let fileURL = try Result.get()
                print(fileURL)
                self.fileName = fileURL.first?.lastPathComponent ?? "file not available"
                
            }
            catch{
               print("error reading file \(error.localizedDescription)")
            }
            
        })
       
    }
    

}

Also read: Play audio file in SwiftUI