Search code examples
flutterfile-uploadsupabase

Upload image Supabase Storage with Flutter Web issue on universal_io


I am trying upload image in Supabase Storage and I am using this method as document :

supabase.storage.from('avatars').upload(fileName,file)

Here file is : var file = File(_session.photoFilePath!); // import'package:universal_io/io.dart';

and path in print: is blob:http://localhost:55914/eff9c2bb-061f-4577-bf00-eff523029635

also _session.photoFileName! in print: is tiger.jpeg

I am already signedIn and I have permission upload image in avatars budget. When I run without any error or warning that supabase.storage.from('avatars').upload(_session.photoFileName!,file)

I got this error :

UnimplementedError
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 266:49      throw_
packages/universal_io/src/io/file.dart 225:7                                      new
packages/fr_panel/view/session_page.dart 351:42                                   <fn>
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 84:54                runBody
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 123:5                _async
packages/fr_panel/view/session_page.dart 348:38                                   <fn>
packages/fr_panel/widgets/next_button.dart 40:27                                  <fn>
packages/flutter/src/widgets/framework.dart 1114:30                               setState
packages/fr_panel/widgets/next_button.dart 39:9                                   <fn>
packages/flutter/src/material/ink_well.dart 1072:21                               handleTap
packages/flutter/src/gestures/recognizer.dart 253:24                              invokeCallback
packages/flutter/src/gestures/tap.dart 627:11                                     handleTapUp
packages/flutter/src/gestures/tap.dart 306:5                                      [_checkUp]
packages/flutter/src/gestures/tap.dart 239:7                                      handlePrimaryPointer
packages/flutter/src/gestures/recognizer.dart 615:9                               handleEvent
packages/flutter/src/gestures/pointer_router.dart 98:12                           [_dispatch]
packages/flutter/src/gestures/pointer_router.dart 143:9                           <fn>
dart-sdk/lib/_internal/js_dev_runtime/private/linked_hash_map.dart 21:13          forEach
packages/flutter/src/gestures/pointer_router.dart 141:17                          [_dispatchEventToRoutes]
packages/flutter/src/gestures/pointer_router.dart 127:7                           route
packages/flutter/src/gestures/binding.dart 460:19                                 handleEvent
packages/flutter/src/gestures/binding.dart 440:14                                 dispatchEvent
packages/flutter/src/rendering/binding.dart 337:11                                dispatchEvent
packages/flutter/src/gestures/binding.dart 395:7                                  [_handlePointerEventImmediately]
packages/flutter/src/gestures/binding.dart 357:5                                  handlePointerEvent
packages/flutter/src/gestures/binding.dart 314:7                                  [_flushPointerEventQueue]
packages/flutter/src/gestures/binding.dart 295:7                                  [_handlePointerDataPacket]
lib/_engine/engine/platform_dispatcher.dart 1183:13                               invoke1
lib/_engine/engine/platform_dispatcher.dart 244:5                                 invokeOnPointerDataPacket
lib/_engine/engine/pointer_binding.dart 147:39                                    [_onPointerData]
lib/_engine/engine/pointer_binding.dart 653:20                                    <fn>
lib/_engine/engine/pointer_binding.dart 594:14                                    <fn>
lib/_engine/engine/pointer_binding.dart 288:16                                    loggedHandler
lib/_engine/engine/pointer_binding.dart 179:80                                    <fn>
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 334:14  _checkAndCall
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 339:39  dcall

As you understand , It happens because of the file library. I can't use 'dart:io' because it's not available for Flutter Web. Supabase upload image method accepts file from 'package:universal_io/io.dart' from universal_io: ^2.0.4 and when run function, this problem happen. Do you any idea about how I can solve this problem and how I can upload supabase storage ?

My flutter doctor :

    Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel master, 3.1.0-0.0.pre.1698, on macOS 13.0 22A5286j darwin-arm, locale en-TR)
[✓] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
[✓] Xcode - develop for iOS and macOS (Xcode 14.0)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.1)
[✓] VS Code (version 1.69.2)
[✓] Connected device (2 available)
[✓] HTTP Host Availability

• No issues found!

Thanks !


Solution

  • The .upload() method does not play well with Flutter web. For Flutter web, you can use the .uploadBinary() method like the following:

    import'package:universal_io/io.dart';
    
    final file = File('path/to/file');
    final fileBytes = await file.readAsBytes();
    await Supabase.instance.client.storage
        .from('avatars')
        .uploadBinary(filePath, fileBytes);
    

    We will update the Supabase documentation as this has not been very well documented.