0

I'm developing a simple Javascript application where the user has some images (stored in my machine) and he is able to annotate them and then save the annotations as a JSON file.

The application is very light and simple and it is not an app server. However, I need to save those JSON files to the machine that will be behaving as the server.

Since I cannot use Javascript for IO, is there any easy and simple way to save those files without having to implement an app server?

I used Blob to download the files.

function project_save_confirmed(input) {
    if ( input.project_name.value !== _onco_settings.project.name ) {
        project_set_name(input.project_name.value);
    }

    // onco project
    var _onco_project = { '_onco_settings': _onco_settings,
        '_onco_img_metadata': _onco_img_metadata,
        '_onco_attributes': _onco_attributes };

    var filename = input.project_name.value + '.json';
    var data_blob = new Blob( [JSON.stringify(_onco_project)],
        {type: 'text/json;charset=utf-8'});

    save_data_to_local_file(data_blob, filename);

    user_input_default_cancel_handler();
}
function save_data_to_local_file(data, filename) {
    var a      = document.createElement('a');
    a.href     = URL.createObjectURL(data);
    a.download = filename;
    a.click();
}

Any suggestion?

Kind regards!

Rohan Dhar
  • 1,827
  • 1
  • 10
  • 21
vftw
  • 1,547
  • 3
  • 22
  • 51

2 Answers2

0

Copy paste from: Download JSON object as a file from browser

function downloadObjectAsJson(exportObj, exportName){
    var dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(exportObj));
    var downloadAnchorNode = document.createElement('a');
    downloadAnchorNode.setAttribute("href",     dataStr);
    downloadAnchorNode.setAttribute("download", exportName + ".json");
    document.body.appendChild(downloadAnchorNode); // required for firefox
    downloadAnchorNode.click();
    downloadAnchorNode.remove();
}

This I believe accomplishes what you want, just makes sure that the proper headers are set, push it to an <a> tag, then click() it

Dosisod
  • 307
  • 2
  • 15
  • I don’t want to download the file to my disk. I want to write the file in a folder that will be on my server machine using relative path or something – vftw Dec 12 '18 at 06:30
  • 1
    So if you are wanting to save it to the server, then you will have to send the JSON in a `fetch()` or another method, then have something on the receiving end to capture and parse it etc – Dosisod Dec 12 '18 at 06:34
  • You cannot save to the server without server IO, You can use fs.readFile or something similar to store the file, you can store it in the database or something. But from client side there is no way to select folder to save on the client for security reasons. –  Dec 12 '18 at 06:45
  • Ye, that’s the answer I was afraid of. I’m not very experienced on Web Development so don’t know how I’m gonna integra-te a nodeJS server with my JS file. Do I need to change to ES6 or something? Do you guys know any ready-to-use tool that could help me? – vftw Dec 12 '18 at 06:49
  • I mean you dont __need__ to use node js if you want to just simply store that data to a file. if you are in a php enabled enviroment, you could use the `file_put_contents()` method to write it to a file – Dosisod Dec 12 '18 at 06:51
  • I need to store those json files to the server and the retrieve. It’s like a config file that keeps track of the user session. Do you have any example using that approach? – vftw Dec 12 '18 at 06:54
0

You can do this in php:

<?php
//notice this will put WHATEVER is in json into file
$filename="config.json";
if (isset($_POST["json"])) {
    file_put_contents($filename,$_POST["json"]);
}
?>

then for the JS side:

var fd=new FormData();
fd.append("json", JSON.stringify(_onco_project));
fetch("https://url.com",{method:"POST",body:fd})

Explanation: JS makes a new formdata, and sets "json" to the stringified json, and sends it off to the server. The php server takes this, and puts it directly into $filename. Make sure data is safe before putting it to file, as it will take whatever it is given and put it into your file!

Dosisod
  • 307
  • 2
  • 15