Integrate Wasabi in Flutterflow

📂 Upload Files to Wasabi Bucket in FlutterFlow

Wasabi is a cloud storage provider that offers low-cost, high-performance object storage similar to Amazon S3. A Wasabi bucket is a storage container where you can store and manage objects (files, images, videos, etc.), just like an Amazon S3 bucket.

🔹 Prerequisites

Before starting, make sure you have:
✅ A Wasabi account with a storage bucket
✅ Access Key & Secret Key from Wasabi

🔑 Step 1: Store API Credentials in the App State of Flutterflow

To keep credentials safe and accessible, store them in App State Variables and make them persistent.

Go to FlutterFlow → App State and add:

• wasabiAccessKey (String)

• wasabiSecretKey (String)

• wasabiBucketName (String)

✅ Mark them as persistent so they remain available across sessions.

⚡ Step 2: Add a Custom Action for File Upload

1️⃣ Go to Custom Actions in FlutterFlow
2️⃣ Click on + Create → Name it UploadToWasabi
3️⃣ Set Action Type → Backend Call
4️⃣ Add a Parameter → Name it file (Type: FF Uploaded File)
5️⃣ Paste the following code in the action:

import 'dart:io';

Future uploadFileToWasabi(FFUploadedFile file) async {
  final String bucketName = FFAppState().bucketName; 
  final String url = 'https://${bucketName}.s3.wasabisys.com/${file.path}';
  final String accessId =  FFAppState().accessKey;
  final String secret =  FFAppState().secretKey;
  
  try {
    var request = http.MultipartRequest('PUT', Uri.parse(url))
      ..files.add(await http.MultipartFile.fromPath('file', file.path))
      ..headers.addAll({
        'x-amz-access-id': accessId,
        'x-amz-secret': secret,
      });

    var response = await request.send();

    if (response.statusCode == 200) {
      print('File uploaded successfully');
    } else {
      print('Failed to upload file: ${response.statusCode}');
    }
  } catch (e) {
    print('Error uploading file: $e');
  }

🚀 Step 3: Call the Custom Action in Your App

1️⃣ Add a File Picker in your FlutterFlow UI
2️⃣ Call the Custom Action (UploadToWasabi) in the Action Flow
3️⃣ Pass the uploaded file as an argument
4️⃣ Check if the upload is successful and display a success message

✅ Important Notes

⚠️ Make your Wasabi bucket public so files can be accessed after upload.
⚡ Ensure your API keys are stored securely (Avoid hardcoding in the app).
🛠️ You can modify the upload logic to handle different file types and permissions.

That’s it! 🎯 Now, your FlutterFlow app can seamlessly upload files to Wasabi Storage! 🚀🔥

📢 Like, Comment, and Share if you found this helpful! 💙🚀.
💬 If you need any help, feel free to contact me!