JavaScript File System Access API Tutorial - Read, Write and Save Files

In this short video we'll take a look at the new File System Access API, which currently has limited browser support.
Documentation: developer.mozilla.org/en-US/d...
Browser support: caniuse.com/native-filesystem...
Thanks to my Patreon supporters who help make these videos possible: / codepulse

[@damienscullytoo]

Okay, that was pretty damn cool when you started coding in browser to get a function you needed for the next step. Really smart demonstration

[@olivyae3057]

I just caught on to that. So cool :)

[@edwardwilson4272]

Fantastic vid. Short and sweet. Have been wondering how to work with files and JS for some time. Thank you!

[@edilsonjunior8161]

Man, this is a dream. A solution for local apps. Thanks dude.

[@Tabbytoffee]

Wow! you just nonchalantly created a turing complete text editor in a 4 minute video.
Thanks so much!

[@CodePulse]

Hahahah

[@akrit.ghimire]

Amazing and so simplified. Thank you!!!!

[@masterfighter8856]

Impressive ..
I hope u continue JavaScript tutorial
and about indexed-database and broadcast- channel .. all about system files and streams
this is basics of advanced JavaScript
thanks for u

[@noahsomeone1938]

My mind has just exploded and you just gained 1 sub.

[@heeju4482]

This video is really helpful! Thank you :)

[@adrishkumarde4155]

Thanks this was Helpful

[@magbenyo]

I will start learning web development next year 😊

[@omkarbhale442]

OK, a video that explains file system API cant be better than this.

[@JeroenLapre]

Very helpful. Thanks

[@tothg77]

Thank you so much!

[@emmanuelakigbogun1970]

Who is this guy .. this is awesome😅🎉 thanks man

[@olzhaskrm2628]

Amazing!!! Thanks , I was wondering if I can upload and read couple of files? Thanks

[@RealmOfCode]

What about the file's path? I tested this API with an image file, but I can't get the reference to the path for the selected image file. I can console.log fileData and I am able to see a "path" property, but it's always blank.

[@slashd]

Great video!

[@CodePulse]

Thanks!

[@RunningtoCatchMyBreath]

I like you your added a gratuitous shit on python at the end. Keep that up

[@AndiAbrudan]

I couldn't help but notice that you inserted a tab in a textbox at 2:58
How did you do that? Usually, tab just cycles to the next element on the page

[@CodePulse]

I copied a tab character from my text editor and used ctrl+v every time I wanted to indent 😁

[@damienscullytoo]

Also compared to your other videos this one is pretty quiet so just a heads up

[@LucasAlfare]

Show some binary manipulation over files as well if possible

[@__hannibaal__]

I left JavaScript 22 years; and i didn’t know will be popular.

[@arifhossain8753]

Is it possible to open file without propting new oprn file window?

[@codewithalade5399]

Plz, try to make this kind of videos for javascript.

[@sealchan1]

Not selecting a directory is a feature rather than a bug of showOpenFilePicker() vs a forthcoming showOpenDirectoryPicker()? The mozilla documentation doesn't seem to address this currently.

[@CodePulse]

Probably, yes

[@adolphineatingchildren2641]

this tutorial is great, but a lot of browsers don't support this API

[@i-ahmed3495]

when I click save it says
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'createWritable')
how to fix it?

[@RanjithKumar-rp7xi]

While downloading files, can we able to save the directory path during first time and for second time can we directly point download to existing directory path without selecting paths for second time

[@CodePulse]

That's a good question. I've tried looking this up and the best solution I could find is to store the fileHandle in localStorage which can then be retrieved after page reload. Note that another permission prompt may appear. stackoverflow.com/questions/64856292/persist-file-descriptor-across-page-reload-in-chrome-with-filesystemfilehandle

[@aniquemaniac]

how to get the file and folder list in sidebar

[@webdev1943]

Q: how to get directory path in javascript? thanks

[@simonfj20]

Can't wait for and IDE i don't have to install

[@kashmirtechtv2948]

UNIQUE

[@rahiljakir]

Does this work in Android chrome?

[@dinakaranb8768]

For save every time prompt was showing how to solve that

[@rauchu5861]

what are the limits to this?

[@milindkolambe7391]

Can I use the api in asp.net? How?

[@damdam4969]

best men

[@athuldas44]

why there is square bracket in file handle please someone can u explain in detail

[@CodePulse]

The function returns an array, and the file handle is the first element of the array. I used special JavaScript syntax called "array destructuring" to get the first element from the array.

[@rdawo6408]

This is awesome for desktop apps but what about mobile ones 😢😢😢😢

[@kamoroso94]

If only this had full cross browser support.

[@hotdrogon9350]

Bro Make the Video series for Assembly Language Please. Thanks 😘

[@WEEBCODER]

ua-cam.com/users/WhatsACreel

[@icedjelly]

Hi but for me it makes a txt.crswap file

[@CodeMoon07]

the save function dont work :(

[@Conversion108]

the innerText won't load for me everything works but that

[@CodePulse]

Did you create an element with id="textarea"?
You may also want to try `let textarea = document.querySelector("#textarea");` on the previous line.

[@CrazyAssDrumma]

JS is the better language. Thankyou :D

[@lazykid9167]

inception bro....

[@davidbguyenot8665]

I feel dumber than before

[@karakisihmas]

like

[@secondengineer9814]

I'd like to request a Python video, as it is a better language than javascript :)

[@marvin.toyboy]

It's not better haha. It's slower and use more energy.

[@Daniel-pg8ln]

Thank you so much!!!