PreviewFile ,removeSelectedFile Knockout

   //Preview File from Upload File Grid

    self.PreviewFile = function (Url) {

        var filePath = "/UPLOADS/AllocationRequest/";

        if (typeof (Url) === 'function') {

            filePath += Url();

        }

        else {

            filePath += Url

        }

        OpenImageInNewWindow(filePath);

    };

self.removeSelectedFile = function (selectedFile)

    {

        self.AllocationRequestDocumentArray.remove(selectedFile);

        ////self.AllocationRequestDocuments.remove(selectedFile);

    }

    // ------------------File Upload Pop up settings -- This section should be in the begining

    self.FileUploadVM = ko.observable();

    //self.FileUploadVM2 = ko.observable();

    //self.FileUploadVM3 = ko.observable();

   

    self.FileUploadSettings = function () {

        self.FileUploadVM = new CommonFileUploadVM(self.AddFile);

        self.FileUploadVM.ServerFolder("AllocationRequest");

      

        //self.FileUploadVM2 = new CommonFileUploadVM(self.SecondAddFile);

        //self.FileUploadVM2.DivName("SecondDivUploader");

        //self.FileUploadVM2.DivPreviewName("SecondDivUploaderPreivew");

        //self.FileUploadVM2.ServerFolder("ExchangeRequest2");

        //self.FileUploadVM3 = new CommonFileUploadVM(null);

        //self.FileUploadVM3.DivName("divup2");

        //self.FileUploadVM3.DivPreviewName("3DivUploaderPreivew");

        //self.FileUploadVM3.ServerFolder("ExchangeRequest");

        //self.FileUploadVM3.ServerFolder("ExchangeRequest");

        //self.FileUploadVM3.LabelName("Agreement File:");//Arabic Label

       

        

    }

    self.SetFileUploader = function () {

        self.FileUploadVM.SetFileUploaderDiv();

        //self.FileUploadVM2.SetFileUploaderDiv();

        //self.FileUploadVM3.SetFileUploaderDiv();

    }

    self.AddFile = function () {

        //alert(self.FileUploadVM.FileName() + "---" + self.FileUploadVM.DocumentName());

        //$('#add-001').modal('hide');

        var allocationRequestDocumentDTO = new AllocationRequestDocumentDTO(new Object());

        allocationRequestDocumentDTO.RequestDocumentId(0);

        allocationRequestDocumentDTO.RequestDocumentName(self.FileUploadVM.DocumentName());

        allocationRequestDocumentDTO.RequestDocumentPath(self.FileUploadVM.FileName());

        allocationRequestDocumentDTO.ServerFolder(self.FileUploadVM.ServerFolder());

        allocationRequestDocumentDTO.ServerRootFolder(self.FileUploadVM.ServerRootFolder());

        self.AllocationRequestDocumentArray.push(allocationRequestDocumentDTO);

        self.FileUploadVM.DocumentName('');

        self.FileUploadVM.FileName('');

       // alert(self.FileUploadVM.DivPreviewName());

        document.getElementById(self.FileUploadVM.DivPreviewName()).innerHTML = '';

    }

   owner.SetFileUploader();

Popup Code

<div class="row">

    <div class="col-xs-6  col-sm-3 ">

        <label class="center blue border">  مستندات :</label>

    </div>

    <div class="col-xs-6  col-sm-9 ">

        <div class="row">

            <div class="col-xs-12 col-sm-9">

                <div class="table-responsive" style=" margin-top: 5px">

                    <table class="table table-hover  table-bordered">

                        <thead>

                        <th class="blue "><center>م </center></th>

                        <th class="blue "><center>المستندات </center></th>

                        <th class="blue " style="width: 50px"></th>

                        <th class="blue " style="width: 50px"></th>

                        </thead>

                        <tbody class="center" data-bind="foreach: AllocationRequestDocumentArray">

                            <tr>

                                <td data-bind="text: $index() + 1">

                                    <input type="hidden" data-bind="    value: RequestDocumentId" class="form-control input-xs col-sm-12" />

                                </td>

                                <td data-bind="text: RequestDocumentName" style="word-break:break-all;">

                                    <input type="hidden" data-bind="    value: RequestDocumentPath" class="form-control input-xs col-sm-12" />

                                </td>

                                <td>

                                    <center>

                                        <a href="#" data-bind="click: function () { $parent.PreviewFile($data.RequestDocumentPath) }">

                                            <span class="glyphicon glyphicon-search"></span>

                                        </a>

                                        @*<a href="#" data-bind="click:  ViewFile.bind($data)">

                                            <span class=" glyphicon glyphicon-search"></span>

                                        </a>*@

                                    </center>

                                </td>

                                <td>

                                    <center>

                                        @*<a href="#" data-bind="click: function () { $parent.RemoveSelectedFile($data) }">

                                            <span class="glyphicon glyphicon-remove"></span>

                                        </a>*@

                                        <a href="#" data-bind="click: function () { $parent.RemoveSelectedFile($data) }, visible: $parent.PageMode !=1"><span class=" glyphicon glyphicon-remove"></span> </a>

                                    </center>

                                </td>

                            </tr>

                        </tbody>

                    </table>

                </div>

            </div>

            <div class="col-xs-12 col-sm-3">

                <a href="#" data-toggle="modal" data-target="#add-File" data-bind=" disable: PageMode() ==1">

                    <button class="btn btn-primary btn-sm col-sm-12" data-bind=" disable: PageMode() ==1" data--bind="visible:PageMode()==2" >اضافة اسم مستند جديد</button>

                </a>

                @*<a href="#" data-toggle="modal" data-target="#add-File">

                    <button class="btn btn-primary btn-sm col-sm-12" data-bind="click: SelectFileUpload">اضافة اسم مستند جديد</button>

                </a>*@

                @*<a href="#" data-toggle="modal" data-target="#add-002">

                        <button class="btn btn-danger btn-sm col-sm-12"> تحميل مستند جديد</button>

                    </a>*@

            </div>

        </div>

    </div>

</div>