Previewing Image Before File Upload On Websites - HTML, CSS & JavaScript Tutorial

In this video I'll be demonstrating how it's possible to use some simple JavaScript in order to display a preview of an image before uploading it to the web server.

Learn more about Data URLs here:

Support me on Patreon:

Follow me on Twitter @dcodeyt!

If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!

#dcode #javascript #css

[dcode-software]

If you want to learn more about how Data URLs work, see my quick overview video below 👇

[ashraftaha]

Great! This is simply the best tutorial regarding file uploading with preview using pure JavaScript. Good job.

[Daniel-xtlm]

8:14 - Don't use arrow functions, they inherit their "this" from the parent scope

[withinbracket]

Trust me this is the best tutorial channel I ever seen

[browntable]

how do i solve the error it shows in the log "previewContainer is undefined"

[TulioSandoval]

Bro, this helped me a lot, but a friend came with the following solution: img.src = URL.createObjectURL(file). Works like a charm!

[SkyVergil]

Just a question, why reader.readAsDataURL(file) needs to be after reader.eventlistener( ) function ???

[de-kexz]

you know i was struggiling to find to preview image when i found you it became
easy

[rickyu]

Why not use createObjectURL(file) which will create a blob reference to the file in memory vs creating a base64 string ? which one is more performance. createobjecturl is easier one line no callback needed.

[teerapongruplek]

It's great tutorial! I would like you make tutorial about showing preview image with remove button and upload multiple files.


thank you for all tutorial from you. It's very nice.

[nestorhenriquez]

i don't understand, where the javascript is in the same file but i see that there are .js files that contain only javascript.
what's the difference between those two?

[fabsse-bxon]

what about previewing multiple images? what changes should i do while implementing ur code?

[AngelixGamer]

Very good video, you earned one more subscriber!

[pawpaaj]

Nice trick with these null values, didn't know about that. Thanks a lot!

[peshotod]

Unfortunately for some reason keep giving me error.excel.js:38 Uncaught TypeError: Cannot read properties of null (reading 'style')
at HTMLInputElement.<anonymous> (excel.js:38:24)
= "none";
<input type="file" name="inpFile" id="inpFile">
I am doing something wrong but don't know what.Source code would be helpful.

[dheerajn]

Why its not working while I have written same code as video in html fiile... Where is missing...
And tell me about links before head tag... Should I link any other js, css... Files to this file... Help..

[skyrider]

Just 1 question though. The css link with href /assets/docde.css where is the actual css? Like is it a code I have to code myself or that is on the internet, what?

[edgartoon]

Very good tutorial, I just have a question, do you know how to do that but having 2 input files in the same form without repeating the function 2 times?

[jck]

Uncaught TypeError: Cannot read property 'style' of null
the "image preview" text goes away but no image is loading

[bartoszoch]

I have error Cannot read property 'style' of null in your file it is line 51-52 and 61-62. Can you help me?