feat(EditCroppedImagePanel): Extended to be able to drag/drop images

Added `DropArea` to enable drag/drop images.

ui/app/AppLayouts/Chat/views/communities/CommunityNewCollectibleView.qml

@@ -87,6 +87,7 @@ StatusScrollView {
             title: qsTr("Collectible artwork")
             acceptButtonText: qsTr("Upload collectible artwork")
             roundedImage: false
+            isDraggable: true
 
             NoImageUploadedPanel {
                 width: parent.width

ui/imports/shared/panels/EditCroppedImagePanel.qml

@@ -37,6 +37,8 @@ Item {
 
     readonly property alias cropWorkflow : imageCropWorkflow
 
+    property bool isDraggable: false
+
     function chooseImageToCrop() {
         imageCropWorkflow.chooseImageToCrop()
     }
@@ -145,9 +147,18 @@ Item {
             Layout.fillHeight: true
 
             visible: root.state === d.noImageState
-
             radius: roundedImage ? Math.max(width, height)/2 : croppedPreview.radius
             color: Style.current.inputBackground
+            states: [
+                State {
+                    when: dropArea.containsDrag
+                    PropertyChanges {target: imageCropEditor; border.color: Theme.palette.primaryColor1 }
+                },
+                State {
+                    when: !dropArea.containsDrag
+                    PropertyChanges {target: imageCropEditor; border.color: Theme.palette.baseColor2 }
+                }
+            ]
 
             StatusRoundButton {
                 id: addButton
@@ -202,6 +213,18 @@ Item {
         }
     }
 
+    DropArea {
+        id: dropArea
+
+        anchors.fill: parent
+        enabled: root.isDraggable
+        onDropped: {
+            if (drop.urls.length > 0) {
+                imageCropWorkflow.cropImage(drop.urls[0])
+            }
+        }
+    }
+
     StatusMenu {
         id: imageEditMenu
         width: 200