forum

home / developersection / forums / attach multiple files gridview row in knockout js

Ask Question

Attach multiple files gridview row in knockout js

Anonymous User 2482 22-Feb-2016
we want to Attach multiple files gridview row in knockout js. how it is possible please help me. 
javascript jquery  mvc  knockout.js 
Updated on 22-Feb-2016
Anonymous User

Other

I am a content writter !

Follow
Can you answer this question?
Answer

1 Answers

Anonymous User

Anonymous User

22-Feb-2016

Hi '

we are providing code shown is below. I hope to help you.

Index.cshtml

@{
    ViewBag.Title = "View2";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>View2</h2>
<style>
    .ui-progressbar, .progressDiv {
        position: relative;
    }
    .progress-label {
        position: absolute;
        left: 50%;
        top: 4px;
        font-weight: bold;
        text-shadow: 1px 1px 0 #fff;
    }
    input[type="file"] {
        opacity: 0;
    }
    #file {
        background: url('images/folder_open-add.png') 0 0 no-repeat;
        width: 100%;
        height: 32px;
        position: relative;
        overflow: hidden;
    }
        #file label {
            padding: 0 0 0 35px;
            color: green;
            width: 100%;
        }
        #file .fileInput {
            line-height: 35px;
            left: 0;
            position: absolute;
            width: 35px;
        }
</style>
<script src="~/Scripts/knockout-3.4.0.js"></script>
<script type="text/javascript">
    function tableRow(guid, fileName, fileUrl, arrayFile) {
        var self = this;
        self.Guid = ko.observable(guid);
        self.FileName = ko.observable(fileName);
        self.FileUrl = ko.observable(fileUrl);
        self.FileList = ko.observableArray([]);
    }
    function fileModel(fileName, extention, filepath, guid) {
        var self = this;
        self.Guid = ko.observable(guid);
        self.FileName = ko.observable(fileName);
        self.Extention = ko.observable(extention);
        self.FilePath = ko.observable(filepath);
    }
    function tableRowsViewModel() {
        var self = this;
        self.tableRows = ko.observableArray();
        self.arrayNew = ko.observableArray();
        self.addNewRow = function () {
            self.tableRows.push(new tableRow(Math.random().toString(36).substring(9), '', '', []));
        }
        self.save = function () {
            $.post("/Home/Save", { obj: ko.toJSON(this.tableRows()) }, function (data) {
                console.log(JSON.stringify(this.tableRows()));
            });
        },
        self.select = function () {
            $('#inputFile').attr("data", this.Guid());
            var Gid = this.Guid()
            var findItem = ko.utils.arrayFilter(vm.tableRows(), function (item) {
                return (item.Guid() === Gid);
            });
            self.arrayNew.removeAll();
            findItem[0].FileList().forEach(function (item) {
                self.arrayNew.push(item);
            });
            var dialog
            dialog = $("#dialog-form").dialog({
                autoOpen: false,
                height: 300,
                width: 350,
                modal: true,
                buttons: {
                    Ok: function () {
                        dialog.dialog("close");
                    }
                }
            });
            dialog.dialog("open");
            self.remove = function (item) {
                if (!confirm("Do you want to delete")) {
                    return false;
                }
                $.post("/Home/Remove", { obj: ko.toJSON(item) }, function (data) {
                    self.tableRows.remove(item);
                });
            }
        },

        self.selected = function (data, event) {
            $('#progressDiv').progressbar({
                value: 10,
                max: 100,
                change: function (e) {
                    $('.progress-label').text($('#progressDiv').progressbar("value") + "%");
                }
            });
 
            var path = $("#inputFile").val();
            var formData = new FormData();
            var file = document.getElementById("inputFile").files[0];
            formData.append("file", file);
            var divElem = $('#progressDiv');
            $.ajax({
                type: "POST",
                url: '/Home/UploadImage',
                data: formData,
                dataType: 'json',
                contentType: false,
                processData: false,
                success: function (response) {
                    var findItem = ko.utils.arrayFilter(vm.tableRows(), function (item) {
                        return (item.Guid() === $("#inputFile").attr("data"));
                    });
                    console.log(response.Extention);
                    findItem[0].FileList.push(new fileModel(response.FileName, response.Extention, response.FilePath, response.Guid));
                    self.arrayNew.push(new fileModel(response.FileName, response.Extention, response.FilePath, response.Guid));
                    $("#progressDiv").progressbar("destroy");
                    $('.progress-label').text('');
                    $("#inputFile").val('');
                },
                xhr: function () {
                    var xhr = $.ajaxSettings.xhr();
                    if (xhr.upload) {
                        xhr.upload.addEventListener('progress', function (evt) {
                            var percent = Math.floor((evt.loaded / evt.total) * 100);
                            divElem.progressbar("value", percent);
                        }, false);
                    }
                    return xhr;
                },
                error: function (error) {
                    alert("errror");
                }
            });
 
 
        };
        self.RemoveImage = function (file) {
            if (!confirm("Do you want to delete")) {
                return false;
            }
            var Gid = $('#inputFile').attr("data");
            var findItem = ko.utils.arrayFilter(vm.tableRows(), function (item) {
                return (item.Guid() === Gid);
            });
           
            $.ajax({
                type: "POST",
                data:{ guid: file.Guid(), extention: file.Extention() },
                url: "@Url.Action("RemoveImage", "Home")",
                success: function (data) {
                    findItem[0].FileList.removeAll();
                    self.arrayNew.remove(file);
                    self.arrayNew().forEach(function (item) {
                        findItem[0].FileList.push(item);
                    });
                },
                error: function (error) {
                    alert(error.status + "<--and--> " + error.statusText);
                }
            });
          @*  $.post("@Url.Action("RemoveImage", "Home")", { guid: file.Guid(), extention: file.Extention() }, function (data) {
                console.log(data);
                findItem[0].FileList.removeAll();
                self.arrayNew.remove(file);
                self.arrayNew().forEach(function (item) {
                    findItem[0].FileList.push(item);
                });
            })*@
 
        };
    }
    var vm = new tableRowsViewModel();
    $(document).ready(function () {
        ko.applyBindings(vm);
    });
