Monday 16 October 2017

Video upload in mvc using kendo ui


these two code need to add in web.config to order set max length 100mb
====
<configuration> 
... 
<system. web>

<httpRuntime maxRequestLength="102400" executionTimeout="3600" />

...

</system .web>

</configuration>
===========
<system.webServer>
    <security>
        <requestFiltering>
            <requestLimits maxAllowedContentLength="104857600"/>
        </requestFiltering>
    </security>
</system.webServer> 
In view
<body>
    <div>
        <video id="output" width="400" controls="controls">
            <source src="#" type="video/mp4">
        </video>
        @(Html.Kendo().Upload()
                    .Name("files").Multiple(false)
                            .Events(events => events
                        .Select("onSelect"))
                    .Async(a => a
                        .Save("Save", "Video") .AutoUpload(true))
        )
    </div>
</body>
<script>
    function onSelect(e) {
        debugger
        var output = document.getElementById('output');
        output.src = URL.createObjectURL(event.target.files[0]);
    }
</script>

In controller
public ActionResult Save(IEnumerable<HttpPostedFileBase> files)
        {          
            // The Name of the Upload component is "files"
            if (files != null)
            {
                foreach (var file in files)
                {
                    //var fileName = Path.GetFileName(file.FileName);
                    //var physicalPath = Path.Combine(Server.MapPath("~/App_Data"), fileName);
                    var fileName = Path.GetFileName(file.FileName);
                    var physicalPath = Path.Combine(Server.MapPath("~/Images"), fileName);
                    var fileExtension = Path.GetExtension(file.FileName);
                    Session["Path"] = "~/Images/" + fileName;
                    file.SaveAs(physicalPath);
                }
            }
            // Return an empty string to signify success
            return Content("");
        }

Reference


No comments:

Post a Comment