Skip to main content

cfiles

Cloud Files​

Accessing cloud files (Google Drive, OneDrive, Dropbox, iCloud) across iOS, Android, and a Web PWA splits your development path into two completely different strategies: the Passive (Native System) approach and the Active (API + OAuth) approach.

Because a PWA runs entirely in a browser sandbox, it cannot rely on the native mobile operating system to bridge the gap to other cloud apps. To get a seamless experience everywhere, you have to treat cloud files as remote network data rather than local storage.

Strategy 1: The Native System Approach (Mobile Only)​

If you are only using the basic file_picker package, you actually get basic Google Drive and iCloud support on mobile for free—with a huge catch.

  • How it works: On iOS and Android, if a user has the Google Drive or OneDrive app installed, those apps act as "Document Providers" to the OS. When your Flutter app launches the native file picker, the user can side-swipe into their Google Drive or iCloud folders.
  • The PWA Problem: This fails completely on a Web PWA. A browser's standard file input cannot peek into the user's installed Google Drive or OneDrive mobile apps.

If your PWA needs cloud access, you must use Strategy 2.

Strategy 2: True Cross-Platform Cloud Integration (OAuth2 + APIs)​

To make cloud file picking work flawlessly on Mobile and your PWA, you bypass the device's file system entirely and talk directly to the cloud providers via OAuth 2.0 authentication and REST APIs.

The Implementation Workflow​

  1. Your user clicks an "Import from Google Drive" button in your Flutter PWA.
  2. The app opens a secure pop-up or redirect to Google/Microsoft's official login page.
  3. The user grants your app permission to read their files.
  4. The cloud service redirects back to your PWA with an Access Token.
  5. Your Flutter app uses that token to fetch a list of files and download the raw bytes (Uint8List) directly into memory.

The Tools for Flutter​

Instead of building this from scratch for every provider, you can use specialized packages:

1. Unified Packages​

Look into packages like multi_cloud_storage. It abstracts Google Drive, OneDrive, and Dropbox into a unified Dart API, handling directory listing and file streaming uniformly across platforms.

2. Provider-Specific SDKs​

If you want total control, you can use the official ecosystem packages:

  • For Google Drive: Combine google_sign_in (which supports web) with the official googleapis package. You authenticate the user, request the drive.readonly scope, and use the DriveApi class to list files and stream bytes.
  • For OneDrive: Use an OAuth library (like oauth_webauth) to hit the Microsoft Graph API. The endpoint https://graph.microsoft.com/v1.0/me/drive/root/children handles file retrieval.

⚠️ The Absolute Critical Gotchas for PWAs​

If you go the API route, setting up your cloud developer consoles (Google Cloud Console and Microsoft Azure Portal) requires very strict configurations for Web vs. Mobile:

1. Redirect URIs are Unforgiving​

For mobile apps, you register a custom URL scheme (like myapp://). For your PWA, you must register the exact HTTP URLs where your app is hosted. If your PWA is hosted at https://my-flutter-app.web.app, that exact URL must be safelisted in your Google/Microsoft developer consoles, down to the trailing slash. During local development, you will also need to register http://localhost:8080.

2. The Pop-up Blocker Nightmare​

When triggering an OAuth login flow on the web, browsers will instantly block the login window if it isn't initiated by a direct user action. Ensure the authentication function runs immediately inside a PlatformButton's onPressed callback. Never trigger an authentication flow inside an asynchronous callback or timer loop.

3. Google Picker API (Web-Optimized)​

For Google Drive specifically, instead of building a custom UI to list files, you can embed the Google Picker API via a web-only view. It displays a beautiful, native-feeling Google Drive window right inside your browser window and returns the file metadata back to Flutter.

Which cloud service is the highest priority for your user base right now, and are you planning to build a custom file browser UI inside your app, or would you prefer to pass the user off to the cloud provider's official web UI?