Skip to content

Implement paste event for image file input #138

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

Open
KavyanshKhaitan2 wants to merge 2 commits into
base: staging
Choose a base branch
from
Open

Implement paste event for image file input #138

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2e4e50d
Merge pull request #137 from hackclub/staging
ArcaEge Feb 1, 2026
d1ecff6
Implement paste event for image file input
KavyanshKhaitan2 Feb 3, 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
32 changes: 32 additions & 0 deletions src/routes/dashboard/projects/[id]/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,36 @@
}

let formPending = $state(false);


document.addEventListener('DOMContentLoaded', () => {
const pasteArea = document.querySelector('#description');
const fileInput = document.querySelector('#imagefield');

pasteArea.addEventListener('paste', (event) => {
// Prevent the default paste behavior (e.g., pasting into the contenteditable div as text/html)
// Access the clipboard data items
const items = event.clipboardData.items;

// Iterate over the items to find a file
for (const item of items) {
if (item.kind === 'file') {
const blob = item.getAsFile();

// Create a DataTransfer object to manage files
const dataTransfer = new DataTransfer();
dataTransfer.items.add(blob);

// Assign the DataTransfer's file list to the input element
fileInput.files = dataTransfer.files;

// Optional: Provide a visual cue that the file was accepted
break; // Stop after finding the first file
}
}
});
});

</script>

<Head title={data.project.name} />
Expand Down Expand Up @@ -180,6 +210,7 @@
<label class="flex flex-col gap-1">
Description
<CharCountedTextarea
id="description"
name="description"
placeholder="Describe what you changed"
bind:value={description}
Expand All @@ -197,6 +228,7 @@
<label class="flex grow flex-col gap-1">
Image
<input
id="imagefield"
type="file"
name="image"
accept={ALLOWED_IMAGE_TYPES.join(', ')}
Expand Down