6

I don't know if it's possible but here's what I would like to achieve. I would want to be able to load a JSON file using a file input, edit it in a web page and then save the changes is the initial file. I know that for security reason the browser doesn't have full access to the disk but I was wondering if there was a way to allow updates for a specific file.

In a nutshell, the flow would be

  1. Load the file
  2. Edit it
  3. Save the changes (rewriting the initial one)

I don't care about browser compatibility, so if the solution is based on a specific brower's API, it's good enough for me.

Also, I know about the download attribute, but I'm trying to avoid the "normal" download flow (popup or the file being thrown is the Downloads folder).

Thanks in advance !

Improve this question
7
  • "Also, I know about the download attribute, but I'm trying to avoid the "normal" download flow " Is requirement to not utilize download attribute ? , or "Save File" dialog ? How would , or should, file be saved ? See stackoverflow.com/questions/30563157/… Commented Dec 2, 2015 at 3:41
  • Is this something for the public to use, or just for you personally? Commented Dec 2, 2015 at 3:42
  • "How would , or should, file be saved" The same way "Save" button work in MS Word for instance. I want to save in the initially loaded file. Think for it as the different between "Save as" and "Save". Just for me at the moment, but if I can get it to work, it would be nice to able to share it :) Commented Dec 2, 2015 at 3:46
  • @PascalBoutin Tried html , js at link ? Requirement should be possible using input type="text" or textarea , input type="file" elements Commented Dec 2, 2015 at 3:54
  • 1
    Well, I know that the saving process can be done via the saving dialog, what I'm exploring right now, is the possibility to have both "Save" and "Save as" in my app, not just "Save as". Commented Dec 2, 2015 at 4:08

3 Answers 3

Reset to default
4 

var input = document.querySelector("input[type=file]"); var text = document.querySelector("textarea"); var button = document.querySelector("input[type=button]"); var name; input.onchange = function(e) { var reader = new FileReader(); reader.onload = function(event) { text.value = event.target.result; button.disabled = false; } name = e.target.files[0].name; reader.readAsText(new Blob([e.target.files[0]], { "type": "application/json" })); } button.onclick = function(e) { e.preventDefault(); var blob = new Blob([text.value], { "type": "application/json" }); var a = document.createElement("a"); a.download = name; a.href = URL.createObjectURL(blob); document.body.appendChild(a); a.click(); text.value = ""; input.value = ""; button.disabled = true; document.body.removeChild(a); }
textarea { white-space: pre; width: 400px; height: 300px; }
<form> <input type="file" /> <br /> <textarea></textarea> <br /> <input type="button" disabled="true" value="Save" /> </form>

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

this is the closest to what I'm trying to achieve, but it is not rewriting the initial file. if it is not possible at all, your solution will be accepted... initialy, it was more like an "exploration" question
"but it is not rewriting the initial file" ? "Save File" dialog may append a (1) to original file name , perhaps to prevent user from overwriting file, while can be removed at "Save File" dialog. Following removing (1) from prospective file name, user may again be prompted with "A file named "abc.json" already exists. The file already exists in "folder". Replacing it will overwrite its contents." . To prevent user from overwriting a file in error ? If maintain open editor during process , edited file should be updated in both editor and filesystem when click "Save"
1

Consider looking into FileSystem. It's only in Chrome at present and not likely to be supported in other browsers.

Improve this answer

1 Comment

If I understand well, it is like a "virtual" file system. Is there a way to load a physical file in that FileSystem ?
0

Locale storage? Stores key value pairs that will persist -variable limitations across browsers, but the general idea is supported by Chrome, Firefox, Safari, Opera, IE. Things are stored as strings, so you could store json type information as a value, rather than breaking your json into lots of key/value items.

This is not the most secure way of doing this, but would probably be fine for preferences and even application state, if you don't mind there being a potential for something client side to tweak values.

If a user wants to save this, then you invoke the download/save file option.

Improve this answer

1 Comment

I want to write some sort of online editor, and I think that it would be pretty annoying to prompt the save dialog to the user everytime he wants to save his progress, but I agree that the LocalStorage could be an efficient buffer at runtime that would be crash-proof.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.