Implement paste event for image file input#138
Implement paste event for image file input#138KavyanshKhaitan2 wants to merge 4 commits intohackclub:stagingfrom
Conversation
Update end date
Add paste functionality for image uploads in project description.
|
Let me have a look |
ArcaEge
left a comment
ArcaEge
left a comment
There was a problem hiding this comment.
you'd need to put this inside an onMount(() => {}) because of server side rendering
|
okay. |
Add DOMContentLoaded event listener for paste area and file input.
|
@ArcaEge please review this again. |
![sentry[bot]](https://avatars.githubusercontent.com/in/12637?s=60&v=4){kind=small}
|
|
||
| let formPending = $state(false); | ||
|
|
||
| onMount(() => { |
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
| <label class="flex flex-col gap-1"> | ||
| Description | ||
| <CharCountedTextarea | ||
| id="description" |
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
There was a problem hiding this comment.
how do i do this?
|
|
||
| onMount(() => { | ||
|
|
||
| document.addEventListener('DOMContentLoaded', () => { |
There was a problem hiding this comment.
There's no need for DOMContentLoaded since this is inside onMount
There was a problem hiding this comment.
Oh I see. Don't really do js so don't know lol.
Removed unnecessary DOMContentLoaded event listener.
|
|
||
| let formPending = $state(false); | ||
|
|
||
| onMount(() => { |
There was a problem hiding this comment.
Bug: The component will crash on initialization due to a missing onMount import. It also contains a null pointer exception for non-project owners.
Severity: CRITICAL
Suggested Fix
Import onMount from 'svelte' at the top of the script block: import { onMount } from 'svelte';. Additionally, add a null check inside the onMount callback to ensure fileInput is not null before adding an event listener to it.
Prompt for AI Agent
Review the code at the location below. A potential bug has been identified by an AI
agent.
Verify if this is a real issue. If it is, propose a fix; if not, explain why it's not
valid.
Location: src/routes/dashboard/projects/[id]/+page.svelte#L41
Potential issue: The `onMount` lifecycle function is called on line 41 but is not
imported from 'svelte'. This will cause a `ReferenceError` when the component is
initialized, preventing it from rendering. Additionally, even if the import were
present, the code within `onMount` attempts to access an element with `id="imagefield"`
without checking if it exists. This element is only rendered if the current user is the
project owner. For any other user, `document.getElementById('imagefield')` will return
`null`, causing a `TypeError` when the code attempts to call `addEventListener` on it.
| 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; |
There was a problem hiding this comment.
Bug: The paste event handler for the description field is missing event.preventDefault(), causing image filenames to be incorrectly inserted into the textarea upon paste.
Severity: MEDIUM
Suggested Fix
Add event.preventDefault(); inside the 'paste' event listener callback in the onMount function. This will prevent the browser's default behavior of inserting the filename into the textarea.
Prompt for AI Agent
Review the code at the location below. A potential bug has been identified by an AI
agent.
Verify if this is a real issue. If it is, propose a fix; if not, explain why it's not
valid.
Location: src/routes/dashboard/projects/[id]/+page.svelte#L46-L49
Potential issue: A 'paste' event listener is attached to the description textarea to
handle image pasting. However, the implementation is missing a call to
`event.preventDefault()`. The developer's intent, as stated in a code comment, was to
prevent the default paste behavior. Without this call, when a user pastes an image, the
browser's default action will still occur, which for a `<textarea>` is to insert the
image's filename as text. This results in the description field being polluted with the
filename.
ArcaEge
left a comment
ArcaEge
left a comment
There was a problem hiding this comment.
Have you tested this at all to see if it works?
|
I have NO IDEA how to run nextjs lol. If you want, you can push changes to this branch. That's possible for ya. |
|
Im more of a Python or Django person. |
|
I think I'm going to close this in favour of #147 |
2 participants
Add paste functionality for image uploads in project description.