CODEWITHSUNDEEP
javascripthtml
Zack Lee
Zack Lee

Reputation: 3054

How to dynamically upload and run a javascript file?

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?

Upvotes: 2

Views: 1152

Answers (2)

topsoftwarepro
topsoftwarepro

Reputation: 822

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

Upvotes: 3

Ankit Sardhara
Ankit Sardhara

Reputation: 82

    
        
        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>

Upvotes: -1

Related Questions