0

I am 99% sure there's an obvious answer to this, so I apologise straight up if this is a really stupid question.

I am calling the stable diffusion api (using this stability-client package).

I receive a response containing a path (as a string) to the image, it looks like this: Users/johnsmith/Documents/projects/testProject/.out/fileName.png

Now I would like to upload that image to my supabase database.

Usually when I upload a file it is via a user adding to an input type='file' field, and it's no problem, but it seems very difficult when you only have the file path as a string.

I have tried converting the path to a blob, doing something like this:

const file = 'Users/johnsmith/Documents/projects/testProject/.out/fileName.png'
const response = await fetch(file)
const blob = await fetchFile.blob()

but this results in error TypeError: Only absolute URLs are supported

I've also tried converting the path to a file object etc. but still can't win.

Maybe one of the above methods is correct, and I'm simply doing it wrong? Or maybe an entirely different approach is required?

Would love to know if anyone has any experience uploading a file to somewhere with only the file path.

ronnie burns
  • 230
  • 2
  • 4
  • 17
  • 2
    in general, a webpage in a browser can't access the filesystem – Jaromanda X May 26 '23 at 09:08
  • I think you can convert the file path to an absolute URL, & convert into blob like you already attempted & upload it. Edit: I'm assuming the file is on the server, and you're using Node.js/nextjs server render approach to upload the file. – Abdulrahman Ali May 26 '23 at 09:09
  • 1
    @AbdulrahmanAli - No, you can't. It would be a massive security hole if JavaScript code in your browser could read local files from arbitrary paths and send their data to the server without user interaction. – T.J. Crowder May 26 '23 at 09:10
  • 1
    @AbdulrahmanAli - Re your edit, the question says it's a path *"...to a locally saved image..."* but yeah, we should ask explicitly. :-) – T.J. Crowder May 26 '23 at 09:11
  • When you say the string is a path to *"...a locally saved image..."*, do you mean an image on the end-users computer? – T.J. Crowder May 26 '23 at 09:12
  • @T.J.Crowder I should have been more specific there. the image is stored within the project, in this instance it happens to be running locally... the file is stored in an '.out' directory inside my next.js project... – ronnie burns May 26 '23 at 09:17
  • @T.J.Crowder - Yep, I didn't quite get that, but I agree with you. Although I think if he's generating the resulting file on the server, then it's fine uploading it. – Abdulrahman Ali May 26 '23 at 09:36
  • 1
    @AbdulrahmanAli that's correct - it's all being generated on the server, however, I can't do anything about the path it returns (which routes all the way back to my user folder). I'll try your suggestion of converting to an absolute URL, thank you. – ronnie burns May 26 '23 at 09:48
  • 1
    @ronnieburns - If the file is being generated on the server & is saved locally(on the server as well), you can use something like the `resolve` method or the `path` module from Node modules & convert that local relative file into an absolute URL. Otherwise, if it's saved on the users' machines, I'm afraid there is no way JS can access the file system over there. – Abdulrahman Ali May 26 '23 at 09:55
  • 1
    @AbdulrahmanAli thanks again! I've been playing around and decided to use the stability ai api directly (without the above-mentioned package) which returns a base64, making life much easier! – ronnie burns May 26 '23 at 10:14

0 Answers0