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
– jmcall10, Commented Jul 29, 2017 at 10:28
Possible duplicate of Saving a text file on server using JavaScript — NicoXiang
– NicoXiang, Commented Jul 29, 2017 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
– CodeWizard, Commented Jul 29, 2017 at 10:30
Possible duplicate of Reading local files with <input type="file">? — Djordje Vujicic
– Djordje Vujicic, Commented Jul 29, 2017 at 10:51

keja · Accepted Answer · 2017-07-29 11:13:49Z

0

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>

answered Jul 29, 2017 at 11:13

keja

1,3631 gold badge15 silver badges21 bronze badges

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

Comments

CodeWizard · Accepted Answer · 2017-07-29 11:19:02Z

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>

Djordje Vujicic · Accepted Answer · 2017-07-29 13:09:26Z

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">

Collectives™ on Stack Overflow

Upload Javascript file using variables

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related