131 replies

[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

/v6/prepareUpload

endpoint in my

/api/uploadthing

/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/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.

TTC

Theo's Typesafe Cult•16mo ago•

131 replies

sudhanshug

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

/v6/prepareUpload

/v6/prepareUpload

endpoint in my

/api/uploadthing

/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/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()}`,
      },
    });

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

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

Similar Threads

Similar Threads

Similar Threads