0

I'm trying to write a simple client-side text editor using HTML5 and Javascript. Is it possible to overwrite the contents of an existing text file using HTML5? I know that the HTML File API makes it possible to read the contents of a file, but I haven't yet found a way to modify or overwrite an existing file.

Anderson Green
  • 30,230
  • 67
  • 195
  • 328
  • Depends, where's the file located? – Rob W Aug 03 '12 at 21:39
  • I'd like to prompt the user to select a file to open, and then modify and overwrite the file. – Anderson Green Aug 03 '12 at 21:41
  • Judging by that comment, you don't care where the file is saved, as long as it's saved on prompt. Am I correct? – Rob W Aug 03 '12 at 21:42
  • Yes, but I'd like to select a file to open, and then modify the contents of the file. – Anderson Green Aug 03 '12 at 21:43
  • Do you mind if you get two different prompts: One for reading and one for saving? – Rob W Aug 03 '12 at 21:44
  • That would be an acceptable solution, as long as it can overwrite the original file. – Anderson Green Aug 03 '12 at 21:44
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/14877/discussion-between-anderson-green-and-rob-w) – Anderson Green Aug 03 '12 at 21:47
  • Possible duplicate question: http://stackoverflow.com/questions/6457041/modifying-local-files-using-html5-and-javascript – Anderson Green Aug 04 '12 at 16:30
  • 1
    That is a **virtual** filesystem. For more information, see [tagwiki of html5-filesystem](http://stackoverflow.com/tags/html5-filesystem/info) and [Where is the filesystem in html5 stored on the real file system?](http://stackoverflow.com/questions/11719816/where-is-the-filesystem-in-html5-stored-on-the-real-file-system). – Rob W Aug 04 '12 at 20:27

1 Answers1

1

Prompt to open

To read a file, use the FileReader API (examples):

Prompt to save

To save the file, create an URL using URL.createObjectURL (the blob is constructed via the FileReader API, with type application/octet-stream), or using a data-URI (example).

Community
  • 1
  • 1
Rob W
  • 341,306
  • 83
  • 791
  • 678
  • riiiight, but this will only work offline-- which if I gather is pretty much not useful for a website. – FlavorScape Aug 03 '12 at 22:07
  • @FlavorScape Hang on, do you want the **client** to **browse on the server** using pure client-side JavaScript? If yes, that's not possible, because **the client can't browse/modify server-side files without a server-side implementation.** The methods suggested by my answer allows a user to select an accessible file from **their computer**, do some magic within the web page, then save the file **on their computer**. – Rob W Aug 03 '12 at 22:08
  • oh ok-- i guess that's not a requirement. i just assumed that since the OP used the word "client-side" that there was a "server-side" somewhere – FlavorScape Aug 03 '12 at 22:11
  • @FlavorScape Oops, I've mistaken you for the OP, sorry :p – Rob W Aug 03 '12 at 22:12
  • @Rob W Is it possible to overwrite (instead of duplicating) a file using the method you described? – Anderson Green Aug 04 '12 at 16:21
  • @AndersonGreen Only if the user selects the same file. Remember, you cannot directly access the user's filesystem. My method only works if the user allows it (which makes sense). – Rob W Aug 04 '12 at 20:23