0

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 

                    <label class="upload">
                        <input id="documentattachment" name="documentattachment" multiple type="file" data-bind="event: { change: function() { uploadSelected($element.files) } }" />
                        {{texts().attachmentFile}}
                    </label>

and in viewmodel i have code like this. 

function uploadSelected(file) {

            if (!vm.uploadOnSubmit()) {
                if (!session.hasPermission(session.permissions.Documents, vm.clientNr())) {
                    toastr.error(vm.texts().permissionDenied);
                    return false;
                } else {
                    var att = new Attachment(
                        file[0].lastModifiedDate,
                        file[0].name,
                        0,
                        (vm.uploadOnSubmit() ? true : false));
                    vm.attachments.push(att);
                    vm.fileDatas.push(file[0]);
                    return true;
                }
            } 
        }

my question is that how can get file even i select the same file.
Thanks

Mofizur
  • 145
  • 1
  • 3
  • 13
  • How would you do it in jQuery? You're using a change event and wanting it to fire when nothing has changed? It doesn't seem like jQuery would do that, either. – Roy J Sep 26 '16 at 13:05
  • Check out http://stackoverflow.com/questions/12030686/html-input-file-selection-event-not-firing-upon-selecting-the-same-file – Daryl Sep 26 '16 at 17:49
  • actually, i was trying the exact thing from that post's answer, triggering both click and change event. first when click even triggers would like to clear and then trigger the change event. Actually there is no direct way to do this, just searching for the best way – Mofizur Sep 27 '16 at 05:51

2 Answers2

2

Here is file uploading sample in knockout:

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

<input type="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 here
        var file = e.target.files[0];
       // preparing form data to post by uploading
        var formData = new FormData();
        formData.append("thefile", file);

        var xhr = new XMLHttpRequest();

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

        }
        xhr.send(formData);
        return true;
    }
     // something like this
     resetFileInput() {
            if (this.fileInput) {
                $(this.fileInput).val("");
            }
       }
Vishal_Kotecha
  • 481
  • 5
  • 19
  • here u have the same event "change", for me sending file is working but the only thing is that i want to trigger the function when change the file or again uploading the same file, thanks – Mofizur Sep 29 '16 at 13:17
  • I think what you are asking is "resetting the upload file" after once you have uploaded. I have updated the code for that. please check. – Vishal_Kotecha Sep 29 '16 at 14:39
0

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.

function removeAttachment(file) {
            document.getElementById("documentattachment").value = "";   //resetting the file input             
            vm.attachments.removeAll();
            vm.fileDatas.removeAll();
        }
Mofizur
  • 145
  • 1
  • 3
  • 13