Problem Description

You are required to create a solution that incorporates a file picker interface for four different integrations: Google Drive, Dropbox, Notion, and Slack. This solution will be connected to a dropdown menu that contains these four options. The desired flow is as follows:

User clicks on the preferred upload option from the dropdown (for example, 'Upload from Google Drive').
The Google Drive Picker and Drive API are invoked, prompting the user to authenticate into their Google Drive account.
The user selects the files they wish to upload.
The selected files are then sent to a provided API endpoint, which is responsible for handling these files.
This process should be replicated for each integration. The solution should be designed to accept API keys for each of these four integrations and should be able to handle file transfer to the said integrations, once the API keys are plugged in.

Acceptance Criteria

On selecting an option from the dropdown, the corresponding picker interface and API must be invoked successfully.
Users must be able to authenticate their accounts via OAuth for the selected integration and proceed to the file selection stage.
Users should be able to select one or multiple files from their accounts for the selected integration.
The selected files should be correctly forwarded to the provided API endpoint.
The solution should accept API keys for all four integrations and successfully interact with each service once the respective API key is plugged in.
Code should be clean, well-documented, and easy to integrate with existing services. The solution should also be robust and handle potential errors gracefully.

Code will be in Typescript for Nextjs.