Custome Controller file upload with file list in MVC Rozer

by RaviMakwana

HTML

<div id="banner-message">
  <div class="form-group">
            <h5 class="control-label col-md-2"> <b> ASL Attachment </b> </h5>
            <div class="col-md-4">
                @HTMLHelper.GenerateFileUploader(Model.ASLNumber, "ASLAttachment", ViewBag.lstAttachment, @Constants.TypeASLAttechment.Buyer)
            </div>

            <h5 class="control-label col-md-2"></h5>
            <div class="col-md-4">
            </div>
        </div>
</div>

C# 
// ------------------------ //


public static class HTMLHelper
    {
        public static IHtmlString GenerateFileUploader(int ASLNumber, string FieldName, List<ASLAttechment> data, string AttachmentType, string Access = "FULL")
        {
            string htmlContent = "";
            if (Access == "FULL")
            {
                htmlContent = string.Format("<div class=\"input-group\">"
                    + "<div class=\"input-group-btn\"><a href=\"javascript:FileUpload('{1}',{0},'{3}');\" class=\"btn btn-default form-control\" title=\"Upload Files\"><i class=\"fa fa-upload\"></i></a></div>"
                    + "<input type=\"file\" id=\"{1}\" class=\"form-control\" multiple />"
                    + "<div class=\"input-group-btn\"><a data-toggle=\"collapse\" data-target=\"#{1}_Files\" class=\"btn btn-default form-control\" title=\"Show Files\"><i class=\"fa fa-eye\"></i></a></div>"
                    + "</div>"
                    + "<ul id=\"{1}_Files\" class=\"list-group list-group-flush collapse in\">{2}</ul>", ASLNumber, FieldName, HTMLHelper.GenerateFileList(data), AttachmentType);
            }
            else // Download or View only case
            {
                htmlContent = string.Format("<ul id=\"{0}_Files\" class=\"list-group list-group-flush collapse\">{1}</ul>", FieldName, HTMLHelper.GenerateFileList(data, Access));
            }
            return new MvcHtmlString(htmlContent);
        }

        public static IHtmlString GenerateFileList(List<ASLAttechment> data, string...

CSS

public partial class ASLAttechment
    {
        public int Id { get; set; }
        public Nullable<int> ASLNo { get; set; }
        public string FileName { get; set; }
        public string FileDataType { get; set; }
        public byte[] FileData { get; set; }
        public string Type { get; set; }
    }

JavaScript

// ----- File Operation ----- //
var IsFileUploaded = false;
function FileUpload(inputFileID, alsNo, Attachmenttype) {

    if (window.FormData !== undefined) {

        var fileUpload = $("#" + inputFileID).get(0);
        var files = fileUpload.files;

        // Create FormData object
        var fileData = new FormData();
        fileData.append("asl", alsNo);
        fileData.append("Type", Attachmenttype);
        // Looping over all files and add it to FormData object
        for (var i = 0; i < files.length; i++) {
            fileData.append(files[i].name, files[i]);
        }

        $.ajax({
            url: SitePreFix + '/Common/UploadFiles',
            type: "POST",
            contentType: false, // Not to set any content header
            processData: false, // Not to process data
            data: fileData,
            success: function (result) {
                if (result.htmlContent) {
                    $('#' + inputFileID + '_Files').find('.empty').remove();
                    $('#' + inputFileID + '_Files').append(result.htmlContent);
                    $('#' + inputFileID + '_Files').removeClass("collapse");
                    $("#" + inputFileID).val('');
                    IsFileUploaded = true;
                }
                if (result.message)
                    $.toaster(result.message, '', 'danger');
            },
            error: function (err) {
                $.toaster('Send Requiest Fail!', 'Error', 'danger');
            }
        });
    } else {
        //   alert("FormData is not supported.");
    }

}
function fileDelete(AttachmentID) {
    debugger
    if (localStorage["IsShowFileDeleteConfirm"] == "false") {
        _fileDelete(AttachmentID)
    } else {
        bootbox.confirm("Are you sure you want to delete this file? <br/> <label><input type='checkbox' onclick='localStorage[\"IsShowFileDeleteConfirm\"]= !this.checked ' /> Do not show this again.</label>", function (result) {
            if (result)
     ...