sudhanshug Posts - Answer Overflow

sudhanshug

Explore posts from servers

TTCTheo's Typesafe Cult DTDrizzle Team KKinde

Posts Comments

TTCTheo's Typesafe Cult

•Created by sudhanshug on 11/4/2024 in #questions

[Expo + UT] Error when importing @uploadthing/expo

38 replies

TTCTheo's Typesafe Cult

•Created by sudhanshug on 10/21/2024 in #questions

[Rails + UT] How to use UploadThing outside of JS ecosystem, using Rest API?

Hey, I am building file upload functionality for my Expo+Rails app. I was hoping to use UploadThing for it's robust FE library and the managed s3 experience. Firstly, the docs aren't friendly for non-JS folks, please look into that - a lot of contradicting/variety of information. I am calling the /v6/prepareUpload endpoint in my /api/uploadthing api controller but it is not returning presigned urls as one would hope reading the REST api docs. Here is the shape of the output:

export interface PrepareUploadResposne {
  url: string;
  fields: Fields;
  key: string;
  contentDisposition: string;
  fileUrl: string;
  appUrl: string;
  pollingJwt: string;
  pollingUrl: string;
  fileName: string;
  fileType: string;
  customId: string;
}
export interface Fields {
  acl: string;
  Content-Type: string;
  Content-Disposition: string;
  bucket: string;
  X-Amz-Algorithm: string;
  X-Amz-Credential: string;
  X-Amz-Date: string;
  key: string;
  Policy: string;
  X-Amz-Signature: string;
}

export interface PrepareUploadResposne {
  url: string;
  fields: Fields;
  key: string;
  contentDisposition: string;
  fileUrl: string;
  appUrl: string;
  pollingJwt: string;
  pollingUrl: string;
  fileName: string;
  fileType: string;
  customId: string;
}
export interface Fields {
  acl: string;
  Content-Type: string;
  Content-Disposition: string;
  bucket: string;
  X-Amz-Algorithm: string;
  X-Amz-Credential: string;
  X-Amz-Date: string;
  key: string;
  Policy: string;
  X-Amz-Signature: string;
}

I am using expo in the FE, here is the code that calls my /api/uploadthing api:

const rnHelper = generateReactNativeHelpers<{
  direct_upload: Uploader<
    Omit<AnyParams, "_input"> & {
      _input: { checksums: string[] };
    }
  >;
}>({
  url: apiClient.baseUrl + "/api/uploadthing",
});

const resp = await rnHelper.createUpload("direct_upload", {
      files,
      input: {
        checksums: await Promise.all(
          expoFiles.map(async (f) => computeMD5Checksum(await readFileData(f))),
        ),
      },
      headers: {
        Authorization: `Bearer ${await getToken()}`,
      },
    });

const rnHelper = generateReactNativeHelpers<{
  direct_upload: Uploader<
    Omit<AnyParams, "_input"> & {
      _input: { checksums: string[] };
    }
  >;
}>({
  url: apiClient.baseUrl + "/api/uploadthing",
});

const resp = await rnHelper.createUpload("direct_upload", {
      files,
      input: {
        checksums: await Promise.all(
          expoFiles.map(async (f) => computeMD5Checksum(await readFileData(f))),
        ),
      },
      headers: {
        Authorization: `Bearer ${await getToken()}`,
      },
    });

My understanding is that the response of prepareUpload should be the result of my uploadthing controller and the FE library will read it and take care of the direct upload. Please advise what can be done here.

132 replies

Gaming

Programming