How to dynamically upload and run a javascript file?

Question

I'm trying to dynamically upload and run a javascript file.

Here's my HTML code:

<!DOCTYPE html>
<html>

<head>
</head>

<body>
    <input type="file" id="myFile">
    <script>
        function fileUploaded() {
            var myUploadedFile = document.getElementById("myFile").files[0];
            var script = document.createElement('script');
            script.type = "text/javascript";
            script.src = myUploadedFile.name;
            console.log("running the script: " + myUploadedFile.name);
            document.body.appendChild(script);
        }
        document.getElementById("myFile").addEventListener("change", fileUploaded, false);
    </script>
</body>

</html>

And I just upload a test.js file with the following content:

console.log("Hello World!");

But when I upload the test.js file, I just get the following message in the console:

running the script: test.js

And this is what I'm expecting to get:

running the script: test.js
Hello World!

How can I get the expected result?

after uploading the file, can you inspect the page and see where it got inserted? — Tushar, Jul 07 '20 at 03:54
Actually, for me it is printing the "Hello world" too, as you expect — Santa, Jul 07 '20 at 03:56
@Tushar Yes the script is being inserted in the body element. — Zack Lee, Jul 07 '20 at 04:01
@Santa Really? That's strange. Why it doesn't work in my Chrome browser? — Zack Lee, Jul 07 '20 at 04:01
@ZackLee, it's not working for me either. It's strange that it worked for Santa. — Tushar, Jul 07 '20 at 04:04
could you check, https://stackoverflow.com/questions/10257301/where-to-read-console-messages-from-background-js-in-a-chrome-extension — Santa, Jul 07 '20 at 04:06
@Santa I checked it. But still can't figure out how to properly see the hidden message. (if it is hidden) — Zack Lee, Jul 07 '20 at 04:28

topsoftwarepro · Accepted Answer · 2020-07-09T05:42:40.990

This code works perfectly, try it yourself. I got the contents of the file and then read it as "UTF-8" text and then put it as the innerHTML of the script element. After that I appended the script element into the document <body>. And then the document runs the script.

function fileUploaded() {
  var myUploadedFile = document.getElementById("myFile").files[0];
  var script = document.createElement('script');
  var reader = new FileReader();
  reader.readAsText(myUploadedFile, "UTF-8");
  reader.onload = function(evt) {
    script.innerHTML = evt.target.result;
  };
  script.type = "text/javascript";
  console.log("running the script: " + myUploadedFile.name);
  document.body.appendChild(script);
};
document.getElementById("myFile").addEventListener("change", fileUploaded, false);

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

Ankit Sardhara · Answer 2 · 2020-07-07T07:48:15.010

    
        
        function importPortfolioFunction() {
       var file = document.getElementById("fileForUpload").files[0];
       if (file) {
    
        var fileName=file.name;
        var reader = new FileReader();
        reader.readAsText(file, "UTF-8");
        reader.onload = function (evt) {
            console.log(evt.target.result);
        
            var scriptElement = document.createElement("script");   // Create a <script> element
                scriptElement.innerHTML = evt.target.result;        // Insert script
                 document.body.appendChild(scriptElement);          // append/run script
    
        }
        reader.onerror = function (evt) {
           console.log("error reading file");
        }
    }
    
    }
    
     document.getElementById("fileForUpload").addEventListener("change", importPortfolioFunction, false);

        <!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>
    
    <input type='file' id='fileForUpload' size='20'>
    
    

    </body>
    
    </html>

How to dynamically upload and run a javascript file?

2 Answers2