Custom uploader without url

[bruceharrison1984]

Is your feature request related to a problem? Please describe.
I'm wanting to use uploady for images, but I am using Supabase as my backend. It doesn't support SignedUrls for uploads, so the only way it can be used is via the SDK. I'm sure there are other scenarios where this happens as well.

Describe the solution you'd like
A way to pass a custom upload function that allows me to send the file via SDK code.

Describe alternatives you've considered
Since Supabase doesn't allow generation of signed urls for upload, there aren't many outside of creating a proxy endpoint to receive the file FormData, and pass it along from there.

Additional context
None, but great work on this!

[yoavniran]

Hi @bruceharrison1984, I believe what you're asking for is already possible with Uploady as it is today.
Its pretty much what the custom senders (chunked, tus, mock) of the library do. They replace the default (xhr) sender with their own send method.

See here the signature of the send method. You can pass your custom send method as a prop to Uploady.

Im not familiar with Supabase SDK but I expect it shouldnt be difficult to integrate since you will be getting the File object from the Uploader in your custom send method.

I'll move this thread to the discussions section.

[bruceharrison1984]

That you very much @yoavniran! I read through the docs but didn't see any explicit mention of this so I incorrectly presumed it wasn't supported. I'll take a look, and thank you!

[thorwebdev]

This is the supabase sender I've come up with:

import { BatchItem, FILE_STATES } from "@rpldy/shared";
import { SendMethod, SendResult } from "@rpldy/sender";
import { SupabaseClient } from "@supabase/supabase-js";

const validateItems = (items: BatchItem[]) => {
  if (items.length > 1) {
    throw new Error(
      "Uploady Supabase Storage Sender - only 1 file can be uploaded per request (use concurrent = 1)"
    );
  }

  if (!items[0].file) {
    throw new Error(
      "Uploady Supabase Storage Sender - uploaded item must be file"
    );
  }
};

export const supabaseStorageSender = ({
  supabase,
  fileName,
  fileNamePrefix,
  bucket,
}: {
  supabase: SupabaseClient;
  fileName?: string;
  fileNamePrefix?: string;
  bucket: string;
}) => {
  const process: SendMethod = (items: BatchItem[]) => {
    let result: SendResult = {
      request: new Promise((resolve, reject) => {
        try {
          validateItems(items);
          supabase.storage
            .from(bucket)
            .upload(
              fileName ??
                `${fileNamePrefix ? fileNamePrefix + "_" : ""}${
                  items[0].file.name
                }`,
              <Blob>(<unknown>items[0].file)
            )
            .then(({ data, error }) => {
              console.log({ data, error });
              if (data)
                resolve({
                  status: 200,
                  state: FILE_STATES.FINISHED,
                  response: {
                    ...data,
                    publicUrl: supabase.storage
                      .from(bucket)
                      .getPublicUrl(data.path).data.publicUrl,
                  },
                });
              if (error) reject(error);
            });
        } catch (error) {
          reject(error);
        }
      }),
      abort: () => false,
      senderType: "supabase-storage-sender",
    };

    return result;
  };

  return process;
};

And then you can use it as follows:

const UploadButtonWithEvents = () => {
    useItemFinishListener((file) => {
      setPhotoName(file.uploadResponse.path);
      setOriginalPhoto(file.uploadResponse.publicUrl);
    });

    return <UploadButton />;
  };

  const UploadDropZone = ({ supabase }: { supabase: SupabaseClient }) => (
    <Uploady
      multiple={false}
      send={supabaseStorageSender({
        supabase,
        bucket: "rooms",
        fileNamePrefix: session?.user.name ?? "",
      })}
    >
      <UploadButtonWithEvents />
      <UploadPreview />
    </Uploady>

Would love to hear your feedback :)

[yoavniran]

great start @thorwebdev
I've created the repo and added you.

Note that there's quite some work to do in order for this code to be ready to be published as a supabase-uploady provider.

In needs to follow the same pattern found in drive-uploady:

• a wrapper around Uploady
• an Uploader Enhancer
• Tests (unit + integration) will be best
• Readme
• I dont see implementation of progress. Is it not possible to get progress for the upload from the SupabaseClient?
• No implementation of abort. Is it not possible?

Let me know what I can help with

[thorwebdev]

Thanks, @yoavniran.

We're currently working on supporting tus, so I'm wondering how worthwhile it is to built a separate wrapper. Let me test the tus-uploady first and see how that goes.

[yoavniran]

@thorwebdev plz let me know if I should keep the supabase repo open or should I delete?
Thanks

[thorwebdev]

Since we now have TUS support I believe we can close out the supabase specific repo. Thanks and sorry for the hassle!