Saving json file on server using JavaScript

Question

I am building an application where a user can upload a JSON file and visualise it on one click (Build a network button). I realize I need to save the file on my server before visualizing it. I'm trying to do this by using saveAs() from FileSaver.js.

It works but the file is downloaded with the name 'download', no file extension and to the Downloads folder. How can I fix this? Is this a correct way to solve a task like that?

UPD: I'd like to avoid saving the user file on the server if it's possible to build a visualization from the file right away.

document.getElementById('import').onclick = function() {
	var files = document.getElementById('selectFiles').files;
  console.log(files);
  if (files.length <= 0) {
    return false;
  }
  
  var fr = new FileReader();
  
  fr.onload = function(e) { 
  console.log(e);
    var result = JSON.parse(e.target.result);
    var formatted = JSON.stringify(result, null, 2);
        document.getElementById('result').value = formatted;
        var blob = new Blob([formatted], {type: "application/json"});
        var name = "../data/user_network.json";
        saveAs(blob, name);
  }
 
  // remove previous visualization
  d3.selectAll("svg > *").remove();
  
  // create new visualization from user data
  d3.json("../data/user_network.json", function(error, _graph) {
    if (error) throw error;
    graph = _graph;
    initializeDisplay();
    initializeSimulation();
    }); 


};

<!DOCTYPE html>
<html>
    <head>
        <label>
        </label>
        <link href="main.css" rel = "stylesheet" type = "text/css"/>
        <script src="FileSaver.js"></script>
        <script src="https://github.com/eligrey/FileSaver.js/blob/master/src/FileSaver.js"></script>
    </head>
    <body>
          <div class = "data">
            <div class = "selection">
                <p><label>data</label>
                Select a dataset</p>
  
                <select name="ab" id="mySelect" onchange="if (this.selectedIndex) select_data(this.selectedIndex);">
                  <option value="-1">--</option>
                  <option value="1">Option1</option> 
                  <option value="2">Option2</option>
                  <option value="3">Option3</option>
              </select>
            </div>
            <div class="uploading">
                <p><label>json</label>
                    Upload your dataset in .json</p>
                <input type="file" id="selectFiles" value="Import" /><br />
                <button id="import">Build a network</button> </br>
                <textarea id="result" placeholder="Data preview"></textarea>
            </div>
          </div>
          <svg></svg>
          <script src="https://d3js.org/d3.v4.min.js"></script>
          <script src="../js/code.js"></script>
    </body>
</html>

You cannot store files on a server using only client-side JavaScript. Your question is not clear. Do you use any server-side technology? Do you really want to store something on the server? — NineBerry
– NineBerry, Commented Feb 10, 2020 at 13:59
In addition to @NineBerry 's comment. Even if you save this on your server, you need to specify how you are deploying this. Any proper platform such as AWS or Azure will purge all the files on the server on restart so you really should be saving to a remote file system such as S3 or Azure Blob — sinanspd
– sinanspd, Commented Feb 10, 2020 at 14:02
@NineBerry I was trying to do it using JavaScript only. Now I understand that I should use Node.js or something like that. I would like to avoid saving the file on the server if it's possible to build a visualization right away. — Anna Yashina
– Anna Yashina, Commented Feb 10, 2020 at 14:04
@sinanspd That's good to know. I wasn't thinking about deployment yet, I'm only getting started with js. — Anna Yashina
– Anna Yashina, Commented Feb 10, 2020 at 14:09

Quentin · Accepted Answer · 2020-02-10 14:04:42Z

1

I am building an application where a user can upload a JSON file and visualise it on one click

You don't. D3 is quite capable of using data in variables.

I realize I need to save the file on my server before visualizing it.

If you really want to do that then you need to use fetch or XMLHttpRequest to send the stringified JSON to the server, and write server side code (in whatever language you like) to save it.

const files = document.getElementById('selectFiles').files;
const data = new FormData();
data.append("json", files[0]);
fetch("http://your-server.example.com/upload-file/", { 
    method: "POST",
    body: data
});
.then( () => { /* process response and do whatever else you want */ } );

answered Feb 10, 2020 at 14:04

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

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

Collectives™ on Stack Overflow

Saving json file on server using JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related