diff --git a/app/javascript/mastodon/features/compose/components/upload.tsx b/app/javascript/mastodon/features/compose/components/upload.tsx
index 67c8ee5e9..adc51733d 100644
--- a/app/javascript/mastodon/features/compose/components/upload.tsx
+++ b/app/javascript/mastodon/features/compose/components/upload.tsx
@@ -22,10 +22,11 @@ import { useAppDispatch, useAppSelector } from 'mastodon/store';
export const Upload: React.FC<{
id: string;
dragging?: boolean;
+ draggable?: boolean;
overlay?: boolean;
tall?: boolean;
wide?: boolean;
-}> = ({ id, dragging, overlay, tall, wide }) => {
+}> = ({ id, dragging, draggable = true, overlay, tall, wide }) => {
const dispatch = useAppDispatch();
const media = useAppSelector((state) =>
(
@@ -71,6 +72,7 @@ export const Upload: React.FC<{
{
[dispatch, setActiveId],
);
+ const handleDragCancel = useCallback(() => {
+ setActiveId(null);
+ }, [setActiveId]);
+
const accessibility: {
screenReaderInstructions: ScreenReaderInstructions;
announcements: Announcements;
@@ -158,32 +162,46 @@ export const UploadForm: React.FC = () => {
-
-
+ ) : (
+
- {mediaIds.map((id, idx) => (
-
- ))}
-
+
+ {mediaIds.map((id, idx) => (
+
+ ))}
+
-
- {activeId ? : null}
-
-
+
+ {activeId ? : null}
+
+
+ )}
)}
>
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 29bf272ca..a7219b419 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -708,7 +708,12 @@ body > [data-popper-placement] {
&__upload {
position: relative;
- cursor: grab;
+
+ &.draggable {
+ will-change: transform, opacity;
+ touch-action: none;
+ cursor: grab;
+ }
&.dragging {
opacity: 0;
@@ -720,18 +725,6 @@ body > [data-popper-placement] {
pointer-events: none;
}
- &__drag-handle {
- position: absolute;
- top: 50%;
- inset-inline-start: 0;
- transform: translateY(-50%);
- color: $white;
- background: transparent;
- border: 0;
- padding: 8px 3px;
- cursor: grab;
- }
-
&__actions {
display: flex;
align-items: flex-start;