Knockout JS Link File Upload

by Avinashullal

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<input id="DocumentPath" type="text" class="form-control inputFile customFormControl hasclear" />
<button data-bind="click: addFiles, disable: UploadLists().length == 5" class="btn btn-success btn-xs">Add Files</button>
<table border="0" id="FileTable" data-bind="" class="table table-striped table-hover form-horizontal">
    <tbody data-bind="foreach: UploadLists">
        <tr>
            <td contenteditable style="" data-bind="text: name">
                <!-- <input data-bind="value: name" />--></td>
            <td style="padding: 5px"><i class="fa fa-2x fa-pencil-square-o"></i> <i class="fa fa-2x fa-times emeraldgreen remove" data-bind="click: $root.removeFile">
                                        </i>

            </td>
        </tr>
    </tbody>
</table>

CSS

[contenteditable="true"]:active,
[contenteditable="true"]:focus{
border:none;
outline:none;
}
[contenteditable="true"]:focus::before{
content:"Edit Me!";
}

JavaScript

var fid = 0;
var fileName = '';
var ILCount = 0;
var FilesCount = 0;

function Filepath(name) {
    var self = this;
    self.name = name;
}
var InvoiceVM = function () {
    var self = this;

    self.UploadLists = ko.observableArray();

    self.addFiles = function () {
        var prevFile = $('.inputFile').last().val();
        alert(prevFile);
        if ($('.inputFile').last().val() == '') {
            alert("No files have been selected.");
        } else {
            if ($('.inputFile').last().val().trim() != '') {
                var extension = prevFile.substr((prevFile.lastIndexOf('.') + 1));
                var arr = prevFile.split('.');

                var _validFileExtensions = ["jpg", "jpeg", "bmp", "gif", "png", "doc", "docx", "ppt", "pptx", "html", "pdf", "txt", "xls", "xlsx", "log", "msg", "rtf"];
                var blnValid = false;
                for (var j = 0; j < _validFileExtensions.length; j++) {
                    var sCurExtension = _validFileExtensions[j];
                    if (arr[arr.length - 1].toLowerCase() == sCurExtension) {
                        blnValid = true;
                        break;
                    }
                }
                if (!blnValid) {
                    alert("Please attach file with proper extension");

                } else {
                    self.UploadLists.push(new Filepath(prevFile));
                    $('.inputFile').val('');
                    chkFileStatus = 1;

                }
            }

        }
    }
    self.ifFileAdded = ko.observable();
    self.ifFileAdded.subscribe(function (newValue) {
        return false;
    });

    self.removeFile = function (file) {
        // if (self.UploadLists().length != 1) {
        self.UploadLists.remove(file)
        // }
    }

}

$(document).ready(function () {
    MainFunction();
});

function MainFunction() {
    _vm = new InvoiceVM();
    ko.applyBindings(_vm);

}