Upload and view files from Azure
Upload and view files from Azure
Greg Brainerd
Posts: 9Questions: 1Answers: 0
in DataTables
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);
}
}
This discussion has been closed.
Replies
Forgot to add the HTML
Awesome - thanks for sharing this with everyone!
Allan