Restrict Umbraco Media Filesize with JS

Hello all,
This is a very quick & brief blog post for a quick code snippet. I had a requirement today to at The CogWorks restrict file size upload for media items in Umbraco and to display a friendly error message.

For this to work easily, I created a .NET usercontrol with the following in:


<script type="text/javascript">
 //Go get file size from .config value in bytes
 var fileSizeToCheck = <%= ((HttpRuntimeSection) ConfigurationManager.GetSection("system.web/httpRuntime")).MaxRequestLength %>
</script>
<script type="text/javascript" src="/usercontrols/MediaFileSize/MediaFileSizeValidation.js"></script>

<div id="fileSize"></div>

The next part was to create a custom document type in Umbraco using the UserControl Wrapper method and pointing the datatype to my newly created usercontrol.

The next step was to assign this document type as a property on my image media type. I gave it name like FileSize Check, however this name does not matter as I do not use the property value at all, it’s only purpose is to run the custom Javascript inside it, which is as follows:

//When DOM ready
$(function () {
    
    //Get the File Size DOM element & hide it's label & property area
    $('#fileSize').closest('.propertypane').hide();

    //On form submit
    $("form").on("submit", function (event) {

        //Get the file input type
        var fileInput = $("input[type=file]")[0];

        console.log(fileInput);
        console.log(fileSizeToCheck);

        //Validate filesize
        if (!validateFileSize(fileInput, fileSizeToCheck)) {
            
            //Show validtion message
            UmbClientMgr.mainWindow().UmbSpeechBubble.ShowMessage('error', 'File Size', 'The file chosen is too big, please choose a smaller file than ' + fileSizeToCheck/1024 + 'kb');
            
            //Cancel form event
            event.preventDefault();
        }        
    });
});

///http://deepeshdarshan.wordpress.com/2012/06/20/how-to-validate-upload-file-size-and-file-extension-using-javascript/
function validateFileSize(component, maxSize) {
    
    if (navigator.appName == "Microsoft Internet Explorer") {
        if (component.value) {
            var oas = new ActiveXObject("Scripting.FileSystemObject");
            var e = oas.getFile(component.value);
            var size = e.size;
        }
    }
    else {
        if (component.files[0] != undefined) {
            size = component.files[0].size;
        }
    }
    
    if (size != undefined && size > maxSize) {
        component.value = "";
        component.focus();
        
        return false;
    }
    else {
        return true;
    }
}

As you can see from the JavaScript I first hide the property from the Umbraco backoffice UI, as we don’t need to show a label and an emtpy box for the media UI, but the main part of the code hooks into the form on submit event and then grabs the file input type and passes it to the validateFileSize function(). If the file is too big then we display an error message using the Umbraco message notification bubble in the bottom right hand corner.

Well that’s all there is to it.
Hopefully this little snippet will have helped you out.

Cheers,
Warren 🙂

Umbraco Community Google Hangouts

Hello all,
I had a brilliant idea on the train ride into work this morning. Why don’t we do a Google Hangout where members of the Umbraco community can join and show of their website implementations, packages or general code snippets and advice.

So I thought let’s just make it happen rather than just sit around and think about it, otherwise it will be another one of my ideas that just dies a miserable death!

I asked around on twitter if anyone was able to join me on my lunch break and join me for twenty or so minutes to chat and demo some stuff. Luckily someone replied!

So I present to you the first Umbraco Community Google Hangout with Jon Humphrey as the guest who demo’d his Umbraco 6 MVC implementation of http://lawcare.org.uk

My goal is to try and do this quite regularly with the community so we can all learn from one another and also learn about the awesome but often hidden Umbraco packages within the community. Depending on feedback I may make this a regular weekly Friday slot or perhaps bi-weekly.

Let me know what you think of the format and how often I should do it please in the comments!

Tea Commerce – Certified Developer

Well I have just got back into The Cogworks office after having two days out to do some training in one of the most popular E-Commerce packages, Tea Commerce for Umbraco which is from the fantastic Danish developers Anders Burla Johansen & Rune Grønkjær over at Tea Solutions.

First of all I have to say I have no commercial experience with building e-commerce websites, so going on a two day course to learn how to build E-Commerce websites using my favorite and flexible CMS Umbraco was a very exciting prospect.

The course itself was very well structured and thought out and Anders from Tea Commerce taught us on day one how to build a very simple WebShop using Tea Commerce using some of the basic APIs and on the second day we learnt about product variants, multilingual and the more advanced .NET APIs along with the very clean and well structured JavaScript API.

My colleague at The CogWorks is a big fan of version one of Tea Commerce and was keen to hear about my experience of using version two of Tea Commerce at the training. My colleague previous niggle was that there was little or no documentation that he could easily find. I can proudly say to him now that the guys from Tea Commerce have put a lot of effort into this with thorough documentation across all of their APIs with good real world examples that allow a quick copy and paste coding if you wish to.

So after two fantastic days with Anders and a bunch of other Umbraco developers we can now all proudly say we are now certified Umbraco Tea Commerce Developers!

Warren Buckley is a Tea Commerce Certified Developer
Warren Buckley is a Tea Commerce Certified Developer

I can highly recommend this course if you are considering getting into the world of E-Commerce with Umbraco and is well worth the money and the two days out of the office to learn something new & exciting.