jimmywarting / StreamSaver.js

StreamSaver writes stream to the filesystem directly asynchronous
https://jimmywarting.github.io/StreamSaver.js/example.html
MIT License
4.04k stars 418 forks source link

how to "append" the data into TXT #167

Closed sexfio closed 4 years ago

sexfio commented 4 years ago

If the "aaa.txt" already exists how to "append" the new data into the "aaa.txt" ? now it create a new TXT and the filename is aaa (1).txt ...

streamSaver.createWriteStream("aaa.txt", { flags: 'a+' }); I set mode 'a+', but it doesn't seem to work, please help me,I'm a beginner :)

jimmywarting commented 4 years ago

Think I mention to you at filesaver.js that they couldn't append data...?

It's true that StreamSaver can append data, but only to a newly downloaded/replaced file and as long as you have a WritableStream open... once it closes then you will have to downloaded/replaced the file again.

Basically you have to pre-append the file and then write all new data afterwards.

Here i'm using some newer available methods that works in more cutting edge browser (mainly blink) but it can work in other browser too if you degrade it or add in some polyfills to make it work across other browsers.

button.onclick = async () => {
    // Simulate a file you would normally get from `fileInput.files[0]`
    // or from some drag and drop or other means...
    const file = new File(['StreamSaver is awesome'], 'sample.txt')

    // Create a writableStream
    const writableStream = streamSaver.createWriteStream('sample.txt')

    // Pre append the previous part, and wait for it to finish
    await file.stream().pipeTo(writableStream, {
      preventClose: true // don't close the writableStream when the file reading stream ends
    })

    // get a writable class instance so you can write to it manually
    const writer = writableStream.getWriter()

    // append data into txt as long as you have more data to write
    writer.write(new TextEncoder().encode('..!'))

    // close it once you are done
    writer.close()
}

This will probably be the best you can do for your users at the moment.

You haven't been able to write to an existing file on the disk up until just recently, There is a new api called native file system but it's an ongoing trial right now. You can enable it in chrome but it will not work for all browser/client.

I have also developed an adapter to that api, it works a bit like a shim/polyfill that can gracefully do some degree of fallback solutions.

if you want to help using "Native file system" then i can assist you with that also, or you can read up on this article: https://web.dev/native-file-system/ (note that some methods can be removed/deprecated - mainly around the part of chooseFileSystemEntries got changed to be split up two 3 different methods instead)

jimmywarting commented 4 years ago

PS, there is no flag option in StreamSaver, since it dose not have any read access. it mostly works like any other http download apart from that it works on the client side and it dose not close until you close the stream. so as long as it remain open then you can append data

sexfio commented 4 years ago

thank you very much :)