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

0
159

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">
        <li>
            <i class="icon icon-delete red hover-show pull-right" ng-click="removePicture()"></i>
            <i class="icon {{node.icon}} hover-hide"></i>
            {{node.name}}
        </li>
    </ul>
    <ul class="unstyled list-icons">
        <li>
            <i class="icon icon-add blue"></i>
            <a ng-click="openMediaPicker()" prevent-default>Select</a>
        </li>
    </ul>
</umb-control-group>

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 node.id.

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

LEAVE A REPLY

Please enter your comment!
Please enter your name here