Skip to content

Input image bug #1702

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
simo6529 merged 4 commits into from
Jan 6, 2026
Merged

Input image bug #1702

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4580e92
wip
simo6529 Jan 6, 2026
6385fdb
wip
simo6529 Jan 6, 2026
8081df2
wip
simo6529 Jan 6, 2026
d7da46e
wip
simo6529 Jan 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 18 additions & 11 deletions components/drops/create/utils/CreateDropActionsRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,20 +18,22 @@ export default function CreateDropActionsRow({
const { setToast } = useContext(AuthContext);
return (
<div className="tw-mt-3 tw-flex tw-items-center tw-gap-x-6">
<div className="tw-flex tw-items-center tw-justify-between tw-w-full">
<div className="tw-flex tw-w-full tw-items-center tw-justify-between">
<label>
<div
role="button"
aria-label="Select audio file"
className="tw-cursor-pointer tw-flex tw-items-center tw-gap-x-2 tw-text-iron-300 hover:tw-text-iron-50 tw-ease-out tw-transition tw-duration-300">
className="tw-flex tw-cursor-pointer tw-items-center tw-gap-x-2 tw-text-iron-300 tw-transition tw-duration-300 tw-ease-out hover:tw-text-iron-50"
>
<svg
className="tw-flex-shrink-0 tw-h-5 tw-w-5"
className="tw-size-5 tw-flex-shrink-0"
xmlns="http://www.w3.org/2000/svg"
fill="none"
aria-hidden="true"
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor">
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
Expand All @@ -43,18 +45,20 @@ export default function CreateDropActionsRow({
className="tw-hidden"
accept="image/*,video/*,audio/*"
multiple
onChange={(e: any) => {
onChange={(e) => {
if (e.target.files) {
const files: File[] = Array.from(e.target.files);
if (files.length > MAX_DROP_UPLOAD_FILES) {
setToast({
message: "You can only upload up to 4 files at a time",
message: `You can only upload up to ${MAX_DROP_UPLOAD_FILES} files at a time`,
type: "error",
});
Comment thread
coderabbitai[bot] marked this conversation as resolved.
e.target.value = "";
return;
}
setFiles(files);
}
e.target.value = "";
}}
/>
<span className="tw-text-sm tw-font-medium">Upload Media</span>
Expand All @@ -66,13 +70,15 @@ export default function CreateDropActionsRow({
onClick={breakIntoStorm}
disabled={!canAddPart}
type="button"
className="tw-border-0 tw-bg-transparent tw-cursor-pointer tw-flex tw-items-center tw-text-iron-300 hover:tw-text-iron-50 tw-ease-out tw-transition tw-duration-300">
className="tw-flex tw-cursor-pointer tw-items-center tw-border-0 tw-bg-transparent tw-text-iron-300 tw-transition tw-duration-300 tw-ease-out hover:tw-text-iron-50"
>
<svg
className="tw-h-4 tw-w-4 tw-flex-shrink-0 -tw-mr-0.5"
className="-tw-mr-0.5 tw-size-4 tw-flex-shrink-0"
viewBox="0 0 24 24"
fill="none"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg">
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 5V19M5 12H19"
stroke="currentColor"
Expand All @@ -82,11 +88,12 @@ export default function CreateDropActionsRow({
/>
</svg>
<svg
className="tw-h-[1.15rem] tw-w-[1.15rem] tw-flex-shrink-0"
className="tw-size-[1.15rem] tw-flex-shrink-0"
viewBox="0 0 24 24"
fill="none"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg">
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M21 4H3M20 8L6 8M18 12L9 12M15 16L8 16M17 20H12"
stroke="currentColor"
Expand Down
61 changes: 39 additions & 22 deletions components/waves/CreateDropActions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ const CreateDropActions: React.FC<CreateDropActionsProps> = memo(
const files: File[] = Array.from(e.target.files);
handleFileChange(files);
}
e.target.value = "";
};

useEffect(() => {
Expand Down Expand Up @@ -79,24 +80,27 @@ const CreateDropActions: React.FC<CreateDropActionsProps> = memo(
duration: 0.3,
ease: "easeInOut",
}}
className="tw-flex tw-items-center tw-gap-x-2 tw-overflow-hidden">
className="tw-flex tw-items-center tw-gap-x-2 tw-overflow-hidden"
>
<>
<button
onClick={onAddMetadataClick}
className={`tw-flex-shrink-0 ${
isRequiredMetadataMissing
? "tw-text-[#FEDF89]"
: "tw-text-iron-300"
} tw-bg-iron-700 desktop-hover:hover:tw-bg-iron-700/80 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-transition tw-duration-300 tw-size-8 lg:tw-size-7 focus-visible:tw-outline-none focus-visible:tw-ring-2 focus-visible:tw-ring-offset-2 focus-visible:tw-ring-iron-500 tw-border-0`}
data-tooltip-id="add-metadata-tooltip">
} tw-flex tw-size-8 tw-items-center tw-justify-center tw-rounded-full tw-border-0 tw-bg-iron-700 tw-transition tw-duration-300 focus-visible:tw-outline-none focus-visible:tw-ring-2 focus-visible:tw-ring-iron-500 focus-visible:tw-ring-offset-2 desktop-hover:hover:tw-bg-iron-700/80 lg:tw-size-7`}
data-tooltip-id="add-metadata-tooltip"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor"
className="tw-flex-shrink-0 tw-size-5 lg:tw-size-4"
aria-hidden="true">
className="tw-size-5 tw-flex-shrink-0 lg:tw-size-4"
aria-hidden="true"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
Expand All @@ -113,7 +117,8 @@ const CreateDropActions: React.FC<CreateDropActionsProps> = memo(
backgroundColor: "#1F2937",
color: "white",
padding: "4px 8px",
}}>
}}
>
<span className="tw-text-xs">Add metadata</span>
</Tooltip>
)}
Expand All @@ -123,16 +128,18 @@ const CreateDropActions: React.FC<CreateDropActionsProps> = memo(
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.2, delay: 0.1 }}
className="tw-flex tw-items-center tw-gap-x-2">
className="tw-flex tw-items-center tw-gap-x-2"
>
<>
<label
aria-label="Upload a file"
className={`tw-flex-shrink-0 ${
isRequiredMediaMissing
? "tw-text-[#FEDF89]"
: "tw-text-iron-300"
} tw-bg-iron-700 desktop-hover:hover:tw-bg-iron-700/70 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-transition tw-duration-300 tw-size-8 lg:tw-size-7 focus-visible:tw-outline-none focus-visible:tw-ring-2 focus-visible:tw-ring-offset-2 focus-visible:tw-ring-iron-500 tw-border-0 tw-cursor-pointer`}
data-tooltip-id="upload-file-tooltip">
} tw-flex tw-size-8 tw-cursor-pointer tw-items-center tw-justify-center tw-rounded-full tw-border-0 tw-bg-iron-700 tw-transition tw-duration-300 focus-visible:tw-outline-none focus-visible:tw-ring-2 focus-visible:tw-ring-iron-500 focus-visible:tw-ring-offset-2 desktop-hover:hover:tw-bg-iron-700/70 lg:tw-size-7`}
data-tooltip-id="upload-file-tooltip"
>
<input
type="file"
className="tw-hidden"
Expand All @@ -141,13 +148,14 @@ const CreateDropActions: React.FC<CreateDropActionsProps> = memo(
onChange={onFiles}
/>
<svg
className="tw-flex-shrink-0 tw-size-5 lg:tw-size-4"
className="tw-size-5 tw-flex-shrink-0 lg:tw-size-4"
xmlns="http://www.w3.org/2000/svg"
fill="none"
aria-hidden="true"
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor">
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
Expand All @@ -165,7 +173,8 @@ const CreateDropActions: React.FC<CreateDropActionsProps> = memo(
color: "white",
padding: "4px 8px",
zIndex: 9999,
}}>
}}
>
<span className="tw-text-xs">Upload a file</span>
</Tooltip>
)}
Expand All @@ -175,29 +184,34 @@ const CreateDropActions: React.FC<CreateDropActionsProps> = memo(
<button
onClick={() => setShowGifPicker(true)}
aria-label="Add GIF"
className={`tw-flex-shrink-0 tw-text-iron-300 tw-bg-iron-700 desktop-hover:hover:tw-bg-iron-700/70 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-transition tw-duration-300 tw-size-8 lg:tw-size-7 focus-visible:tw-outline-none focus-visible:tw-ring-2 focus-visible:tw-ring-offset-2 focus-visible:tw-ring-iron-500 tw-border-0 tw-cursor-pointer`}
data-tooltip-id="add-gif-tooltip">
className={`tw-flex tw-size-8 tw-flex-shrink-0 tw-cursor-pointer tw-items-center tw-justify-center tw-rounded-full tw-border-0 tw-bg-iron-700 tw-text-iron-300 tw-transition tw-duration-300 focus-visible:tw-outline-none focus-visible:tw-ring-2 focus-visible:tw-ring-iron-500 focus-visible:tw-ring-offset-2 desktop-hover:hover:tw-bg-iron-700/70 lg:tw-size-7`}
data-tooltip-id="add-gif-tooltip"
>
<svg
className="tw-flex-shrink-0 tw-size-5"
className="tw-size-5 tw-flex-shrink-0"
viewBox="0 0 24 24"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor">
fill="currentColor"
>
<g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
<g
id="SVGRepo_tracerCarrier"
strokeLinecap="round"
strokeLinejoin="round"></g>
strokeLinejoin="round"
></g>
<g id="SVGRepo_iconCarrier">
<g
stroke="none"
strokeWidth="1"
fill="none"
fillRule="evenodd">
fillRule="evenodd"
>
<g
id="ic_fluent_gif_24_filled"
fill="currentColor"
fillRule="nonzero">
fillRule="nonzero"
>
<path d="M18.75,3.50054297 C20.5449254,3.50054297 22,4.95561754 22,6.75054297 L22,17.2531195 C22,19.048045 20.5449254,20.5031195 18.75,20.5031195 L5.25,20.5031195 C3.45507456,20.5031195 2,19.048045 2,17.2531195 L2,6.75054297 C2,4.95561754 3.45507456,3.50054297 5.25,3.50054297 L18.75,3.50054297 Z M8.01459972,8.87193666 C6.38839145,8.87193666 5.26103525,10.2816525 5.26103525,11.9943017 C5.26103525,13.707564 6.38857781,15.1202789 8.01459972,15.1202789 C8.90237918,15.1202789 9.71768065,14.6931811 10.1262731,13.9063503 L10.2024697,13.7442077 L10.226,13.674543 L10.2440163,13.5999276 L10.2440163,13.5999276 L10.2516169,13.5169334 L10.2518215,11.9961937 L10.2450448,11.9038358 C10.2053646,11.6359388 9.99569349,11.4234501 9.72919932,11.3795378 L9.62682145,11.3711937 L8.62521827,11.3711937 L8.53286035,11.3779703 C8.26496328,11.4176506 8.05247466,11.6273217 8.00856234,11.8938159 L8.00021827,11.9961937 L8.00699487,12.0885517 C8.0466751,12.3564487 8.25634623,12.5689373 8.5228404,12.6128497 L8.62521827,12.6211937 L9.00103525,12.6209367 L9.00103525,13.3549367 L8.99484486,13.3695045 C8.80607251,13.6904125 8.44322427,13.8702789 8.01459972,13.8702789 C7.14873038,13.8702789 6.51103525,13.0713011 6.51103525,11.9943017 C6.51103525,10.9182985 7.14788947,10.1219367 8.01459972,10.1219367 C8.43601415,10.1219367 8.67582824,10.1681491 8.97565738,10.3121334 C9.28681641,10.4615586 9.6601937,10.3304474 9.80961888,10.0192884 C9.95904407,9.70812933 9.82793289,9.33475204 9.51677386,9.18532686 C9.03352891,8.95326234 8.61149825,8.87193666 8.01459972,8.87193666 Z M12.6289445,8.99393497 C12.3151463,8.99393497 12.0553614,9.22519285 12.0107211,9.52657705 L12.0039445,9.61893497 L12.0039445,14.381065 L12.0107211,14.4734229 C12.0553614,14.7748072 12.3151463,15.006065 12.6289445,15.006065 C12.9427427,15.006065 13.2025276,14.7748072 13.2471679,14.4734229 L13.2539445,14.381065 L13.2539445,9.61893497 L13.2471679,9.52657705 C13.2025276,9.22519285 12.9427427,8.99393497 12.6289445,8.99393497 Z M17.6221579,9.00083497 L15.6247564,8.99393111 C15.3109601,8.99285493 15.0503782,9.22321481 15.0046948,9.52444312 L14.9975984,9.61677709 L14.9975984,14.3649711 L15.0043751,14.4573291 C15.0440553,14.7252261 15.2537265,14.9377148 15.5202206,14.9816271 L15.6225985,14.9899711 L15.7149564,14.9831945 C15.9828535,14.9435143 16.1953421,14.7338432 16.2392544,14.467349 L16.2475985,14.3649711 L16.2470353,13.2499367 L17.37,13.2504012 L17.4623579,13.2436246 C17.730255,13.2039444 17.9427436,12.9942732 17.9866559,12.7277791 L17.995,12.6254012 L17.9882234,12.5330433 C17.9485432,12.2651462 17.738872,12.0526576 17.4723779,12.0087453 L17.37,12.0004012 L16.2470353,11.9999367 L16.2470353,10.2449367 L17.6178421,10.2508313 L17.7102229,10.2443727 C18.0117595,10.2007704 18.2439132,9.94178541 18.2450039,9.62798912 C18.24608,9.31419284 18.0157202,9.05361096 17.7144919,9.00793041 L17.6221579,9.00083497 L15.6247564,8.99393111 L17.6221579,9.00083497 Z"></path>
</g>
</g>
Expand All @@ -214,7 +228,8 @@ const CreateDropActions: React.FC<CreateDropActionsProps> = memo(
color: "white",
padding: "4px 8px",
zIndex: 9999,
}}>
}}
>
<span className="tw-text-xs">Add GIF</span>
</Tooltip>
)}
Expand All @@ -236,15 +251,17 @@ const CreateDropActions: React.FC<CreateDropActionsProps> = memo(
isRequiredMetadataMissing || isRequiredMediaMissing
? "tw-text-[#FEDF89]"
: "tw-text-iron-400"
} tw-bg-iron-700 desktop-hover:hover:tw-bg-iron-700/70 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-transition tw-duration-300 tw-size-7 focus-visible:tw-outline-none focus-visible:tw-ring-2 focus-visible:tw-ring-offset-2 focus-visible:tw-ring-iron-500 tw-border-0`}>
} tw-flex tw-size-7 tw-items-center tw-justify-center tw-rounded-full tw-border-0 tw-bg-iron-700 tw-transition tw-duration-300 focus-visible:tw-outline-none focus-visible:tw-ring-2 focus-visible:tw-ring-iron-500 focus-visible:tw-ring-offset-2 desktop-hover:hover:tw-bg-iron-700/70`}
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor"
aria-hidden="true"
className="tw-size-4 tw-flex-shrink-0">
className="tw-size-4 tw-flex-shrink-0"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
Expand Down