fix: file upload

enhancement: widget styling

src/components/draggable/draggable.js

@@ -33,6 +33,7 @@ const DraggableWrapper = memo(({dragElementType, dragWidgetClass=null, className
     return (
         <div className={`${className}`} 
                 draggable 
+                data-drag-start-within // this attribute indicates that the drag is occurring from within the project and not a outside file drop
                 data-draggable-type={dragElementType}
                 onDragStart={handleDragStart} 
                 onDragEnd={handleDragEnd}

src/components/draggable/droppable.js

@@ -18,6 +18,11 @@ const DroppableWrapper = memo(({onDrop, droppableTags={}, ...props}) => {
 
     const handleDragEnter = (e) => {
         
+        if (!draggedElement || !draggedElement.getAttribute("data-drag-start-within")){
+            // if the drag is starting from outside (eg: file drop) or if drag doesn't exist
+            return
+        }
+
         const dragElementType = draggedElement.getAttribute("data-draggable-type")
 
 
@@ -42,6 +47,12 @@ const DroppableWrapper = memo(({onDrop, droppableTags={}, ...props}) => {
     }
 
     const handleDragOver = (e) => {
+
+        if (!draggedElement || !draggedElement.getAttribute("data-drag-start-within")){
+            // if the drag is starting from outside (eg: file drop) or if drag doesn't exist
+            return
+        }
+
         // console.log("Drag over: ", e.dataTransfer.getData("text/plain"), e.dataTransfer)
         const dragElementType = draggedElement.getAttribute("data-draggable-type")
 
@@ -57,6 +68,12 @@ const DroppableWrapper = memo(({onDrop, droppableTags={}, ...props}) => {
     }
 
     const handleDropEvent = (e) => {
+
+        if (!draggedElement || !draggedElement.getAttribute("data-drag-start-within")){
+            // if the drag is starting from outside (eg: file drop) or if drag doesn't exist
+            return
+        }
+
         e.stopPropagation()
 
         setShowDroppable({