.fileImporter() modifier that takes a store like .alert() to import files from Files app

[FredericRuaudel]

Hi all!

I've just created a SwiftUI view modifier alternative of .fileImporter that takes a binding of a store like the official library provides for alerts and confirmationDialogs and I'd like to share it with you if you need it one day, or maybe for its official integration in TCA library ?

Here is the implementation gist :

@_spi(Presentation) import ComposableArchitecture

// The FileImporterState (equivalent of AlertState)
struct FileImporterState<FileAction> {
    var allowedContentTypes: [UTType]
    var allowsMultipleSelection: Bool
    var onCompletion: ([URL]) -> FileAction
    var onFailure: (FileImporterError) -> FileAction
}

// I have created this error wrapper to make the FileAction 
// equatable, not ideal but it works
struct FileImporterError: LocalizedError, Equatable {
    var underlyingError: Swift.Error

    var errorDescription: String? {
        return underlyingError.localizedDescription
    }

    static func == (lhs: Self, rhs: Self) -> Bool {
        return lhs.errorDescription == rhs.errorDescription
    }
}

extension FileImporterState: _EphemeralState {
    typealias Action = FileAction
}

extension FileImporterState: Equatable {
    static func == (lhs: Self, rhs: Self) -> Bool {
        lhs.allowsMultipleSelection == rhs.allowsMultipleSelection &&
        lhs.allowedContentTypes == rhs.allowedContentTypes
    }
}

// The View modifier 
extension View {
    func fileImporter<Action>(_ item: Binding<Store<FileImporterState<Action>, Action>?>) -> some View {
        let store = item.wrappedValue
        let fileImporterState = store?.withState { $0 }
        return self.fileImporter(
            isPresented: Binding(item),
            allowedContentTypes: fileImporterState?.allowedContentTypes ?? [],
            allowsMultipleSelection: fileImporterState?.allowsMultipleSelection ?? false,
            onCompletion: { result in
                guard let fileImporterState else {
                    reportIssue("fileImporterState is nil and shouldn't?")
                    return
                }
                switch result {
                case .success(let urls):
                    store?.send(fileImporterState.onCompletion(urls))
                case .failure(let error):
                    store?.send(fileImporterState.onFailure(FileImporterError(underlyingError: error)))
                }
            },
            onCancellation: { }
        )
    }
}

And here is a gist to try it:

@Reducer
struct FileImporterTestReducer {
    @ObservableState
    struct State: Equatable {
        let selectedFiles: [URL]
        @Presents var destination: Destination.State?
    }

    @Reducer
    enum Destination {
        // I had to add this macro to make it compiles 
        // but it should be automatic like for AlertState
        @ReducerCaseEphemeral
        case filePicker(FileImporterState<FilePickerAction>)
    }

    enum Action {
        case showFilePicker
        case destination(PresentationAction<Destination.Action>)
    }

    @CasePathable
    enum FilePickerAction: Equatable {
        case didSelectFiles([URL])
        case didFail(FileImporterError)
    }

    var body: some ReducerOf<Self> {
        Reduce { state, action in
            switch action {
            case .showFilePicker:
                state.destination = .filePicker(
                    FileImporterState(
                        allowedContentTypes: [.image],
                        allowsMultipleSelection: true,
                        onCompletion: FilePickerAction.didSelectFiles,
                        onFailure: FilePickerAction.didFail
                    )
                )
                return .none
            case .destination(.presented(.filePicker(let fileAction))):
                switch fileAction {
                case .didSelectFiles(let urls):
                    state.selectedFiles = urls
                    return .none
                case .didFail(let error):
                    reportIssue(error)
                    return .none
                }
            case .destination:
                return .none
            }
        }
        .ifLet(\.$destination, action: \.destination)
    }
}

extension FileImporterTestReducer.Destination.State: Equatable {}

struct ContentView: View {
    @Bindable var store: StoreOf<FileImporterTestReducer>

    var body: some View {
        NavigationStack {
            Button("Show File Picker") {
                store.send(.showFilePicker)
            }
        }
        .fileImporter(
            $store.scope(
                state: \.destination?.filePicker,
                action: \.destination.filePicker
            )
        )
    }
}

// It even works in previews!
#Preview {
    ContentView(
        store: Store(
            initialState: FileImporterTestReducer.State(selectedFiles: []),
            reducer: FileImporterTestReducer.init
        )
    )
}

It probably need some optimisation and tweaks here and there, but as is, it works quite well!

Try it and tell me what you think of it?

Have a nice day!

Fred

[IvanPohorielov]

If you onCancellation: { } it become available from iOS 14.0

[IvanPohorielov]

Thank you!
You saved me, days of work
I am new into TCA