Thursday, 5 December 2013

upload file in mvc 3.0

just create Controller with name Emp

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.IO;
using fileuploadmvc.Models;

namespace fileuploadmvc.Controllers
{
    public class EmpController : Controller
    {
        //
        // GET: /Emp/

        public ActionResult Index()
        {
            return View();
        }

        public ActionResult FileUpload()
        {
            return View();
        }

        [HttpPost]
        public ActionResult FileUpload(RegistrationModel mRegister)
        {
            //Check server side validation using data annotation
            if (ModelState.IsValid)
            {
                //TO:DO
                var fileName = Path.GetFileName(mRegister.file.FileName);
                var path = Path.Combine(Server.MapPath("~/Content/Upload"), fileName);
                mRegister.file.SaveAs(path);
                ViewBag.Message = "File has been uploaded successfully";
                ModelState.Clear();

            }
            return View();
        }

    }
}
-----------------------------------------------------------------------------------------------------------------
then Add model RegistrationModel

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel.DataAnnotations;

namespace fileuploadmvc.Models
{
    public class RegistrationModel
    {
        [Required(ErrorMessage = "Please Enter Your Full Name")]
        [Display(Name = "Full Name")]
        public string Name { get; set; }
        [Required(ErrorMessage = "Please Enter Address")]
        [Display(Name = "Address")]
        [MaxLength(200)]
        public string Address { get; set; }
        [Required(ErrorMessage = "Please Upload File")]
        [Display(Name = "Upload File")]
        [ValidateFile]
        public HttpPostedFileBase file { get; set; }
    }
    public class ValidateFileAttribute : ValidationAttribute
    {
        public override bool IsValid(object value)
        {
            int MaxContentLength = 1024 * 1024 * 3; //3 MB
            string[] AllowedFileExtensions = new string[] { ".jpg", ".gif", ".png", ".pdf" };
            var file = value as HttpPostedFileBase;
            if (file == null)
                return false;
            else if (!AllowedFileExtensions.Contains(file.FileName.Substring(file.FileName.LastIndexOf('.'))))
            {
                ErrorMessage = "Please upload Your Photo of type: " + string.Join(", ", AllowedFileExtensions);
                return false;
            }
            else if (file.ContentLength > MaxContentLength)
            {
                ErrorMessage = "Your Photo is too large, maximum allowed size is : " + (MaxContentLength / 1024).ToString() + "MB";
                return false;
            }
            else
                return true;
        }
    }
}
--------------------------------------------------------------------------------------------------------------
@model fileuploadmvc.Models.RegistrationModel
@{
    ViewBag.Title = "Index";
}
<script src="../../Scripts/modernizr-1.7.min.js" type="text/javascript"></script> 
<script src="../../Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<script type="text/jscript">
    //get file size
    function GetFileSize(fileid) {
        try {
            var fileSize = 0;
            //for IE
            if ($.browser.msie) {
                //before making an object of ActiveXObject,
                //please make sure ActiveX is enabled in your IE browser
                var objFSO = new ActiveXObject("Scripting.FileSystemObject"); var filePath = $("#" + fileid)[0].value;
                var objFile = objFSO.getFile(filePath);
                var fileSize = objFile.size; //size in kb
                fileSize = fileSize / 1048576; //size in mb
            }
            //for FF, Safari, Opeara and Others
            else {
                fileSize = $("#" + fileid)[0].files[0].size //size in kb
                fileSize = fileSize / 1048576; //size in mb
            }

            return fileSize;
        }
        catch (e) {
            alert("Error is :" + e);
        }
    }

    //get file path from client system
    function getNameFromPath(strFilepath) {

        var objRE = new RegExp(/([^\/\\]+)$/);
        var strName = objRE.exec(strFilepath);

        if (strName == null) {
            return null;
        }
        else {
            return strName[0];
        }

    }

    $(function () {
        $("#file").change(function () {
            var file = getNameFromPath($(this).val());
            if (file != null) {
                var extension = file.substr((file.lastIndexOf('.') + 1));
                switch (extension) {
                    case 'jpg':
                    case 'png':
                    case 'gif':
                    case 'pdf':
                        flag = true;
                        break;
                    default:
                        flag = false;
                }
            }
            if (flag == false) {
                $(".lifile > span").text("You can upload only jpg,png,gif,pdf extension file");
                return false;

            }
            else {
                var size = GetFileSize('file');
                if (size > 3) {
                    $(".lifile > span").text("You can upload file up to 3 MB");
                }
                else {
                    $(".lifile > span").text("");
                }
            }
        });

    });

</script>
<h2>File upload with model validation</h2>

<h3 style="color: green">@ViewBag.Message</h3>

@using (Html.BeginForm("FileUpload", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <fieldset>
        <legend></legend>
        <ol>
            <li>
                @Html.LabelFor(m => m.Name)
                @Html.TextBoxFor(m => m.Name, new { maxlength = 50 })
                @Html.ValidationMessageFor(m => m.Name)
            </li>
            <li>
                @Html.LabelFor(m => m.Address)
                @Html.TextAreaFor(m => m.Address, new { maxlength = 200 })
                @Html.ValidationMessageFor(m => m.Address)
            </li>
            <li class="lifile">
                @Html.TextBoxFor(m => m.file, new { type = "file" })
                @Html.ValidationMessageFor(m => m.file)
            </li>
        </ol>
        <input type="submit" value="Submit" />
    </fieldset>
}
--------------------------------------------------------------------------------------------------------------

output look like this:



My MVC Application

[ Log On ]

File upload with model validation

  1. Please Enter Your Full Name
  2. Please Enter Address
  3. Please Upload File




No comments:

Post a Comment