惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Y
Y Combinator Blog
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
博客园_首页
量子位
V
Visual Studio Blog
博客园 - Franky
宝玉的分享
宝玉的分享
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
博客园 - 【当耐特】
罗磊的独立博客
小众软件
小众软件
V
V2EX
GbyAI
GbyAI
B
Blog RSS Feed
博客园 - 三生石上(FineUI控件)
大猫的无限游戏
大猫的无限游戏
有赞技术团队
有赞技术团队
月光博客
月光博客
Recent Announcements
Recent Announcements
雷峰网
雷峰网
F
Fortinet All Blogs
M
MIT News - Artificial intelligence

DEV Community

Authentication Security Deep Dive: From Brute Force to Salted Hashing (With Java Examples) Why AI Systems Don’t Fail — They Drift Spilling beans for how i learn for exam😁"Reinforcement Learning Cheat Sheet" I Replaced Chrome with Safari for AI Browser Automation. Here's What Broke (and What Finally Worked) How Python Borrows Other People's Work The $40 Architecture: Processing 1 Billion API Requests with 99.99% Uptime Vibe Coding: A Workflow Guide (From Zero to SaaS) Most webhook security guides protect the wrong side. The scary part is delivery. Headless CMS for TanStack Start: Build a Blog with Cosmic EU Age Verification App "Hacked in 2 Minutes" — What Actually Happened Comfy Cloud’s delete function does not actually remove files Running AI Models on GPU Cloud Servers: A Beginner Guide Event-driven media intelligence with AWS Step Functions and Bedrock I scored 500 AI prompts across 8 quality dimensions — here's what broke How to Call Google Gemini API from Next.js (Free Tier, No Backend Needed) The Portal Protocol: Reclaiming Human Connection in the Age of AI How to Fix Your Team's Scattered Knowledge Problem With a Self-Hosted Forum Intro to tc Cloud Functors: A Graph-First Mental Model for the Modern Cloud Designing Multi-Tenant Backends With Both Ownership and Team Access I Built a Neumorphic CSS Library with 77+ Components — Here's What I Learned PostgreSQL Performance Optimization: Why Connection Pooling Is Critical at Scale Cómo construí un SaaS multi-rubro para gestionar expensas en Argentina con FastAPI + Vue 3 🚀 I Built an Ethical Hacking Scanner Tool – Open Source Project I Replaced /usage and /context in Claude Code With a Single Statusline A Pythonic Way to Handle Emails (IMAP/SMTP) with Auto-Discovery and AI-Ready Design I Collected 8.9 Million Polymarket Price Points — Here's What I Found About How Markets Really Move EcoTrack AI — Carbon Footprint Tracker & Dashboard Everyone's Using AI. No One Agrees How. 5 self-hosted ebook managers worth trying in 2026 Building Your First AI Agent with LangChain: From Chatbot to Autonomous Assistant
Flutter Supabase Storage — Complete File Upload Guide
kanta13jp1 · 2026-04-29 · via DEV Community

kanta13jp1

Flutter × Supabase Storage — Complete File Upload Guide

Manage images, PDFs, and videos in one place with Supabase Storage.

Basic Upload

Future<String> uploadFile(File file, String userId) async {
  final ext = file.path.split('.').last;
  final path = '$userId/${DateTime.now().millisecondsSinceEpoch}.$ext';

  await supabase.storage
      .from('uploads')
      .upload(path, file, fileOptions: const FileOptions(upsert: false));

  // Get the public URL
  final url = supabase.storage.from('uploads').getPublicUrl(path);
  return url;
}

Enter fullscreen mode Exit fullscreen mode

Compress + Upload Images

import 'package:image/image.dart' as img;

Future<String> uploadCompressedImage(XFile picked, String userId) async {
  final bytes = await picked.readAsBytes();
  final original = img.decodeImage(bytes)!;

  // Resize to max 1200px wide
  final resized = img.copyResize(
    original,
    width: original.width > 1200 ? 1200 : original.width,
  );

  // JPEG at quality 85
  final compressed = img.encodeJpg(resized, quality: 85);

  final path = '$userId/${DateTime.now().millisecondsSinceEpoch}.jpg';
  await supabase.storage
      .from('avatars')
      .uploadBinary(path, Uint8List.fromList(compressed));

  return supabase.storage.from('avatars').getPublicUrl(path);
}

Enter fullscreen mode Exit fullscreen mode

Upload Progress Indicator

// The Supabase Flutter SDK doesn't expose a native progress callback yet.
// Use dio to track progress:
import 'package:dio/dio.dart';

Future<void> uploadWithProgress(
  File file,
  String path,
  ValueNotifier<double> progress,
) async {
  final dio = Dio();
  final formData = FormData.fromMap({
    'file': await MultipartFile.fromFile(file.path),
  });

  // POST directly to the Supabase Storage REST endpoint
  await dio.post(
    '${supabase.storageUrl}/object/uploads/$path',
    data: formData,
    options: Options(headers: {
      'Authorization': 'Bearer ${supabase.auth.currentSession!.accessToken}',
    }),
    onSendProgress: (sent, total) {
      progress.value = sent / total;
    },
  );
}

Enter fullscreen mode Exit fullscreen mode

Storage Policies (equivalent to RLS)

-- Users can only upload to their own folder
CREATE POLICY "users can upload own files"
  ON storage.objects FOR INSERT
  WITH CHECK (
    bucket_id = 'uploads'
    AND (storage.foldername(name))[1] = auth.uid()::text
  );

-- Public bucket is readable by everyone
CREATE POLICY "public read"
  ON storage.objects FOR SELECT
  USING (bucket_id = 'public-assets');

-- Users can only delete their own files
CREATE POLICY "users can delete own files"
  ON storage.objects FOR DELETE
  USING (
    bucket_id = 'uploads'
    AND (storage.foldername(name))[1] = auth.uid()::text
  );

Enter fullscreen mode Exit fullscreen mode

Summary

Basic upload    → storage.from('bucket').upload(path, file)
Compression     → image package: resize + encodeJpg
Progress        → dio + Supabase REST API with onSendProgress
Policies        → storage.foldername(name)[1] = auth.uid() isolates per-user

Enter fullscreen mode Exit fullscreen mode

Use separate buckets for public and private assets — access control is per-bucket.