JSROOT API problem

I’m new to JSROOT. I wonder how to read local root file using JSROOT API? Just like the button in https://root.cern/js/latest/?localfile.

I have got that I can read the root file in my index.html by API, some code like this,

var filename = "https://root.cern/js/files/hsimple.root";
JSROOT.OpenFile(filename, function(file) {
   file.ReadObject("hpxpy;1", function(obj) {
      JSROOT.draw("drawing", obj, "colz");

Now I want to read some files in the user’s computer, var filename should be replaced by the user’s local file, What should I do if I want to add this to my own index.html? Thanks.


It is security limitation of web browsers.
They do not allow to read local files without direct user interaction.
I wrote short info here:

You can disable such security checks in your browser.
For instance, some info for Firefox you will find here:


In such case just use following URL for the file:

var filename = "file:///home/user/hsimple.root";


Appreciate for your reply. Actually, I want to realize a event display app on my http server with JSROOT API, the user could specify a root file on their own computers (not on the server) and my app would read this root file. The files are very large, so it’s not a good idea to upload the entire file to the server. I found that the GUI of JSROOT project provides the “select local file for reading” button, how can I add this button in my custom HTML? Use HTML5 FileReader or something else? Thanks!


You have two alternatives.

  1. Either use local http server, which will serve your ROOT files. It could be Apache or civetweb or any other web server.

  2. Try to use HTML5 FileReader. For that you need to create special HTML element with file selection. Like described here - https://www.html5rocks.com/en/tutorials/file/dndfiles/ FileReader object can be provided directly as argument of JSROOT.OpenFile() function.

    var file_reader = evt.target.files[0]; // see example
    JSROOT.OpenFile(file_reader, function(file) {
    file.ReadObject(“hpxpy;1”, function(obj) {
    JSROOT.draw(“drawing”, obj, “colz”);

That’s helpful. Thanks a lot.

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.