Upload Javascript file using variables

Question

EDIT: I do not want to save to a text file.... I want the user to be able to select their own file and use the variables within that file.

I would like to have the user upload their own "settings.js" file and then the page use the variables once loaded.

How would I change my code to reflect this?

At present I have the following javascript file and HTML code:

Javascript File: settings.js

var myVariable = 6000;

HTML file: index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Load Javascript file</title>
</head>


<body>

    <script src="settings.js"></script>


    <div>

        <script>
            alert(myVariable)
        </script>

    </div>

</body>

</html>

Please help.

Instead of loading the "settings.js" file, I would like the user to upload the file therefore being able to use their variables. — jmcall10, Jul 29 '17 at 10:28
Possible duplicate of [Saving a text file on server using JavaScript](https://stackoverflow.com/questions/15722765/saving-a-text-file-on-server-using-javascript) — NicoXiang, Jul 29 '17 at 10:28
So you want the user to upload file (AJAX) and than use it.You will need server side code of NPAPI for doing it. NPAPI is depricated — CodeWizard, Jul 29 '17 at 10:30
Possible duplicate of [Reading local files with ?](https://stackoverflow.com/questions/5872815/reading-local-files-with-input-type-file) — Djordje Vujicic, Jul 29 '17 at 10:51

Djordje Vujicic · Answer 1 · 2017-07-29T13:09:26.970

This code will run javascript stored in your JS file. Use FileReader() to read file as text, and use eval(content); to execute that code. If you can execute JavaScript you can do anything you want. Use only variables, or anything else.

var fileInput = document.getElementById('fileInput');
var fileDisplayArea = document.getElementById('fileDisplayArea');

fileInput.addEventListener('change', function(e) {
    var file = fileInput.files[0];
    var textType = /text.*/;
    
    if (file.type.match(textType)) {
        var reader = new FileReader();
        
        reader.onload = function(e) {
            var content = reader.result;
            //Here the content has been read successfuly
            eval(content);
            
        }
        
        reader.readAsText(file); 
    } else {
        document.innerText = "File not supported!"
    }
});

<input type="file" id="fileInput">

score 0 · Accepted Answer · answered Jul 29 '17 at 11:13

something like this maybe

document.getElementById("settings").addEventListener("change", function(){
if(this.files[0] && this.files[0].type == "text/javascript"){
     var reader = new FileReader();
      reader.onload = function (e) {
         var settings = e.target.result.split("data:text/javascript;base64,")[1];
         eval(atob(settings));
         
         //use the loaded var's
         document.getElementById("result").innerText = myVariable;
      }
     reader.readAsDataURL(this.files[0]);
    }
});

<input type="file" id="settings">
<div id="result"></div>

CodeWizard · Answer 3 · 2017-07-29T11:19:02.547

Here is a full working code for you. It will read file and print it as text for debugging on the screen and will add the file as script file to the page as well.

<!DOCTYPE HTML>
<html>
<head>
<script>


function loadScript() {
  var inputFile = document.querySelector("#scriptFile"),
  
  // Get the selected file
  file = inputFile.files[0], 
  
  // HTML5 File API 
  fileReader = new FileReader();
 
  // Add the onload event to the file 
  fileReader.onload = printFile;
  
  // Read the file as text
  fileReader.readAsText(file);
  
  function printFile( reader ) {
  
    // Get the text of the file
    var content = reader.target.result,
        script;

    // Add the fileContent as script to the page
    script = document.createElement('script');
    script.textContent = content;
    document.body.appendChild(script);

    ///////////////// DEBUG

    var pre = document.createElement('pre');
    pre.textContent = content;
    document.body.appendChild(pre);
    }
  }

</script>
</head>
<body>
    <input type='file' id='scriptFile'>
    <input type='button' value='Load' onclick='loadScript();'>
</body>
</html>

Upload Javascript file using variables

3 Answers3