CODEWITHSUNDEEP
javascripthtmlgoogle-chromeinputgoogle-chrome-app
Qvatra
Qvatra

Reputation: 3857

how to use input type="file" event handler in chrome app

I want to be able to open files through input type="file" in chrome apps. The following code produce an error:

Refused to execute inline event handler because it violates the following Content Security Policy directive

<html>
<head>
    <title></title>
</head>
<body>
    <input type="file" onchange="btnClick(event)" />

    <script>
        function btnClick(evt) {
            var fileReader = new FileReader();
            fileReader.onload = function (event) {
                var str = event.target.result;
                console.log(str);
            }
            fileReader.readAsText(event.target.files[0]);
        }
    </script>

</body>
</html>

What can I do to fix it?

Upvotes: 3

Views: 3108

Answers (1)

Sionnach733
Sionnach733

Reputation: 4736

Inline event handlers dont work in chrome apps, remove event handler from the html and implement it in javascript. Also, the script must not be in the html file. it should be in its own js file and referenced in the html. This is documented HERE

html

<input type="file" id="file1"/>

js

document.getElementById("file1").addEventListener("change",handleChange);

function handleChange(){
    var fileReader = new FileReader();
        fileReader.onload = function (event) {
            var str = event.target.result;
            console.log(str);
        }
    fileReader.readAsText(event.target.files[0]);    
}

FIDDLE

Upvotes: 3

Related Questions