How to use an image JavaScript File Object as an image src (<img />)

Question

I have an image file in the form of a JavaScript File object. I was to add it to an <img> tag so I can render it in my React project. This is going to be used in my Client side code so I do not want it to be downloaded. I was looking at a few similar (but not exact) questions and they all use a FileReader but I cannot seem to get it to work. I keep getting an ImagePreview.js:25 Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.. My object is a File object which is a type of Blob according to the Mozilla document. Maybe I am confused? Could someone point me in the right direction? This is what the object looks like when I print it to the console:

File {name: 'gopher1.png', lastModified: 1633647754682, lastModifiedDate: Thu Oct 07 2021 18:02:34 GMT-0500 (Central Daylight Time), webkitRelativePath: '', size: 34156, …}
lastModified: 1633647754682
lastModifiedDate: Thu Oct 07 2021 18:02:34 GMT-0500 (Central Daylight Time) {}
name: "gopher1.png"
size: 34156
type: ""
webkitRelativePath: ""
[[Prototype]]: File

Can you share a code sandbox with a demo of what you have so far in terms of code? — gacanepa
– gacanepa, Commented Oct 8, 2021 at 0:34
You are certainly not passing what you think to this method, but note that you should not use a FileReader here anyway. To render the image from the Blob, create a blob URL. — Kaiido
– Kaiido, Commented Oct 8, 2021 at 2:10
@Kaiido this is exactly what I am looking for! Had to do a few tweaks but it works, thank you! — Notorious776
– Notorious776, Commented Oct 8, 2021 at 5:42

Titef · Accepted Answer · 2022-04-04 23:38:35Z

6

I believe you do

const url = URL.createObjectURL(file)

then use url as a src

answered Apr 4, 2022 at 23:38

Titef

861 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use an image JavaScript File Object as an image src (<img />)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related