Integrate TUS client

[Vinzent03]

Is your feature request related to a problem? Please describe.
As proposed here it seems like it's not planned to integrate the tus client into supabase-js, because there is already the great library uppy.js.
Though the best TUS client for Dart I found was this one, which doesn't support Web for persistent storage and is a fork from an older package.

Describe the solution you'd like
I think it feels more in Supabase integrated if the existing supabase-dart client would support TUS as well. So my proposal would be to integrate it in storage-dart.

[dshukertjr]

There actually is a plan to integrate tus client on js library. We can wait to see how that plays out, and bring it over to the Flutter library!

[prafulfillment]

What's the status on this for Flutter?

[dshukertjr]

@prafulfillment
We are still evaluating the optimal developer experience for the client side implementation of resumable uploads across all client libraries.

[theShreyans]

Correct me if I'm wrong. After the launch week, it seems like resumable uploads are still not available for all projects and are made available per project basis. In that case is there any workaround as of now for flutter-related projects? I'm working on a project that lets the user upload max 100 MB of files but without upload progress or cancelling uploads or resuming them, it would be impossible. Also, I tried integrating a custom Backblaze storage option but was too much work.

[dshukertjr]

@theShreyans
You can contact Supabase support if you want resumable uploads turned on for your Supabase project.

Implementing TUS protocol on the client library is in progress. We ask to patiently wait for it to be complete. In the mean while, you may explorer third party TUS client libraries such as this one
https://pub.dev/packages/tus_client_dart

[rlee1990]

@dshukertjr any updates on this for flutter?

[rlee1990]

Any updates on this?

[dshukertjr]

@rlee1990
Will add this to supabase-flutter once they add it to the js client. supabase/storage-js#189

[JEndler]

I'd also be interested in this.

In the meantime, I've been trying to get the resumable upload to work with https://pub.dev/packages/tus_client_dart, here's a version that works for me :) Might save someone some time:

// Function to pick a file
Future<XFile> pickFile(List<String> allowedExtensions) async {
  // Function to pick files
  FilePickerResult? result = await FilePicker.platform.pickFiles(
    type: FileType.custom,
    allowedExtensions: allowedExtensions
  );
  if (result != null) {
    XFile file = XFile(result.files.single.path!);
    return file;
  } else {
    // User canceled the picker
    return XFile('');
  }
}

// Function to pick files and upload to Supabase Storage using TUS
Future<void> pickFilesAndUploadToSupabaseWithTUS() async {
  try {
    // Function to pick files, only allows zip files
    XFile? file = await pickFile(['zip']);

    String uid = Supabase.instance.client.auth.currentUser!.id;
    
    // Create a new TusClient instance
    final tusClient = TusClient(file, store: TusMemoryStore());

    // function to print progress
    void printOnProgress(double progress, Duration duration) {
      print('Progress: $progress% and $duration time');
    }

    // Starts the upload
    await tusClient.upload(
      uri: Uri.parse(
        // This resolves to our Supabase Storage URL
          '${dotenv.env['SUPABASE_URL']!}/storage/v1/upload/resumable'),
      headers: {
        'Authorization': 'Bearer ${Supabase.instance.client.auth.currentSession?.accessToken}',
        // Set to true to enable overwrite
        'x-upsert': 'true'
      },
      metadata: {
        'bucketName': 'bucketname',
        'objectName': '$uid/${file.path.split('/').last}',
        'contentType': 'application/zip',
      },
      onStart: (TusClient client, Duration? estimate) {
        // If estimate is not null, it will provide the estimate time for completion
        // it will only be not null if measuring upload speed
        print('This is the client to be used $client and $estimate time');
      },
      onComplete: () {
        print("Complete!");
        // Prints the uploaded file URL
        print(tusClient.uploadUrl.toString());
      },
      onProgress: printOnProgress,
      // Set this to true if you want to measure upload speed at the start of the upload
      measureUploadSpeed: true,
    );
   }

[iampopal]

I'd also be interested in this.

In the meantime, I've been trying to get the resumable upload to work with https://pub.dev/packages/tus_client_dart, here's a version that works for me :) Might save someone some time:

// Function to pick a file
Future<XFile> pickFile(List<String> allowedExtensions) async {
  // Function to pick files
  FilePickerResult? result = await FilePicker.platform.pickFiles(
    type: FileType.custom,
    allowedExtensions: allowedExtensions
  );
  if (result != null) {
    XFile file = XFile(result.files.single.path!);
    return file;
  } else {
    // User canceled the picker
    return XFile('');
  }
}

// Function to pick files and upload to Supabase Storage using TUS
Future<void> pickFilesAndUploadToSupabaseWithTUS() async {
  try {
    // Function to pick files, only allows zip files
    XFile? file = await pickFile(['zip']);

    String uid = Supabase.instance.client.auth.currentUser!.id;
    
    // Create a new TusClient instance
    final tusClient = TusClient(file, store: TusMemoryStore());

    // function to print progress
    void printOnProgress(double progress, Duration duration) {
      print('Progress: $progress% and $duration time');
    }

    // Starts the upload
    await tusClient.upload(
      uri: Uri.parse(
        // This resolves to our Supabase Storage URL
          '${dotenv.env['SUPABASE_URL']!}/storage/v1/upload/resumable'),
      headers: {
        'Authorization': 'Bearer ${Supabase.instance.client.auth.currentSession?.accessToken}',
        // Set to true to enable overwrite
        'x-upsert': 'true'
      },
      metadata: {
        'bucketName': 'bucketname',
        'objectName': '$uid/${file.path.split('/').last}',
        'contentType': 'application/zip',
      },
      onStart: (TusClient client, Duration? estimate) {
        // If estimate is not null, it will provide the estimate time for completion
        // it will only be not null if measuring upload speed
        print('This is the client to be used $client and $estimate time');
      },
      onComplete: () {
        print("Complete!");
        // Prints the uploaded file URL
        print(tusClient.uploadUrl.toString());
      },
      onProgress: printOnProgress,
      // Set this to true if you want to measure upload speed at the start of the upload
      measureUploadSpeed: true,
    );
   }

Does this example works to check progress of uploading?