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

แชร์
ฝัง
  • เผยแพร่เมื่อ 21 พ.ย. 2024

ความคิดเห็น • 66

  • @damienscullytoo
    @damienscullytoo 3 ปีที่แล้ว +58

    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
      @olivyae3057 ปีที่แล้ว +3

      I just caught on to that. So cool :)

  • @edilsonjunior8161
    @edilsonjunior8161 2 ปีที่แล้ว +8

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

  • @edwardwilson4272
    @edwardwilson4272 2 ปีที่แล้ว +7

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

  • @omkarbhale442
    @omkarbhale442 2 ปีที่แล้ว +2

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

  • @Tabbytoffee
    @Tabbytoffee 4 หลายเดือนก่อน

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

    • @CodePulse
      @CodePulse  4 หลายเดือนก่อน +1

      Hahahah

  • @noahsomeone1938
    @noahsomeone1938 2 ปีที่แล้ว

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

  • @akrit.ghimire
    @akrit.ghimire ปีที่แล้ว +2

    Amazing and so simplified. Thank you!!!!

  • @masterfighter8856
    @masterfighter8856 2 ปีที่แล้ว +1

    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

  • @__hannibaal__
    @__hannibaal__ ปีที่แล้ว

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

  • @magbenyo
    @magbenyo 3 ปีที่แล้ว +2

    I will start learning web development next year 😊

  • @heeju4482
    @heeju4482 ปีที่แล้ว +2

    This video is really helpful! Thank you :)

  • @RunningtoCatchMyBreath
    @RunningtoCatchMyBreath ปีที่แล้ว +2

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

  • @AndiAbrudan
    @AndiAbrudan 3 ปีที่แล้ว +7

    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
      @CodePulse  3 ปีที่แล้ว +22

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

  • @emmanuelakigbogun1970
    @emmanuelakigbogun1970 ปีที่แล้ว

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

  • @damienscullytoo
    @damienscullytoo 3 ปีที่แล้ว +5

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

  • @RealmOfCode
    @RealmOfCode 2 ปีที่แล้ว +2

    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.

  • @olzhaskrm2628
    @olzhaskrm2628 2 ปีที่แล้ว

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

  • @adrishkumarde4155
    @adrishkumarde4155 2 ปีที่แล้ว +1

    Thanks this was Helpful

  • @LucasAlfare
    @LucasAlfare 3 ปีที่แล้ว +4

    Show some binary manipulation over files as well if possible

  • @codewithalade5399
    @codewithalade5399 3 ปีที่แล้ว +2

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

  • @JeroenLapre
    @JeroenLapre ปีที่แล้ว

    Very helpful. Thanks

  • @rdawo6408
    @rdawo6408 ปีที่แล้ว +1

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

  • @sealchan1
    @sealchan1 2 ปีที่แล้ว +1

    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
      @CodePulse  2 ปีที่แล้ว

      Probably, yes

  • @sameerparab7992
    @sameerparab7992 หลายเดือนก่อน

    Very nice

  • @slashd
    @slashd 2 ปีที่แล้ว

    Great video!

  • @RanjithKumar-rp7xi
    @RanjithKumar-rp7xi 2 ปีที่แล้ว +1

    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
      @CodePulse  2 ปีที่แล้ว +1

      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

  • @arifhossain8753
    @arifhossain8753 ปีที่แล้ว

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

  • @i-ahmed3495
    @i-ahmed3495 2 ปีที่แล้ว

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

  • @kamoroso94
    @kamoroso94 5 หลายเดือนก่อน

    If only this had full cross browser support.

  • @Daniel-pg8ln
    @Daniel-pg8ln 2 ปีที่แล้ว

    Thank you so much!!!

  • @aniquemaniac
    @aniquemaniac 2 ปีที่แล้ว

    how to get the file and folder list in sidebar

  • @hotdrogon9350
    @hotdrogon9350 3 ปีที่แล้ว +4

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

    • @WEEBCODER
      @WEEBCODER 2 ปีที่แล้ว

      th-cam.com/users/WhatsACreel

  • @dinakaranb8768
    @dinakaranb8768 ปีที่แล้ว

    For save every time prompt was showing how to solve that

  • @devanshdas0404
    @devanshdas0404 3 หลายเดือนก่อน

    Is it possible for us to have access to the file in the next session without the user being prompted to select the files again?

    • @CodePulse
      @CodePulse  3 หลายเดือนก่อน +1

      Unfortunately I don't think this is currently possible.

  • @athuldas44
    @athuldas44 2 ปีที่แล้ว +1

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

    • @CodePulse
      @CodePulse  2 ปีที่แล้ว +2

      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.

  • @webdev1943
    @webdev1943 2 ปีที่แล้ว

    Q: how to get directory path in javascript? thanks

  • @simonfj20
    @simonfj20 3 ปีที่แล้ว +1

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

  • @kashmirtechtv2948
    @kashmirtechtv2948 ปีที่แล้ว

    UNIQUE

  • @rauchu5861
    @rauchu5861 7 หลายเดือนก่อน

    what are the limits to this?

  • @rahiljakir
    @rahiljakir ปีที่แล้ว

    Does this work in Android chrome?

  • @CodeMoon07
    @CodeMoon07 2 ปีที่แล้ว

    the save function dont work :(

  • @icedjelly
    @icedjelly ปีที่แล้ว

    Hi but for me it makes a txt.crswap file

  • @damdam4969
    @damdam4969 2 ปีที่แล้ว

    best men

  • @Conversion108
    @Conversion108 2 ปีที่แล้ว

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

    • @CodePulse
      @CodePulse  2 ปีที่แล้ว +1

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

  • @milindkolambe7391
    @milindkolambe7391 2 ปีที่แล้ว

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

  • @lazykid9167
    @lazykid9167 2 ปีที่แล้ว +2

    inception bro....

  • @davidbguyenot8665
    @davidbguyenot8665 2 ปีที่แล้ว

    I feel dumber than before

  • @karakisihmas
    @karakisihmas 2 ปีที่แล้ว

    like

  • @adolphineatingchildren2641
    @adolphineatingchildren2641 ปีที่แล้ว +2

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

  • @secondengineer9814
    @secondengineer9814 3 ปีที่แล้ว +3

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

    • @marvin.toyboy
      @marvin.toyboy 3 ปีที่แล้ว +3

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

  • @tothg77
    @tothg77 5 หลายเดือนก่อน

    Thank you so much!