</script>
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">File Upload</a></li>
    </ul>
    <div id="tabs-1">
        <table>
            <thead>
                <tr>
                    <th>Guid
                    </th>
                    <th>FileName
                    </th>
                    <th>FileUrl
                    </th>
                    <th>Attech
                    </th>
                    <th>Action
                    </th>
                </tr>
            </thead>
            <tbody data-bind="foreach: tableRows">
                <tr>
                    <td>
                        <input type="text" style="width: 100px;" data-bind="value: Guid" />
                    </td>
                    <td>
                        <input type="text" style="width: 100px;" data-bind="value: FileName" />
                    </td>
                    <td>
                        <input type="text" style="width: 100px;" data-bind="value: FileUrl" />
                    </td>
                    <td>
                        <button type="button" data-bind="click: $root.select">
                            Select File
                        </button>
                    </td>
                    <td>
                        <button type="button" data-bind="click:$root.remove">
                            Delete
                        </button>
                    </td>
                </tr>
                   <tr>
                    <td colspan="4">
                        <table>
                            <tbody data-bind="foreach: FileList">
                                <tr>
                                    <td data-bind="text: FileName"></td>
                                     <td data-bind="text: Extention"></td>
                                </tr>
                            </tbody>

                        </table>
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="4">
                        <button type="button" data-bind="click: addNewRow">
                            add row
                        </button>
                        <button type="button" data-bind="click: save">
                            Save
                        </button>
                    </td>
                </tr>
            </tfoot>
        </table>
        <div>
            <div id="dialog-form" title="Upload File" style="display: none;">
                <input type="hidden" value="" id="hiddenid" />
                <div id='file'>
                    <label for="inputFile">
                        <input type="file" id='inputFile' class='fileInput' data="" data-bind="event:{change:selected}" />
                    </label>
                </div>
                @* <input type="file" name="file" id="file" data="" data-bind="event:{change:selected}" />*@
                <br />
                <table>
                    <tbody data-bind="foreach: arrayNew">
                        <tr>
                            <td data-bind="text: FileName"></td>
                            <td>
                                <button type="button" data-bind="click:$root. RemoveImage">
                                    X
                                </button>
                            </td>
                        </tr>
                    </tbody>

                </table>
                <div id="progressDiv">
                    <div class="progress-label"></div>
                </div>
            </div>
        </div>

    </div>
