0

On click of "Import CSV" button, i want to open a "Open file dialog explorer" and on selecting a file and click on open in the explorer, it should trigger a function call(function addCSVFile()). How do i achieve this?

My .js looks like below:

<input type="button" class="btn-import" id="loadFileXml"  value="Import CSV"
       onclick="document.getElementById('file').click();"/>
<input type="file" style="display:none;" id="file" name="file"/>

onchange and ng-change i have tried. but both are not working. Please help me on this.

2 Answers 2

0

Well I don't know angular js but this simple jquery should work if you don't mind using it...

<script src="https://ajax.googleapis.com/libs/jquery/3.4.1/jquery.min.js"></scipt>
<script type="text/javascript">
$(document).ready(function(){
      $("#file").on('change',function(){
        //do whatever you want
      });
});
</script>

You can also use for attribute of label like this...

<label for="file" class="btn-import" id="loadFileXml">Import File</label>
<input type="file" style="display:none;" id="file" name="file"/>
0

I found a solution to solve this:

*.html i altered like below

<input type="button" class="btn-import" id="loadFileXml" value="Import CSV"
       ng-click="vm.file_changed()"/>
<input type="file" style="display:none;" id="file" name="file" accept=".csv"
       script-upload="vm.fileToUpload"/>

*.js

function file_changed() {
    $('#file').click();
}

function onScriptSelect(files) {
    var filename = files[0].name;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.