Visual Studio Extensions for Umbraco

Hello all,
I haven’t blogged for a little while, as I have been busy with my new pet project uHangout. If you haven’t checked it out yet I highly recommend you do, as it s a weekly Google Hangout that I record and publish on YouTube with guests from the Umbraco community demoing implementations, snippets, packages or just general interviews like I did with founder Niels Hartvig & Per Ploug

So my next little lunchtime hacks has been involved in working with extending Visual Studio to make our life’s easier when working with Umbraco. After recently coming across the project SideWaffle from Sayed Hashimi and Mads Kristensen from Microsoft, I was inspired by how they have added new file templates such as an AngularJS Controller and others.

So with this idea I approached Sayed for some advice on how I can create Umbraco file templates in the same way. I was given some great pointers and I am now able to present to you the

Umbraco Community – Visual Studio Project Item Templates package for Visual Studio

You can download the extension directly inside Visual Studio from the extensions section or on the Visual Studio Gallery website.

If you are intrigued on how it all works then the full source code is available on GitHub for you to look through as well.

But it doesn’t stop there!

As I created another Visual Studio package that adds a new project template to Visual Studio. So with one click you can do File -> New Project and select the new Umbraco project template. This will install and setup Umbraco for you by fetching the latest version of Umbraco from NuGet.

Now you will be able to impress your boss as you install & setup Umbraco so quickly.
Like before this extension can be found when searching inside Visual Studio for extensions and the gallery website but I have also put the source code of is extension on GitHub as well.

I have a few more ideas for Visual Studio Extensions to make our lives easier as Umbraco Developers, but I would love to hear what you think.

Cheers,
Warren 🙂

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 🙂