JavaScript FileReader

Поділитися
Вставка
  • Опубліковано 16 гру 2024

КОМЕНТАРІ • 121

  • @vitaliyd23
    @vitaliyd23 5 років тому +10

    Dude I was looking for a FileReader tutorial. This is above and beyond. Such useful information!!

  • @NicoHeinrich
    @NicoHeinrich 2 роки тому +1

    I watched this a year ago and understood almost nothing. Now it feels like second nature. Thanks for sharing!

  • @ankushjain358
    @ankushjain358 3 роки тому +8

    An extremely helpful tutorial. You explained much more than what was needed. Thank you.

  • @mrchedda
    @mrchedda 3 роки тому +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!

  • @Eckowz
    @Eckowz 3 роки тому

    you have no idea how it helped me...
    in resume I was able to run a script without the NODE.JS
    THANK YOU!

  • @kemal_ozturk
    @kemal_ozturk 5 років тому

    Everyone here saying how helpful the video was. I am astonished by the sick bicycle moves in the end...

  • @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.

  • @MrKonovalets
    @MrKonovalets 6 років тому +4

    I thought I'm not gonna like this video, but after I watched I love it!!!

  • @danivalldosera2523
    @danivalldosera2523 6 років тому +7

    Thanks a lot for creating such great tutorials dude!

  • @ritik84629
    @ritik84629 5 років тому

    Very nice to see that you used latest techniques.

  • @damirmustafin5024
    @damirmustafin5024 6 років тому +17

    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 5 років тому +9

      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 3 роки тому

      @@calebcadainoo do you know this now? or I say how

  • @Barnardrab
    @Barnardrab 4 роки тому +1

    Thank you! 3 minutes in and I found what I was looking for. I appreciate it.

  • @RobertWildling
    @RobertWildling 5 років тому +6

    Wow! That was an awesome trip!
    And finally I know the difference between a brown bear and a grey bear! ;-)

  • @abdulazizalghafli5240
    @abdulazizalghafli5240 6 років тому +3

    Great, thank you. You always choose clever topics that increase our knowledge.

  • @shivamsagar6228
    @shivamsagar6228 5 років тому +1

    Awesome Man I was stuck in drag and drop part but you give me that solution!!!!!!!!!!!! Great going... Keep It up

  • @down__lo7359
    @down__lo7359 2 роки тому

    2022 and it's still good! Thanks Kyle

  • @feldeagle2085
    @feldeagle2085 5 років тому

    This was amazing thank you. Worked great for what i needed. People keep saying it wasnt possible because javascipt cant read local files.

  • @applesthepi718
    @applesthepi718 6 років тому +6

    thank you so much! I was trying to figure it out for so long!

  • @vjzb3
    @vjzb3 3 роки тому

    That was awesome. It just kept getting better and better lol. You’re the man

  • @moshoodadedolapoadegbolu611
    @moshoodadedolapoadegbolu611 5 років тому

    You are a JS geek indeed...........A new fan of yours from Nigeria comments

  • @thurcandelaria
    @thurcandelaria 4 роки тому +1

    O melhor conteúdo sobre este assunto na internet. Parabéns!

  • @proXystuS
    @proXystuS 6 років тому

    thank you so much for this. I can finally upload csv files to my upload router on my server WITHOUT a page refresh!

  • @tgt106
    @tgt106 4 роки тому

    How can I preview a selected file (pdf, excel etc..) in a different browser tab?

  • @ukaszj2906
    @ukaszj2906 4 роки тому

    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?

  • @moseleenone7252
    @moseleenone7252 3 роки тому

    hi can i ask why did you add 'reader.onload....' line in the middle, and not after 'reader.readAsText...' ?

  • @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

  • @deceps
    @deceps 5 років тому

    Thanks for the videos man. You’ve taught me a lot. Hope everything is well.

  • @flammea_
    @flammea_ 6 років тому +2

    thanks for an amazing tutorial. you should also put links inside descriptions for further reading though

  • @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?

  • @sdmunoz
    @sdmunoz 6 років тому +4

    Instead of using XHR, you could use the Fetch API, it's a lot easier.

    • @kylerobinsonyoung
      @kylerobinsonyoung  6 років тому +1

      Thanks for the tip!

    • @RK-gm4pd
      @RK-gm4pd 5 років тому

      Samuel Munoz
      it's outdated tip )) check Kyle's channel

    • @osta6212
      @osta6212 4 роки тому

      @@RK-gm4pd any video ?

  • @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?

  • @techfriendly4139
    @techfriendly4139 3 роки тому

    Amazing ! mann thankyou you saved me ! keep doing the great stuff

  • @fuu812
    @fuu812 6 років тому +1

    What an amazing video! Thank you buddy

  • @megaxenu753
    @megaxenu753 5 років тому

    brilliant, really helpful. CORS errors been doing my head in.

  • @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?

  • @haizzengunn9350
    @haizzengunn9350 5 років тому +1

    Thank you Sir! for making this video, it helped me alot for my project work:)

  • @prinautospares
    @prinautospares 4 роки тому

    Great content. I've been looking for this. Subscribed!

  • @riteshelango6573
    @riteshelango6573 3 роки тому

    how to I make it read an CSS file

  • @real.anigan
    @real.anigan 5 років тому

    is there a way I can preview a large video file without crashing the page?

  • @jojojawjaw
    @jojojawjaw 6 років тому +3

    Amazing tutorial, thank you so much. Subscribed!

  • @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

  • @alvinlloydcrosse2333
    @alvinlloydcrosse2333 4 роки тому

    Good stuff. Thank you, Kyle!

  • @martin-xq7te
    @martin-xq7te 3 роки тому

    Great video. Very well explained. Maybe show how the add the csv data to P tags

  • @mmurty2828
    @mmurty2828 6 років тому

    sir i need create table while giving rows and column values by using java script. can you help me plz.

  • @anapaulalopes12
    @anapaulalopes12 5 років тому

    How do I convert this file to byte[] ??? using FileReader....

  • @KenzoArts
    @KenzoArts 5 років тому

    Hi Kyle, is there a way of restricting the user to choose files from only a dirctory on the server ?

  • @quicksketch1617
    @quicksketch1617 4 роки тому

    Great tutorial. I have a question how can I use Fetch API in the image example instead XMLHttpRequest?

  • @luissalvador1348
    @luissalvador1348 4 роки тому

    Wow, this solved a problem I had when uploading files to my app. You saved my ass, Thanks!!

  • @codex8332
    @codex8332 3 роки тому

    You are definitely a "Pro".

  • @erfanwinarno434
    @erfanwinarno434 4 роки тому

    How about open pdf file sir?

  • @makalato994
    @makalato994 6 років тому

    Great video Thanks men do not stop teaching Blessings

  • @JavaScriptcher
    @JavaScriptcher 3 роки тому

    Super!!!This is the best video, and I understand how it works!!!✊🇷🇺

  • @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.

  • @Momazharansari
    @Momazharansari 4 роки тому

    Finally I get it....Thank you so much brother 😊😊🥰🥰

  • @trigger60
    @trigger60 3 роки тому

    Your still the man, thanks

  • @balajisharathkumar9753
    @balajisharathkumar9753 6 років тому +1

    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 6 років тому

    How can i write files? Help me pls.

  • @wrushu
    @wrushu 5 років тому

    Is there any way to open the file uploaded using in browser

  • @sachinprabhuk6241
    @sachinprabhuk6241 5 років тому

    Fantastic tutorial!!..just loved it.

  • @karenhuang2281
    @karenhuang2281 2 роки тому

    SUPER USEFUL TUTORIAL!!!! THANKS A LOT!!!!!

  • @Yudibilly
    @Yudibilly 4 роки тому

    sir, I want to download videos from UA-cam using javascript... can you give a trick...(thank you)

    • @davidfont2596
      @davidfont2596 3 роки тому

      That would violate the UA-cam terms of service and his channel would be demonetized.

  • @lawrencelo2429
    @lawrencelo2429 5 років тому +1

    This is amazing. I learn what I have to learn!!

  • @geveral348
    @geveral348 3 роки тому

    Is that vs code?

  • @maxk.2076
    @maxk.2076 5 років тому +1

    Great, you have talent to make things clear! Liked + subcribed.

  • @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)?

  • @DivjotSingh
    @DivjotSingh 6 років тому

    Love your videos and your bear experiments.
    I wonder what keeps you from using arrow functions?

    • @kylerobinsonyoung
      @kylerobinsonyoung  6 років тому +2

      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.

  • @germanduterte7110
    @germanduterte7110 4 роки тому

    Good tutorial first time to know about this.

  • @diego_elohim
    @diego_elohim 2 роки тому

    You earned completely my like and subcribe

  • @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?

  • @pwnweb5734
    @pwnweb5734 6 років тому +1

    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!

  • @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 років тому +2

      Thanks! I'm using Atom with the Monokai syntax and Seti UI.

  • @webdev4786
    @webdev4786 3 роки тому

    wow, i need a teacher like you. youtube should suggest me people like you man. big up! and SUBSCRIBE.

  • @karpediemxx
    @karpediemxx 5 років тому

    Awesome video, thanks!

  • @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.

  • @birukephrem4605
    @birukephrem4605 4 роки тому

    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

  •  6 років тому +4

    Amazing, as usual.

  • @mavericksoulmusic
    @mavericksoulmusic 6 років тому +1

    great tut dude. 👍🏽

  • @augre-app
    @augre-app 6 років тому +1

    Great lesson like gomorrah

  • @antonaparin
    @antonaparin 3 роки тому

    Can you please use colons in your videos? It's hurting my eyes --> ;

  • @PabloGaraguso
    @PabloGaraguso 6 років тому +1

    Excellent!

  • @stevegreig8324
    @stevegreig8324 4 роки тому

    Very very useful!

  • @siddharth8387
    @siddharth8387 6 років тому

    Thanks for solving my problem.
    #siddharthmaurya

  • @jonaw.170
    @jonaw.170 5 років тому

    Thanks, helped a lot!

  • @zakchips
    @zakchips 3 роки тому

    Awesome! Thanks.

  • @veli8518
    @veli8518 5 років тому

    great video, thank you

  • @michaelronald5728
    @michaelronald5728 3 роки тому

    Consegui resolver meu problema só com a dica do console.log... Muito obrigado!

  • @yogibobo1
    @yogibobo1 4 роки тому

    great video mate !

  • @boris_js
    @boris_js 3 роки тому

    This is so awesome

  • @kmuralikrishna1582
    @kmuralikrishna1582 6 років тому

    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.

  • @angelorigo
    @angelorigo 4 роки тому

    great tutorial!

  • @francodinapoli6653
    @francodinapoli6653 5 років тому

    YOU ARE A GOD !!!!!!!!!

  • @vance7557
    @vance7557 6 років тому +1

    great video

  • @iluvsyphonfilter
    @iluvsyphonfilter 3 роки тому

    Very good!

  • @higormuros
    @higormuros 4 роки тому

    Thank you!

  • @amitgujar6231
    @amitgujar6231 2 роки тому

    great work

  • @bigjimtrucker6042
    @bigjimtrucker6042 3 роки тому

    very awesome

  • @이승민-t1o
    @이승민-t1o 3 роки тому

    Awesome!!

  • @ManontheBroadcast
    @ManontheBroadcast 6 років тому +1

    Great !!! ..

  • @Henry_Nunez
    @Henry_Nunez 2 роки тому

    😊👍🔔

  • @novelstudio1651
    @novelstudio1651 3 роки тому

    good job