Input File Selection Event Not Firing When Selecting The Same File In Knockoutjs And Html

Probably this has a easy solution for JQuery but i am struggling to do with KnckoutJS. When i select the same file then event is not firing. I have a html like this

Solution 1:

Here is file uploading sample in knockout:

<inputtype="file" data-bind="event: {change: onFileChange}"id="fileUploadId">

<inputtype="button" data-bind="event: {click: resetFileInput}" value="Reset">

below is knockout js:

fileInput: any;

onFileChange(data, e) {
   this.uploadFile(data, e)
}

uploadFile(data, e) {

        var url = "/someUrl";
        this.fileInput = e.target;

        // getting file herevar file = e.target.files[0];
       // preparing form data to post by uploadingvar formData = newFormData();
        formData.append("thefile", file);

        var xhr = newXMLHttpRequest();

       // posting the data to url
        xhr.open("POST", url, true);
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                // ...
            } else {
               // ...
            }

        }
        xhr.send(formData);
        returntrue;
    }
     // something like thisresetFileInput() {
            if (this.fileInput) {
                $(this.fileInput).val("");
            }
       }

Solution 2:

Found an workaround, not good solution though.

<i style="cursor:pointer;" title="{{$parent.texts().delete}}" class="fa fa-trash fa-fw" data-bind="click: function(){ $root.removeAttachment(this); }"></i>

added a remove button and reset the file content there.

functionremoveAttachment(file) {
            document.getElementById("documentattachment").value = "";   //resetting the file input             
            vm.attachments.removeAll();
            vm.fileDatas.removeAll();
        }