Theo's Typesafe Cult•8mo ago

Converting String Encoded Images to Files to upload with UploadThing

In my app, I'm using a libary which handles files in a file manager as base 64 strings. Is there a practical way of uploading string encoded images with UT? If not, here's what I've been trying (the rest of the code is basically the docs' default setup):

const url = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQYV2NgYAAAAAMAAWgmWQ0AAAAASUVORK5CYII="
const f = new File(
  [new Blob([url.split(",")[1]!])],
  "a",
  { type: "image/png" },
)
const selectedFiles = Array.from([f])
const result = await startUpload(selectedFiles)

const url = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQYV2NgYAAAAAMAAWgmWQ0AAAAASUVORK5CYII="
const f = new File(
  [new Blob([url.split(",")[1]!])],
  "a",
  { type: "image/png" },
)
const selectedFiles = Array.from([f])
const result = await startUpload(selectedFiles)

When I try this, I get this error:

⨯ UPLOADTHING 12:51:02 PM  Invalid config: UnknownFileType

⨯ UPLOADTHING 12:51:02 PM  Invalid config: UnknownFileType

I've also tried the many other ways of converting image strings to binaries, e.g. these.

Stack Overflow

How to convert Base64 String to javascript file object like as from...

I want to convert Base64String extracted from file(ex: "AAAAA....~") to a javascript file object. The javascript file object what I mean is like this code: HTML: <input type="file" id="selec...

2 Replies

psygoOP•8mo ago

Hmm

psygoOP•8mo ago

This one seems to be working actually:

const url = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQYV2NgYAAAAAMAAWgmWQ0AAAAASUVORK5CYII="
const f = new File(
  [
    Uint8Array.from(
      atob(url.split(",")[1]!),
      (m) => m.codePointAt(0),
    ),
  ],
  "myfilename.png",
  { type: "image/png" },
)

const url = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQYV2NgYAAAAAMAAWgmWQ0AAAAASUVORK5CYII="
const f = new File(
  [
    Uint8Array.from(
      atob(url.split(",")[1]!),
      (m) => m.codePointAt(0),
    ),
  ],
  "myfilename.png",
  { type: "image/png" },
)

Stack Overflow

How to convert Base64 String to javascript file object like as from...

I want to convert Base64String extracted from file(ex: "AAAAA....~") to a javascript file object. The javascript file object what I mean is like this code: HTML: <input type="file" id="selec...

Gaming

Programming

Converting String Encoded Images to Files to upload with UploadThing