JavaScript FileReader

  Рет қаралды 137,504

Kyle Robinson Young

Kyle Robinson Young

6 жыл бұрын

Read files in the browser with JavaScript using the FileReader API. From input file types or dragging and dropping files. Parse CSV and grayscale an image in the browser.
MDN FileReader: developer.mozilla.org/en-US/d...
Code examples from this video: github.com/shama/letswritecod...

Пікірлер: 121
@vitaliyd23
@vitaliyd23 5 жыл бұрын
Dude I was looking for a FileReader tutorial. This is above and beyond. Such useful information!!
@ankushjain358
@ankushjain358 3 жыл бұрын
An extremely helpful tutorial. You explained much more than what was needed. Thank you.
@tempestseven6552
@tempestseven6552 4 жыл бұрын
Love how this guy is this understandable on any youtube playspeed. Was very useful when i couldnt keep up or wanted to speed familiar parts along.
@danivalldosera2523
@danivalldosera2523 6 жыл бұрын
Thanks a lot for creating such great tutorials dude!
@abdulazizalghafli5240
@abdulazizalghafli5240 6 жыл бұрын
Great, thank you. You always choose clever topics that increase our knowledge.
@Barnardrab
@Barnardrab 4 жыл бұрын
Thank you! 3 minutes in and I found what I was looking for. I appreciate it.
@mrchedda
@mrchedda 3 жыл бұрын
Really good content. You are a super advanced javascript dev. And thank you for not keeping your face on the screen the entire time! It's so annoying when other folks do that. Such a waste of screen real estate and a huge distraction! Wish you made more content!
@applesthepi718
@applesthepi718 6 жыл бұрын
thank you so much! I was trying to figure it out for so long!
@Eckowz
@Eckowz 2 жыл бұрын
you have no idea how it helped me... in resume I was able to run a script without the NODE.JS THANK YOU!
@shivamsagar6228
@shivamsagar6228 4 жыл бұрын
Awesome Man I was stuck in drag and drop part but you give me that solution!!!!!!!!!!!! Great going... Keep It up
@feldeagle2085
@feldeagle2085 4 жыл бұрын
This was amazing thank you. Worked great for what i needed. People keep saying it wasnt possible because javascipt cant read local files.
@MrKonovalets
@MrKonovalets 6 жыл бұрын
I thought I'm not gonna like this video, but after I watched I love it!!!
@ritik84629
@ritik84629 5 жыл бұрын
Very nice to see that you used latest techniques.
@vjzb3
@vjzb3 3 жыл бұрын
That was awesome. It just kept getting better and better lol. You’re the man
@thurcandelaria
@thurcandelaria 4 жыл бұрын
O melhor conteúdo sobre este assunto na internet. Parabéns!
@proXystuS
@proXystuS 5 жыл бұрын
thank you so much for this. I can finally upload csv files to my upload router on my server WITHOUT a page refresh!
@haizzengunn9350
@haizzengunn9350 5 жыл бұрын
Thank you Sir! for making this video, it helped me alot for my project work:)
@down__lo7359
@down__lo7359 2 жыл бұрын
2022 and it's still good! Thanks Kyle
@fuu812
@fuu812 6 жыл бұрын
What an amazing video! Thank you buddy
@NicoHeinrich
@NicoHeinrich 2 жыл бұрын
I watched this a year ago and understood almost nothing. Now it feels like second nature. Thanks for sharing!
@RobertWildling
@RobertWildling 4 жыл бұрын
Wow! That was an awesome trip! And finally I know the difference between a brown bear and a grey bear! ;-)
@sachinprabhuk6241
@sachinprabhuk6241 5 жыл бұрын
Fantastic tutorial!!..just loved it.
@alvinlloydcrosse2333
@alvinlloydcrosse2333 3 жыл бұрын
Good stuff. Thank you, Kyle!
@jojojawjaw
@jojojawjaw 6 жыл бұрын
Amazing tutorial, thank you so much. Subscribed!
@kylerobinsonyoung
@kylerobinsonyoung 6 жыл бұрын
Thank you!
@prinautospares
@prinautospares 3 жыл бұрын
Great content. I've been looking for this. Subscribed!
@megaxenu753
@megaxenu753 5 жыл бұрын
brilliant, really helpful. CORS errors been doing my head in.
@maxk.2076
@maxk.2076 5 жыл бұрын
Great, you have talent to make things clear! Liked + subcribed.
@damirmustafin5024
@damirmustafin5024 6 жыл бұрын
Sweet! I did not know that you can do such things using pure JS (without use of external libs), especially the drag & drop part.
@thefreeze6023
@thefreeze6023 4 жыл бұрын
Well anything you can do with libs qre possible with pure js because libs are made from pure js.
@calebcadainoo
@calebcadainoo 4 жыл бұрын
How do I submit image and text together in one submission/submit as a stream to an API without getting CORS error
@itzvoko1
@itzvoko1 2 жыл бұрын
@@calebcadainoo do you know this now? or I say how
@karenhuang2281
@karenhuang2281 2 жыл бұрын
SUPER USEFUL TUTORIAL!!!! THANKS A LOT!!!!!
@luissalvador1348
@luissalvador1348 4 жыл бұрын
Wow, this solved a problem I had when uploading files to my app. You saved my ass, Thanks!!
@makalato994
@makalato994 6 жыл бұрын
Great video Thanks men do not stop teaching Blessings
@trigger60
@trigger60 3 жыл бұрын
Your still the man, thanks
@karpediemxx
@karpediemxx 4 жыл бұрын
Awesome video, thanks!
@techfriendly4139
@techfriendly4139 3 жыл бұрын
Amazing ! mann thankyou you saved me ! keep doing the great stuff
@moshoodadedolapoadegbolu611
@moshoodadedolapoadegbolu611 5 жыл бұрын
You are a JS geek indeed...........A new fan of yours from Nigeria comments
@mavericksoul9739
@mavericksoul9739 6 жыл бұрын
great tut dude. 👍🏽
@jonaw.170
@jonaw.170 5 жыл бұрын
Thanks, helped a lot!
@Momazharansari
@Momazharansari 4 жыл бұрын
Finally I get it....Thank you so much brother 😊😊🥰🥰
@yogibobo1
@yogibobo1 3 жыл бұрын
great video mate !
@stevegreig8324
@stevegreig8324 3 жыл бұрын
Very very useful!
@angelorigo
@angelorigo 3 жыл бұрын
great tutorial!
@PabloGaraguso
@PabloGaraguso 6 жыл бұрын
Excellent!
@germanduterte7110
@germanduterte7110 4 жыл бұрын
Good tutorial first time to know about this.
@martin-xq7te
@martin-xq7te 2 жыл бұрын
Great video. Very well explained. Maybe show how the add the csv data to P tags
@diego_elohim
@diego_elohim Жыл бұрын
You earned completely my like and subcribe
@veli8518
@veli8518 5 жыл бұрын
great video, thank you
@boris_js
@boris_js 3 жыл бұрын
This is so awesome
@zakchips
@zakchips 3 жыл бұрын
Awesome! Thanks.
@kemal_ozturk
@kemal_ozturk 4 жыл бұрын
Everyone here saying how helpful the video was. I am astonished by the sick bicycle moves in the end...
@iluvsyphonfilter
@iluvsyphonfilter 2 жыл бұрын
Very good!
@lawrencelo2429
@lawrencelo2429 4 жыл бұрын
This is amazing. I learn what I have to learn!!
@vance7557
@vance7557 6 жыл бұрын
great video
@flammea_
@flammea_ 6 жыл бұрын
thanks for an amazing tutorial. you should also put links inside descriptions for further reading though
@kylerobinsonyoung
@kylerobinsonyoung 6 жыл бұрын
Good idea! I added a link to a good MDN article.
@flammea_
@flammea_ 6 жыл бұрын
thank you!
@user-os2sg1nn6e
@user-os2sg1nn6e 2 жыл бұрын
Awesome!!
@amitgujar6231
@amitgujar6231 2 жыл бұрын
great work
@sicko_drops
@sicko_drops 6 жыл бұрын
Great lesson like gomorrah
@codex8332
@codex8332 3 жыл бұрын
You are definitely a "Pro".
@higormuros
@higormuros 4 жыл бұрын
Thank you!
@DivjotSingh
@DivjotSingh 6 жыл бұрын
Love your videos and your bear experiments. I wonder what keeps you from using arrow functions?
@kylerobinsonyoung
@kylerobinsonyoung 6 жыл бұрын
I write a lot of code without using ES next compilers and still target IE >= 11. So my coding habits are currently rooted there until IE usage drops low enough.
@bigjimtrucker6042
@bigjimtrucker6042 2 жыл бұрын
very awesome
@quicksketch1617
@quicksketch1617 4 жыл бұрын
Great tutorial. I have a question how can I use Fetch API in the image example instead XMLHttpRequest?
@qlf3896
@qlf3896 4 жыл бұрын
So when you upload an image , it is basically stored in the browser memory? But how does the browser acces those local files without being sent to the server first?
6 жыл бұрын
Amazing, as usual.
@kylerobinsonyoung
@kylerobinsonyoung 6 жыл бұрын
Thanks!
@KenzoArts
@KenzoArts 5 жыл бұрын
Hi Kyle, is there a way of restricting the user to choose files from only a dirctory on the server ?
@ManontheBroadcast
@ManontheBroadcast 6 жыл бұрын
Great !!! ..
@francodinapoli6653
@francodinapoli6653 4 жыл бұрын
YOU ARE A GOD !!!!!!!!!
@novelstudio1651
@novelstudio1651 3 жыл бұрын
good job
@webdev4786
@webdev4786 3 жыл бұрын
wow, i need a teacher like you. youtube should suggest me people like you man. big up! and SUBSCRIBE.
@JavaScriptcher
@JavaScriptcher 3 жыл бұрын
Super!!!This is the best video, and I understand how it works!!!✊🇷🇺
@siddharth8387
@siddharth8387 5 жыл бұрын
Thanks for solving my problem. #siddharthmaurya
@varshinireddy9665
@varshinireddy9665 5 жыл бұрын
This is an amazing video. Please, can you put up a link or another video that specifies how to handle the file to store to the server once it has been sent to another javascript i.e. the server side code?
@sdmunoz
@sdmunoz 6 жыл бұрын
Instead of using XHR, you could use the Fetch API, it's a lot easier.
@kylerobinsonyoung
@kylerobinsonyoung 6 жыл бұрын
Thanks for the tip!
@RK-gm4pd
@RK-gm4pd 5 жыл бұрын
Samuel Munoz it's outdated tip )) check Kyle's channel
@osta6212
@osta6212 3 жыл бұрын
@@RK-gm4pd any video ?
@FaridAbbasbayli
@FaridAbbasbayli 6 жыл бұрын
Very comprehensive, gray-scaling using the RGB values blew my mind a bit. P.S. Editor and theme name, please?
@kylerobinsonyoung
@kylerobinsonyoung 6 жыл бұрын
Thanks! I'm using Atom with the Monokai syntax and Seti UI.
@michaelronald5728
@michaelronald5728 3 жыл бұрын
Consegui resolver meu problema só com a dica do console.log... Muito obrigado!
@Henry_Nunez
@Henry_Nunez 2 жыл бұрын
😊👍🔔
@kwilderful
@kwilderful 3 жыл бұрын
Er... that does not look that a trial bike. :D Nice tutorial. Can you do one with embedding videos? I can't quite get that to work.
@sonoftroy8572
@sonoftroy8572 5 жыл бұрын
Kyle Young! i'm learning how to code and I was wondering if you or someone in the comments section can help me work something out... if I create a html form for a user, how does the users data create a new instance of a JavaScript object using Object Oriented Programming... using console.log() will allow you to test sample data on the console, but if a user inputs information into a form... does that data create a new object then send that data to the constructor???? i'm not really sure how that works and i'd like to know what your thoughts are on that thanks
@reejayanigan534
@reejayanigan534 4 жыл бұрын
is there a way I can preview a large video file without crashing the page?
@pwnweb5734
@pwnweb5734 6 жыл бұрын
Superb !!! where's the sponsor button ?
@kylerobinsonyoung
@kylerobinsonyoung 6 жыл бұрын
I have a patreon if you would like to support the channel: www.patreon.com/shama Very much appreciated!
@moseleenone7252
@moseleenone7252 3 жыл бұрын
hi can i ask why did you add 'reader.onload....' line in the middle, and not after 'reader.readAsText...' ?
@mmurty2828
@mmurty2828 6 жыл бұрын
sir i need create table while giving rows and column values by using java script. can you help me plz.
@ukaszj2906
@ukaszj2906 3 жыл бұрын
Ok, so if i have reader.result from readAsArrayBuffer how to change it into Int8Array, or if choose readAsDataUrl, how to decode it and put into Int8Array?
@adriannlara
@adriannlara 5 жыл бұрын
i love you
@tgt106
@tgt106 3 жыл бұрын
How can I preview a selected file (pdf, excel etc..) in a different browser tab?
@anapaulalopes12
@anapaulalopes12 4 жыл бұрын
How do I convert this file to byte[] ??? using FileReader....
@boyapatiramakrishna2068
@boyapatiramakrishna2068 3 жыл бұрын
I can also do this, can you read the file without 'choose file' option with javascript code provided by full path of that excel file. I am looking for it in the whole world. do you have the solution?
@simon_s
@simon_s 6 жыл бұрын
what if we want to read a file without waiting for the user to select one. For exemple, i have a text file with names and i wanna select one of the name inside on loading htm page with google chrome... How do I do ?
@kylerobinsonyoung
@kylerobinsonyoung 6 жыл бұрын
The short answer is you can't for security reasons. The files the browser can read from a user's machine must be initiated by the user. There are ways if you're building an Electron desktop with Chrome or building a Chrome extension and the user has given it permission to access the filesystem though.
@birukephrem4605
@birukephrem4605 3 жыл бұрын
I hope you are a great tutor, but you could have covered more about fileReader and less about other non related stuffs. Thumbs up on the drag n drop
@wrushu
@wrushu 5 жыл бұрын
Is there any way to open the file uploaded using in browser
@chetanajadhav7478
@chetanajadhav7478 4 жыл бұрын
have u got any solution ?if yes ,plz tell me
@shubhampandey1073
@shubhampandey1073 3 жыл бұрын
sir when i write reader.readAsDataURL(a.files[0]); it shows me base64 address now how to trace image src from there
@balajisharathkumar9753
@balajisharathkumar9753 5 жыл бұрын
hello kayle please make a video on uploading video file to server as a chunk by chunk and receiving response as a hole at client side using jax-rs,js,jquery receiving json response update front end percentage of sent data using progressbar
@ellanut4588
@ellanut4588 5 жыл бұрын
How can i write files? Help me pls.
@BretComnes
@BretComnes 6 жыл бұрын
Is it possible to implement custom Blobs?
@kylerobinsonyoung
@kylerobinsonyoung 6 жыл бұрын
How do you mean? You can put whatever data you want into a Blob with the advantage is many other APIs can handle it and treat it like a file. Or are you asking can you extend a Blob (like File does)?
@novelstudio1651
@novelstudio1651 3 жыл бұрын
const foto_a = document.getElementById("foto_a"); foto_a.addEventListener('change',function(e){ console.log('foto a = '+foto_a.files) alert(foto_a.files) },false); this my code, but result foto a = [object FileList], please help me mr?
@riteshelango6573
@riteshelango6573 3 жыл бұрын
how to I make it read an CSS file
@kmuralikrishna1582
@kmuralikrishna1582 5 жыл бұрын
Hi nice vedio, but please understand here therr are really many vedios for read .txt files and images, but there is no any vedio for read MS word content. I wud like to requesting you kindly do a vedio for read MS word content.
@geveral348
@geveral348 2 жыл бұрын
Is that vs code?
@Yudibilly
@Yudibilly 3 жыл бұрын
sir, I want to download videos from KZfaq using javascript... can you give a trick...(thank you)
@davidfont2596
@davidfont2596 3 жыл бұрын
That would violate the KZfaq terms of service and his channel would be demonetized.
@erfanwinarno434
@erfanwinarno434 3 жыл бұрын
How about open pdf file sir?
@antonaparin
@antonaparin 2 жыл бұрын
Can you please use colons in your videos? It's hurting my eyes --> ;
JavaScript Mutation Observer
9:30
Kyle Robinson Young
Рет қаралды 23 М.
Загрузка файлов с фронтенда
18:49
Михаил Непомнящий
Рет қаралды 49 М.
World’s Deadliest Obstacle Course!
28:25
MrBeast
Рет қаралды 144 МЛН
3 wheeler new bike fitting
00:19
Ruhul Shorts
Рет қаралды 52 МЛН
Node.js is a serious thing now… (2023)
8:18
Code With Ryan
Рет қаралды 630 М.
Read a file using the FileReader API - JavaScript Tutorial
25:48
OpenJavaScript
Рет қаралды 19 М.
JavaScript Pro Tips - Code This, NOT That
12:37
Fireship
Рет қаралды 2,5 МЛН
HTML File Uploads in 5 Minutes (Plus Some JavaScript Features)
12:44
JavaScript: FileReader
20:57
Sathyaish Chakravarthy
Рет қаралды 24 М.
1.2 Tabular Data - Working With Data & APIs in JavaScript
17:15
The Coding Train
Рет қаралды 210 М.
Blobs and Blob URLs | JavaScript Tutorial
15:32
OpenJavaScript
Рет қаралды 23 М.
JavaScript Generators
8:56
Kyle Robinson Young
Рет қаралды 25 М.
How To Load Images Like A Pro
15:48
Web Dev Simplified
Рет қаралды 359 М.
YOTAPHONE 2 - СПУСТЯ 10 ЛЕТ
15:13
ЗЕ МАККЕРС
Рет қаралды 123 М.
Hisense Official Flagship Store Hisense is the champion What is going on?
0:11
Special Effects Funny 44
Рет қаралды 2,4 МЛН