Monday, 6 June 2016

Example of kendo multiple file upload control

 @using (Html.BeginForm("Save", "Banner", FormMethod.Post, new { @enctype = "multipart/form-data", @id = "frmAddImage" }))
    {
        @Html.AntiForgeryToken()

        <div class="col-lg-12 zero-padding ">


            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            @{
        if (Model.Mark == 1)
        {
            <div class="form-group" style="position:relative">

                @Html.LabelFor(model => model.PictureId, htmlAttributes: new { @class = "" })<span class="mandatory"><b>*</b></span>


                <div class="options documentUpload pull-left" style="margin-bottom:0!important; padding-bottom:0!important">

                    <div style="position:relative;margin-top:-48px">
  @Html.TextBoxFor(model => model.Pictures, new { @class = "form-control", @type = "file" })</div>
                    <div class="clearfix"></div>
                    <div style="position:relative; margin-top:30px"> @Html.ValidationMessageFor(model => model.PictureId, "", new { @class = "text-danger", @id = "lbPid" })</div>
                </div>

            </div>
        }
            }


<script type="text/javascript">
    $(function () {

        $("#Pictures").kendoUpload({
            multiple: true,
            select: onSelect
        });
 var m=0;
        function onSelect(e)
        {
            $.each(e.files, function (index, value) {
                if (value.extension.toLowerCase() == ".jpg"
                || value.extension.toLowerCase() == ".jpeg"
                || value.extension.toLowerCase() == ".png"
                || value.extension.toLowerCase() == ".gif"
                || value.extension.toLowerCase() == ".bmp")
                {
                    m = 0;

                }

                else {

                    m = 1;
                 

                }


            });
            if (m == 1)
            {
                $('#lbPid').text('Please upload valid picture .');
                $("#Pictures").focus();
            }
            else {
                $('#lbPid').text('');
            }

        }
// require validation
 if ($("#Pictures").data("kendoUpload").wrapper.find(".k-file").length == 0)
                {
                    $('#lbPid').text('Please select a Picture .');
                    check = 1;
                }
        $("#Title").focus(function(){
           var extension;
           $(".k-upload-files").find("li").each(function(i,j){
               extension =$(j).text().split(".");
                if(extension[1].toLowerCase() == ".jpg"
               || extension[1].toLowerCase() == ".jpeg"
               || extension[1].toLowerCase() == ".png"
               ||extension[1].toLowerCase() == ".gif"
               || extension[1].toLowerCase() == ".bmp")
               {}
                else
               {
                   $(j).remove();
               }
            });
        });
</script>


controller :

 public ActionResult Save(BannerVM bannerVM)
        {
            BannerModel bannerModel = new BannerModel();
         
                if (ModelState.IsValid)
                {
//list<HttpPostedFileBase >  Pictures = new list<HttpPostedFileBase >();
                    foreach (HttpPostedFileBase ImageData in bannerVM.Pictures)
                    {
                        byte[] StoreData = new byte[ImageData.InputStream.Length];
                        ImageData.InputStream.Read(StoreData, 0, StoreData.Length);
                        bannerModel.Title = bannerVM.Title;
                        bannerModel.StatusID = bannerVM.StatusID;
                        bannerModel.DisplayOrder = (bannerVM.DisplayOrder == null ? 1 : bannerVM.DisplayOrder);
                        bannerModel.Description = bannerVM.Description;
                        bannerModel.PictureId = _pictureService.InsertPicture(StoreData, ImageData.ContentType, Path.GetFileName(ImageData.FileName), true).Id;
                        bannerModel.IsPublish = bannerVM.IsPublish;
                        bannerModel.CreatedBy = EngineContext.Current.Resolve<IWorkContext>().CurrentCustomer.Id;
                        bannerModel.CreatedDate = DateTime.UtcNow;
                        bannerModel.IsDeleted = bannerVM.IsDeleted;
                        _bannerService.SaveBanner(bannerModel.ToEntity());
                    }
                }
           

No comments:

Post a Comment