</div>
 
HomeController
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Script.Serialization;
using System.Web.UI.WebControls;
namespace ForceLMS_DEMO.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
        [HttpPost]
        public JsonResult Save(string obj = null)
        {
            JavaScriptSerializer Serializer = new JavaScriptSerializer();
            var selected = Serializer.Deserialize<List<tableRow>>(obj).ToList();
            foreach (tableRow re in selected)
            {
                foreach (FileList fe in re.FileList)
                {

                }
            }
 

            return Json("success", JsonRequestBehavior.AllowGet);
        }
        [HttpPost]
        public JsonResult Remove(string obj = null)
        {
            JavaScriptSerializer Serializer = new JavaScriptSerializer();
            var selected = Serializer.Deserialize<tableRow>(obj);
            
                foreach (FileList fe in selected.FileList)
                {
                    var fullPath = Path.Combine(Server.MapPath("~/Fileimg"),  fe.Guid + fe.Extention);
                    if (System.IO.File.Exists(fullPath))
                    {
                        System.IO.File.Delete(fullPath);
                        ViewBag.deleteSuccess = "success";
                    }
                 
                }
                return Json(new { message = ViewBag.deleteSuccess }, JsonRequestBehavior.AllowGet);
        }
        [HttpPost]
        public JsonResult UploadImage(HttpPostedFileBase file)
        {
            try
            {
                if (file != null)
                {
                    var fileName = Path.GetFileName(file.FileName);
                    var extention = Path.GetExtension(file.FileName);
                    var guid = Guid.NewGuid();
                    var path = Path.Combine(Server.MapPath("~/Fileimg"), guid + extention);
                    file.SaveAs(path);
                    return Json(new { Success = true, message = "success", FileName = fileName,Extention=extention, FilePath = path, Guid = guid }, JsonRequestBehavior.AllowGet);
                }
                else
                {
                    return Json(new { Success = false, message = "unsuccess" }, JsonRequestBehavior.AllowGet);
                }
            }
            catch (Exception ex)
            {
                return Json(new { success = false, message = ex.Message }, JsonRequestBehavior.AllowGet);
            }

        }
        [HttpPost]
        public JsonResult RemoveImage(string guid ,string extention)
        {
            ViewBag.deleteSuccess = "unsuccess";
            var photoName = "";
            photoName = guid;
            var fullPath = Path.Combine(Server.MapPath("~/Fileimg"), photoName + extention );
            if (System.IO.File.Exists(fullPath))
            {
                System.IO.File.Delete(fullPath);
                ViewBag.deleteSuccess = "success";
            }
            return Json(new { message = ViewBag.deleteSuccess }, JsonRequestBehavior.AllowGet);
        }
        public class tableRow
        {
            public string Guid { get; set; }
            public string FileName { get; set; }
            public string FileUrl { get; set; }
            public List<FileList> FileList { get; set; }
        }
        public class FileList
        {
            public string Guid { get; set; }
            public string FileName { get; set; }
            public string FilePath { get; set; }
            public string Extention { get; set; }
            
        }
    }
}
 
Result
 
Attach multiple files gridview row in knockout js 

 

MindStick Training
MindStick Training

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy