Upload and view files from Azure

Greg Brainerd

Got Datatables to work with Azure files and wanted to share. This assumes you have an Azure blob subscription.

In the web.config I have a few variables defined under the <appSettings> section. The StorageConnectionString, and my file path.

<appSettings>
    <add key="StorageConnectionString" value="DefaultEndpointsProtocol=https;AccountName=myAccountName;AccountKey=YouRBlobKey==" />
    <add key="filesPathRoot" value="files/" />
</appSettings>

Here is the CSS I used, it's included in the editor.dataTables.min.css, I made a few minor modifications

div.DTE div.editor_upload {
    padding-top: 4px
}
div.DTE div.editor_upload div.eu_table {
    display: table;
    width: 100%
}
div.DTE div.editor_upload div.row {
    display: table-row
}
div.DTE div.editor_upload div.cell {
    display: table-cell;
    position: relative;
    width: 50%;
    vertical-align: top
}
div.DTE div.editor_upload div.cell+div.cell {
    padding-left: 10px
}
div.DTE div.editor_upload div.row+div.row div.cell {
    padding-top: 10px
}

div.DTE div.editor_upload button.btn
{
    color:white;
    background-color:#428bca;
}

div.DTE div.editor_upload button.btn:hover
{
    color:white;
    background-color:#286090;
}

div.DTE div.editor_upload input[type=file] {
    width: 100%;
    height: 2.3em;
    font-size: 0.8em;
    text-align: center;
    line-height: 1em
}
div.DTE div.editor_upload input[type=file] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0
}
div.DTE div.editor_upload div.drop {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border: 3px dashed #ccc;
    border-radius: 6px;
    min-height: 4em;
    color: #999;
    padding-top: 3px;
    text-align: center
}
div.DTE div.editor_upload div.drop.over {
    border: 3px dashed #111;
    color: #111
}
div.DTE div.editor_upload div.drop span {
    max-width: 75%;
    font-size: 0.85em;
    line-height: 1em
}
div.DTE div.editor_upload div.rendered img {
    max-width: 8em;
    margin: 0 auto
}
div.DTE div.editor_upload.noDrop div.drop {
    display: none
}
div.DTE div.editor_upload.noDrop div.row.second {
    display: none
}
div.DTE div.editor_upload.noDrop div.rendered {
    margin-top: 10px
}
div.DTE div.editor_upload.noClear div.clearValue button {
    display: none
}
div.DTE div.editor_upload.multi div.cell {
    display: block;
    width: 100%
}
div.DTE div.editor_upload.multi div.cell div.drop {
    min-height: 0;
    padding-bottom: 5px
}
div.DTE div.editor_upload.multi div.clearValue {
    display: none
}
div.DTE div.editor_upload.multi ul {
    list-style-type: none;
    margin: 0;
    padding: 0
}
div.DTE div.editor_upload.multi ul li {
    position: relative;
    margin-top: 0.5em
}
div.DTE div.editor_upload.multi ul li:first-child {
    margin-top: 0
}
div.DTE div.editor_upload.multi ul li img {
    vertical-align: middle
}
div.DTE div.editor_upload.multi ul li button {
    position: absolute;
    width: 40px;
    right: 0;
    top: 50%;
    margin-top: -1.5em
}

HTML/Javascript

<script type="text/javascript" language="javascript" class="init">
var editor; 

$(document).ready(function() {
    editor = new $.fn.dataTable.Editor( {
        ajax: "/settings/Upload?str=myparameters",
        table: "#example",
        fields: [ {
                label: "Company name:",
                name: "CompanyName"
            },
            {
                label: "Image:",
                name: "Image",
                type: "upload",
                display: function ( file_id ) {
                    return '<img src="'+ file_id +'"/>';
                },
                //clearText: "Clear",
                //noImageText: 'No image'
            }
        ]
    } );

    var table = $('#example').DataTable( {
        dom: "Bfrt",
        ajax: "/settings/Upload?str=myparameters",
        columns: [
            { data: "CompanyName" },
            {
                data: "Image",
                render: function ( file_id ) {
                    return file_id ?
                        '<img src="' + file_id + '"/>' :
                        null;
                },
                defaultContent: "No image",
                title: "Image",
            }
        ],
        select: true,
        buttons: [
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor }
        ]
    });
});
</script>

Here is the controller that I am using

[AcceptVerbs(HttpVerbs.Get | HttpVerbs.Post)]
        public ActionResult Upload(string str)
        {
            //this request is needed for the datatable upload function.
            var request = System.Web.HttpContext.Current.Request;
            var settings = Properties.Settings.Default;

           //gets variables from web.config
            CloudStorageAccount storageAccount = CloudStorageAccount.Parse(CloudConfigurationManager.GetSetting("StorageConnectionString"));
            CloudBlobClient blobClient = storageAccount.CreateCloudBlobClient();
            CloudBlobContainer container = blobClient.GetContainerReference("websites");
            string filePathRoot = CloudConfigurationManager.GetSetting("filesPathRoot");
            CloudBlobDirectory cloudBlobDirectory = container.GetDirectoryReference(filePathRoot);
            string uploadedFile = "";

            using (var db = new Database(settings.DbType, settings.DbConnection))
            {
                Editor editor = new Editor(db, "Company_tbl", "CompanyID").Model<CompanyInfo>();
                editor
                    .Where("Company_tbl.CompanyID", CompanyID)
                    .Model<CompanyInfo>()
                    .TryCatch(false)
                    .Field(new Field("CompanyName"))
                    .Field(new Field("Image")
                       .Xss(false)
                       .Upload(new Upload((file, id) =>
                       {
                           var UploadFile = file.FileName;
                           CloudBlockBlob blockBlob = cloudBlobDirectory.GetBlockBlobReference(UploadFile);
                           dynamic sasToken =
                           blockBlob.GetSharedAccessSignature(new SharedAccessBlobPolicy
                           {
                              //set read permission and expiration on file. Expiration here is forever
                               Permissions = SharedAccessBlobPermissions.Read,
                               SharedAccessExpiryTime = DateTime.MaxValue.ToUniversalTime()
                           });
                           using ((file.InputStream))
                           {
                               blockBlob.UploadFromStream(file.InputStream);
                           }
                           //add sasToken to the URL and store in the database.
                           uploadedFile = blockBlob.Uri.AbsoluteUri + sasToken;
                           
                           return uploadedFile;
                       })
                       .AllowedExtensions(new string[] { ".png", ".jpg", ".gif" }, "Please upload an image file")
                       .Validator(file => {
                           if (file.ContentLength >= 500000)
                           {
                               return "Files must be smaller than 500K";
                           }
                           return null;
                       })
                       )
                       .SetFormatter(Format.NullEmpty())
                       
                       );

                return Json(editor.Process(request).Data(), JsonRequestBehavior.AllowGet);
            }
        }

Greg Brainerd

Forgot to add the HTML

<div class="row" style="padding-top:20px;">
    <div class="col-sm-12 table-responsive1">
        <!-- START panel-->
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="table-responsive">
                    <table id="example" cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" width="100%">
                        <thead>
                            <tr>
                                <th>Company Name</th>
                                <th>Image</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

allan

Awesome - thanks for sharing this with everyone!

Allan