JavaScript FileReader
Вставка
- Опубліковано 22 тра 2018
- 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... - Наука та технологія
Dude I was looking for a FileReader tutorial. This is above and beyond. Such useful information!!
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.
An extremely helpful tutorial. You explained much more than what was needed. Thank you.
Great, thank you. You always choose clever topics that increase our knowledge.
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!
Thanks a lot for creating such great tutorials dude!
Thank you! 3 minutes in and I found what I was looking for. I appreciate it.
Very nice to see that you used latest techniques.
This was amazing thank you. Worked great for what i needed. People keep saying it wasnt possible because javascipt cant read local files.
thank you so much! I was trying to figure it out for so long!
thank you so much for this. I can finally upload csv files to my upload router on my server WITHOUT a page refresh!
you have no idea how it helped me...
in resume I was able to run a script without the NODE.JS
THANK YOU!
I watched this a year ago and understood almost nothing. Now it feels like second nature. Thanks for sharing!
Awesome Man I was stuck in drag and drop part but you give me that solution!!!!!!!!!!!! Great going... Keep It up
I thought I'm not gonna like this video, but after I watched I love it!!!
2022 and it's still good! Thanks Kyle
O melhor conteúdo sobre este assunto na internet. Parabéns!
That was awesome. It just kept getting better and better lol. You’re the man
Wow! That was an awesome trip!
And finally I know the difference between a brown bear and a grey bear! ;-)
Thank you Sir! for making this video, it helped me alot for my project work:)
What an amazing video! Thank you buddy
Fantastic tutorial!!..just loved it.
brilliant, really helpful. CORS errors been doing my head in.
Good stuff. Thank you, Kyle!
Sweet! I did not know that you can do such things using pure JS (without use of external libs), especially the drag & drop part.
Well anything you can do with libs qre possible with pure js because libs are made from pure js.
How do I submit image and text together in one submission/submit as a stream to an API without getting CORS error
@@calebcadainoo do you know this now? or I say how
SUPER USEFUL TUTORIAL!!!! THANKS A LOT!!!!!
You are a JS geek indeed...........A new fan of yours from Nigeria comments
Amazing tutorial, thank you so much. Subscribed!
Thank you!
Great content. I've been looking for this. Subscribed!
Great, you have talent to make things clear! Liked + subcribed.
Wow, this solved a problem I had when uploading files to my app. You saved my ass, Thanks!!
Great video Thanks men do not stop teaching Blessings
Your still the man, thanks
Awesome video, thanks!
Everyone here saying how helpful the video was. I am astonished by the sick bicycle moves in the end...
great tut dude. 👍🏽
Finally I get it....Thank you so much brother 😊😊🥰🥰
Amazing ! mann thankyou you saved me ! keep doing the great stuff
Thanks, helped a lot!
Great video. Very well explained. Maybe show how the add the csv data to P tags
Good tutorial first time to know about this.
Very very useful!
great video mate !
great tutorial!
Excellent!
You earned completely my like and subcribe
great video, thank you
Awesome! Thanks.
thanks for an amazing tutorial. you should also put links inside descriptions for further reading though
Good idea! I added a link to a good MDN article.
thank you!
This is so awesome
You are definitely a "Pro".
Very good!
great video
Great lesson like gomorrah
great work
Awesome!!
This is amazing. I learn what I have to learn!!
very awesome
Great tutorial. I have a question how can I use Fetch API in the image example instead XMLHttpRequest?
Thank you!
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?
Hi Kyle, is there a way of restricting the user to choose files from only a dirctory on the server ?
Love your videos and your bear experiments.
I wonder what keeps you from using arrow functions?
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.
Great !!! ..
Thanks for solving my problem.
#siddharthmaurya
good job
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?
Amazing, as usual.
Thanks!
wow, i need a teacher like you. youtube should suggest me people like you man. big up! and SUBSCRIBE.
sir i need create table while giving rows and column values by using java script. can you help me plz.
is there a way I can preview a large video file without crashing the page?
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
YOU ARE A GOD !!!!!!!!!
How do I convert this file to byte[] ??? using FileReader....
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?
How can I preview a selected file (pdf, excel etc..) in a different browser tab?
Super!!!This is the best video, and I understand how it works!!!✊🇷🇺
Instead of using XHR, you could use the Fetch API, it's a lot easier.
Thanks for the tip!
Samuel Munoz
it's outdated tip )) check Kyle's channel
@@RK-gm4pd any video ?
Consegui resolver meu problema só com a dica do console.log... Muito obrigado!
Is there any way to open the file uploaded using in browser
have u got any solution ?if yes ,plz tell me
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 ?
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.
sir when i write
reader.readAsDataURL(a.files[0]);
it shows me base64 address now how to trace image src from there
😊👍🔔
hi can i ask why did you add 'reader.onload....' line in the middle, and not after 'reader.readAsText...' ?
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?
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
Very comprehensive, gray-scaling using the RGB values blew my mind a bit.
P.S. Editor and theme name, please?
Thanks! I'm using Atom with the Monokai syntax and Seti UI.
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
how to I make it read an CSS file
How can i write files? Help me pls.
Is it possible to implement custom Blobs?
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)?
Superb !!! where's the sponsor button
?
I have a patreon if you would like to support the channel: www.patreon.com/shama Very much appreciated!
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.
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?
i love you
How about open pdf file sir?
Is that vs code?
sir, I want to download videos from UA-cam using javascript... can you give a trick...(thank you)
That would violate the UA-cam terms of service and his channel would be demonetized.
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.
Can you please use colons in your videos? It's hurting my eyes --> ;