Umbraco: Picture / File upload for custom dashboard or property editor


When extending the Umbraco backoffice you might want to upload pictures or other files to the media section and link them to whatever you are doing by their id.

This is very easy with a little angular.

First we create the HTML View:

<umb-control-group label="Picture" description="short description">
    <ul class="unstyled list-icons" ng-if="node">
            <i class="icon icon-delete red hover-show pull-right" ng-click="removePicture()"></i>
            <i class="icon {{node.icon}} hover-hide"></i>
    <ul class="unstyled list-icons">
            <i class="icon icon-add blue"></i>
            <a ng-click="openMediaPicker()" prevent-default>Select</a>

The result will look something like this:

custom file picture upload umbraco
Custom file upload for Umbraco

Of course you can add your own styling. The red cross will only be displayed if a file is selected.

Angular Controller for File Upload:

The next step will be to create the methods

  • removePicture(), which is triggerd when the red cross is clicked
  • openMediaPicker(), which is triggerd when the Select-Link is clicked
angular.module("umbraco").controller("Some.Name", function ($scope, $routeParams, YourResources, dialogService) { 
    $scope.openMediaPicker = function () {
        dialogService.mediaPicker({ callback: populatePicture });

    $scope.removePicture = function() {
        delete $scope.node;

    function populatePicture(item) {
        $scope.node = item;

The dialog-service will handle the upload and saving of the file. All you have to do ist save the id somewhere.

The id of the image or file is saved in

Im assuming that you already know how to save things in umbraco. If you need help write about it in the comments.


  1. Hi,

    I want to create custom UI for User upload file with custom property like attachment title and another text property. Uploaded file property (file path) and custom property will be store into separate DB from umbraco.
    Would you like to create a tutorial how to make this work with custom UI like we create Document type?

    Thank you.


Please enter your comment!
Please enter your name here