diff --git a/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/mediafolderpicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/mediafolderpicker.controller.js
new file mode 100644
index 0000000000..ddfca295d4
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/mediafolderpicker.controller.js
@@ -0,0 +1,56 @@
+function mediaFolderPickerController($scope, editorService, entityResource) {
+    
+    
+    $scope.folderName = "";
+    
+    
+    function retriveFolderData() {
+        
+        var id = $scope.model.value;
+        
+        if (id == null) {
+            $scope.folderName = "";
+            return;
+        }
+        
+        entityResource.getById(id, "Media").then(
+            function (media) {
+                $scope.media = media;
+            }
+        );
+    }
+    
+    
+    retriveFolderData();
+    
+    
+    $scope.add = function() {
+        var mediaPickerOptions = {
+            view: "mediapicker",
+            multiPicker: true,
+            disableFolderSelect: false,
+            onlyImages: false,
+            onlyFolders: true,
+            submit: function (model) {
+                
+                $scope.model.value = model.selection[0].udi;
+                
+                retriveFolderData();
+                
+                editorService.close();
+            },
+            close: function () {
+                editorService.close();
+            } 
+        };
+        editorService.mediaPicker(mediaPickerOptions);
+    };
+
+    $scope.remove = function () {
+        $scope.model.value = null;
+        retriveFolderData();
+    };
+
+}
+
+angular.module('umbraco').controller("Umbraco.PrevalueEditors.MediaFolderPickerController", mediaFolderPickerController);
diff --git a/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/mediafolderpicker.html b/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/mediafolderpicker.html
new file mode 100644
index 0000000000..52a190aeea
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/mediafolderpicker.html
@@ -0,0 +1,37 @@
+<div ng-controller="Umbraco.PrevalueEditors.MediaFolderPickerController" class="umb-property-editor umb-mediapicker umb-mediapicker-single">
+
+    <div class="flex flex-wrap error">
+        <ul class="umb-sortable-thumbnails">
+            <li ng-if="model.value" class="umb-sortable-thumbnails__wrapper">
+
+                <p class="label label__trashed" ng-if="media.trashed">
+                    <localize key="mediaPicker_trashed"></localize>
+                    <i class="icon-trash" aria-hidden="true"></i>
+                </p>
+
+                <!-- FILE -->
+                <div ng-class="{'trashed': media.trashed}" class="umb-icon-holder" ng-hide="media.thumbnail">
+                    <span class="file-icon">
+                        <i class="icon {{media.icon}}"></i>
+                        <span ng-if="media.extension">.{{media.extension}}</span>
+                    </span>
+                    <small>{{media.name}}</small>
+                </div>
+
+                <div class="umb-sortable-thumbnails__actions" data-element="sortable-thumbnail-actions">
+
+                    <a class="umb-sortable-thumbnails__action -red" data-element="action-remove" href="" ng-click="remove()">
+                        <i class="icon icon-delete"></i>
+                    </a>
+                </div>
+            </li>
+
+            <li style="border: none;" class="add-wrapper unsortable" ng-hide="model.value">
+                <a data-element="sortable-thumbnails-add" href="#" class="add-link add-link-square" ng-click="add()" prevent-default>
+                    <i class="icon icon-add large"></i>
+                </a>
+            </li>
+        </ul>
+    </div>
+
+</div>