Uploading files with Froala in ASP.Net MVC

Froala was very straightforward to get up and running. Their documentation is pretty good but lacks an English version of the server integration for image/file uploads.

Ignoring the paste, here's a view of the simple upload of images/files. I have added a parameter to the method called location which lets me have the editor save files to different places depending on where the editor is.

[HttpPost]
[Route("content/uploadfile")]
public ActionResult UploadFile(string location, HttpPostedFileBase file)
{
    string fileName;
    try
    {
        // resourceService handles resizing image and saving to Azure blob storage.
        fileName = resourceService.AddFileInLocation(location, file);
    }
    catch (Exception ex)
    {
        return Json2(new { error = ex.Message });
    }
    // /resources/ proxies requests to assets
    var data = new { link = ("/resources/" + location + "/" + fileName).ToLower() };
    return Json2(data);
}

You may wonder what "Json2" is. In order for <IE9 to correctly interpret the response, you need a slightly different content type. If you send the response back as "application/json" Internet Explorer will prompt the user to open the "file"... Not exactly ideal. This gets round that:

private JsonResult Json2(object data)
{
    var returnAsText = Request.AcceptTypes == null 
            || !Request.AcceptTypes.Contains("application/json");

    return returnAsText ? Json(data, "text/plain") : Json(data);
}

Then it's a simple case of wiring up the endpoints in the JS:

$('.selector').editable({
    imageUploadURL: '/content/uploadfile',
    imageUploadParams: { location: 'content-page-images' }
});

The easiest way to save the file is by using.

file.SaveAs(/* some file path + name */);

However, my resourceService.AddFileInLocation squashes the image to a maximum size, uploads it to Azure Blob Storage with a generated filename and returns the filename of the newly created blob. I've also omitted various validation on the "location" parameter.

Comments

Post a Comment

Popular posts from this blog

Trimming strings in action parameters in ASP.Net Web API

In standard MVC it's very easy to create a model binder to trim all of the strings passed into action methods. The approach I used for that was from here:  http://blogs.taiga.nl/martijn/2011/09/29/custom-model-binders-and-request-validation/ . It works well and it trims the properties of models too. The problem came when I tried to do the same thing for Web API. I added a similar StringTrimmingBinder and registered it as a service using the very non-discoverable API: var provider = new SimpleModelBinderProvider( typeof ( string ),  new StringTrimmingModelBinder()); GlobalConfiguration.Configuration.Services.Insert( typeof (ModelBinderProvider),  0,  provider); As a side note, I have no idea how you're supposed to find out how to register a model binder without opening up Bing and Googling it. Anyway, this worked great when the parameters to the action were actually strings but doesn't work with complex types as parameters. Now, I'v...
Read more

Full text search in Entity Framework 6 using command interception

Image
Background One of the main problems we encountered using Entity Framework was its lack of support for full text search. Our search function is based around a series of processors that attempt to match the incoming phrase against a set of patterns that we're expecting (10+). For example, there's one for dates and times, recent financial quarters as well as more domain specific ones. Everything is cached and so is really fast, except when it isn't: Here's the monitoring chart for our SQL DB in Azure That's a spike to 100% resource utilisation because we fall through to a phrase search as a last resort (which cannot be cached) - it's exceedingly rare but it still hurts. Before EF, the app used full text search and it was one of the casualties when the app was migrated to EF4 several years ago. The lack of full text search has been getting more and more painful as the amount of data has grown. We really needed full text search back... Command intercept...
Read more

Composing Expressions in C#

This post follows on from  Reusing predicates in Entity Framework . In my previous post I introduced the "and" extension method which allowed me to create a new entity framework safe expression from two existing expressions. Here's how we make that happen: The code is from a blogpost from Colin Meek from 2008:  InvocationExpression and LINQ to Entities . I'll just dump my version of the code here. The idea is exactly the same (even using the visitor as an immutable stack): public class InvocationExpander : ExpressionVisitor { private readonly ParameterExpression _parameter; private readonly Expression _expansion; private readonly InvocationExpander _previous; public static T Expand<T>(T expr) where T : LambdaExpression { return (T) new InvocationExpander().Visit(expr); } public InvocationExpander() { } private InvocationExpander(ParameterExpression parameter, Expression expansion, Invocati...
Read more