prototype drag and drop upload

umbraco · Nov 2, 2022 · 99963ec · 99963ec
1 parent ed52298
commit 99963ec
Show file tree

Hide file tree

Showing 3 changed files with 107 additions and 4 deletions.
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/mediacard/umb-media-card.less b/src/Umbraco.Web.UI.Client/src/views/components/mediacard/umb-media-card.less
@@ -3,9 +3,7 @@ umb-media-card {
     position: relative;
     display: inline-block;
     width: 100%;
-    //background-color: white;
     border-radius: @baseBorderRadius;
-    //box-shadow: 0 1px 2px rgba(0,0,0,.2);
     overflow: hidden;
     transition: box-shadow 120ms;
     cursor: pointer;
@@ -194,3 +192,21 @@ umb-media-card {
         }
     }
 }
+
+
+/* TODO: figure out where this should live */
+.umb-media-card {
+    __upload-progress {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: rgba(255, 255, 255, .96);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 1;
+    }
+}
+
diff --git a/...b.UI.Client/src/views/propertyeditors/mediapicker3/umb-media-picker3-property-editor.html b/...b.UI.Client/src/views/propertyeditors/mediapicker3/umb-media-picker3-property-editor.html
@@ -1,7 +1,40 @@
+<style>
+    .my-dropzone {
+        height: 100px; 
+        background-color: purple;
+    }
+
+    .my-dropzone.drag-over {
+        background: blue;
+    }
+
+    .temp-media-card {
+        border-radius: 3px;
+        cursor: pointer;
+        display: inline-block;
+        overflow: hidden;
+        position: relative;
+        transition: box-shadow .12s;
+        width: 100%;
+    }
+</style>
+
 <div class="umb-mediapicker3">
 
     <umb-load-indicator ng-if="vm.loading"></umb-load-indicator>
 
+    <h3>Value</h3>
+    <pre>{{ vm.model.value | json }}</pre>
+
+    <div 
+        class="my-dropzone"
+        ngf-drop
+        ng-model="vm.filesHolder"
+        ngf-change="vm.handleFiles($files, $event, $invalidFiles)"
+        ngf-drag-over-class="'drag-over'">
+        My dropzone
+    </div>
+
     <div class="umb-media-card-grid" ng-class="{'--singleMode':(vm.validationLimit.max === 1 && vm.model.value.length <= 1)}">
 
         <div style="display:contents;" ui-sortable="vm.sortableOptions" ng-model="vm.model.value" ng-if="vm.loading !== true">
@@ -20,7 +53,26 @@
                         </div>
                 </button>
 
+                <div ng-if="!media.mediaKey" class="umb-media-card">
+                    <div class="__showcase">
+                        <div ng-if="media.uploadProgress < 100" class="__upload-progress">
+                            <umb-progress-circle percentage="{{media.uploadProgress}}" width="100"></umb-progress-circle>
+                        </div>
+
+                        <button type="button" class="btn-reset __info">
+                            <div class="__name" ng-bind="media.name"></div>
+                        </button>
+
+                        <div class="__actions">
+                            <button ng-if="vm.allowRemoveMedia" type="button" class="btn-reset __action umb-outline" localize="title" title="general_remove" ng-click="vm.removeMedia(media); $event.stopPropagation();">
+                                <umb-icon icon="icon-trash" class="icon"></umb-icon>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
                 <umb-media-card
+                    ng-if="media.mediaKey"
                     media-key="media.mediaKey"
                     on-name-clicked="vm.editMedia(media, $index, $event)"
                     ng-class="{'--active': vm.activeMediaEntry === media}"

diff --git a/....Client/src/views/propertyeditors/mediapicker3/umbMediaPicker3PropertyEditor.component.js b/....Client/src/views/propertyeditors/mediapicker3/umbMediaPicker3PropertyEditor.component.js
@@ -28,7 +28,7 @@
             }
         });
 
-    function MediaPicker3Controller($scope, editorService, clipboardService, localizationService, overlayService, userService, entityResource, $attrs) {
+    function MediaPicker3Controller($scope, editorService, clipboardService, localizationService, overlayService, userService, entityResource, $attrs, umbRequestHelper, Upload) {
 
         var unsubscribe = [];
 
@@ -47,6 +47,8 @@
         vm.allowRemoveMedia = true;
         vm.allowEditMedia = true;
 
+        vm.handleFiles = handleFiles;
+
         vm.addMediaAt = addMediaAt;
         vm.editMedia = editMedia;
         vm.removeMedia = removeMedia;
@@ -140,6 +142,39 @@
 
         };
 
+        vm.files = [];
+
+        function handleFiles (files, event, invalidFiles) {
+            files.forEach(file => {
+                const tempMediaEntry = {
+                    key: String.CreateGuid(),
+                    name: file.name,
+                    uploadProgress: 0
+                };
+                vm.files.push(tempMediaEntry);
+                vm.model.value.push(tempMediaEntry);
+                _upload(file, tempMediaEntry);
+            });
+        };
+
+        function _upload(file, tempMediaEntry) {
+            Upload.upload({ 
+                    url: umbRequestHelper.getApiUrl("tinyMceApiBaseUrl", "UploadImage"),
+                    file: file
+                })
+                .progress(function(evt) {
+                    var progressPercentage = parseInt(100.0 * evt.loaded / evt.total, 10);
+                    tempMediaEntry.uploadProgress = progressPercentage;
+                })
+                .success(function (data, status, headers, config) {
+                    console.log("success", file, data);
+                    tempMediaEntry.tmpLocation = data.tmpLocation;
+                })
+                .error(function(evt, status, headers, config) {
+                    console.log("error", file);
+                });
+        }
+
         function onServerValueChanged(newVal, oldVal) {
             if(newVal === null || !Array.isArray(newVal)) {
                 newVal = [];
@@ -430,7 +465,7 @@
 
         vm.sortableOptions = {
             cursor: "grabbing",
-            handle: "umb-media-card",
+            handle: "umb-media-card, .umb-media-card",
             cancel: "input,textarea,select,option",
             classes: ".umb-media-card--dragging",
             distance: 5,