FR: A file picker dialog

[ffAudio]

It might be borderline to the scope, but it would be amazing to have a way to raise the OS'ses file open/save dialog box.

Let me know, if that is planned or if I have to add some other library.

[mtytel]

Yeah I've thought about adding this because you might expect a UI library to have this feature.
Reason I hesitate is because it can be easily siloed into it's own library. I'll keep this open though in case lots of people want this.

FYI I'm using https://github.com/mlabbe/nativefiledialog for my own development which seems to work well.

[ffAudio]

That's absolutely understandable. I think so too, it makes sense to keep that separate.
Thanks for the pointer to mlabbe/nativefiledialog, I'll check it out.

[ffAudio]

FYI I'm using https://github.com/mlabbe/nativefiledialog for my own development which seems to work well.

It seems it didn't get updates in a while.

I found a successor which works nicely and even has a working CMakeFile:
https://github.com/btzy/nativefiledialog-extended
That was pretty painless.

[danielraffel]

Hey @mtytel and @ffAudio,

I've been following this thread and wanted to share how I've successfully implemented a file picker in my audio plugin, which uses Visage for the UI and JUCE for the backend and plugin hosting. This approach works seamlessly and might be a good pattern for others.

The Challenge

Like others, I needed a reliable way to open the OS's native file dialog for features like importing presets, without adding a heavy dependency or writing a lot of platform-specific code.

The Solution: A Hybrid JUCE + Visage Approach

Since my plugin already uses JUCE for audio processing and to act as the VST/AU wrapper, I leveraged JUCE's juce::FileChooser class directly from my Visage UI code. Visage and JUCE interoperate quite well in a single project.

Here’s the pattern I used:

1. Trigger from Visage: The user clicks an "Import Preset..." button in my Visage-based settings panel.

2. Launch JUCE FileChooser: The onClick handler for the Visage button calls a C++ function that creates and launches a juce::FileChooser instance.

3. Asynchronous Handling: I use launchAsync to show the file dialog without blocking the UI or the audio thread. The result is handled in a C++ lambda.

Code Example

Here is a simplified version of the code inside my VisagePresetComponent class:

// Member variable in my Visage component class
std::unique_ptr<juce::FileChooser> importFileChooser;

// ... inside a Visage button's click handler ...

void VisagePresetComponent::handleImportClick()
{
    // Use JUCE's FileChooser for the dialog
    importFileChooser = std::make_unique<juce::FileChooser>(
        "Import Preset",
        juce::File::getSpecialLocation(juce::File::userDocumentsDirectory),
        "*.mypluginpreset");
    
    auto chooserFlags = juce::FileBrowserComponent::openMode |
                        juce::FileBrowserComponent::canSelectFiles;
    
    // Launch asynchronously and handle the result in a lambda
    importFileChooser->launchAsync(chooserFlags, [this](const juce::FileChooser& fc)
    {
        auto file = fc.getResult();
        if (file.existsAsFile())
        {
            // Load the preset file
            loadPreset(file);
        }
    });
}

Why This Works Well

• No New Dependencies: It uses the robust, cross-platform file dialogs already available in JUCE.
• Non-Blocking: The launchAsync method is perfect for audio plugins, as it doesn't interrupt the audio thread.
• Clean Integration: The Visage UI triggers the action, and the C++ backend handles the result, keeping the concerns separate.

This hybrid approach has been very effective. It allows me to build a modern UI with Visage while still relying on JUCE for its mature and reliable platform integration features. For anyone else building a JUCE-based plugin with a Visage UI, I highly recommend this pattern.

Hope this is helpful!