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
– Tushar, Commented Jul 7, 2020 at 3:54
Actually, for me it is printing the "Hello world" too, as you expect — Santa
– Santa, Commented Jul 7, 2020 at 3:56
@Tushar Yes the script is being inserted in the body element. — Zack Lee
– Zack Lee, Commented Jul 7, 2020 at 4:01
@Santa Really? That's strange. Why it doesn't work in my Chrome browser? — Zack Lee
– Zack Lee, Commented Jul 7, 2020 at 4:01
@ZackLee, it's not working for me either. It's strange that it worked for Santa. — Tushar
– Tushar, Commented Jul 7, 2020 at 4:04

topsoftwarepro · Accepted Answer · 2020-07-09 05:42:40Z

3

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

edited Jul 9, 2020 at 5:42

answered Jul 7, 2020 at 4:35

topsoftwarepro

8576 silver badges19 bronze badges

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

Comments

Ankit Sardhara · Accepted Answer · 2020-07-07 07:48:15Z

    
        
        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>

Collectives™ on Stack Overflow

How to dynamically upload and run a javascript file?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related