Added support for drag/drop of images

[aidanjacobson]

Extracted file handling to handleFile method, then changed both file input and added drag/drop to make use of this function.

Summary by Sourcery

Add drag and drop support for file uploads by extracting common file handling logic into a reusable function

New Features:

• Implemented drag and drop file upload functionality

Enhancements:

• Refactored file input handling to use a shared handleFile method
• Improved file upload user experience with drag and drop support

[sourcery-ai]

Reviewer's Guide

This pull request introduces drag-and-drop file uploads by first refactoring common file processing logic into a new handleFile function. This central function is now utilized by both the existing file input component (after its 'change' event listener was updated) and the newly implemented dropZone event listeners (dragover, drop) to handle file selection, UI updates, and upload initiation.

File-Level Changes

Change	Details	Files
Created a reusable handleFile function by extracting common file processing logic.	The handleFile function now manages adding files to the UI list (e.g., creating table rows, progress bars). It determines the initial fileType from the first file, updates the fileInput's accept attribute, and fetches available conversion options. The function is responsible for calling uploadFile to initiate the upload for each processed file.	public/script.js
Implemented drag-and-drop file uploads by updating dropZone event listeners and using handleFile.	Modified the dragover event listener on dropZone to include e.preventDefault() allowing items to be dropped. Rewrote the drop event listener on dropZone to call e.preventDefault(), retrieve files from e.dataTransfer.files, and then process each file using the handleFile function. Added a check within the drop event listener to handle cases where no files are dropped.	public/script.js
Refactored the existing file input mechanism to use the centralized handleFile function.	Simplified the fileInput 'change' event listener by removing the previous inline file processing logic. The updated event listener now iterates through e.target.files and calls the handleFile function for each selected file.	public/script.js

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

Hey @aidanjacobson - I've reviewed your changes - here's some feedback:

• Clarify or adjust fileType and input accept attribute logic for scenarios involving multiple, different file types in a single operation or subsequent operations.
• Consider separating one-time setup logic (e.g., fetching conversion options, setting initial fileType) from the per-file processing (e.g., row creation, upload initiation) within the handleFile function.
• Consider providing user-facing feedback if no supported files are detected during a drag-and-drop operation, in addition to the current console.warn.

Here's what I looked at during the review

• 🟡 General issues: 1 issue found
• 🟡 Security: 1 issue found
• 🟢 Testing: all looks good
• 🟢 Documentation: all looks good

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[sourcery-ai]

🚨 suggestion (security): Consider sanitizing file name content when inserting into innerHTML.

Encode or sanitize file names before inserting into innerHTML to prevent issues from unexpected characters.

Suggested implementation:

function sanitizeHTML(str) {
  var temp = document.createElement('div');
  temp.textContent = str;
  return temp.innerHTML;
}

// Extracted handleFile function for reusability in drag-and-drop and file input
function handleFile(file) {
  const fileList = document.querySelector("#file-list");

  const row = document.createElement("tr");

  row.innerHTML = `
    <td>${sanitizeHTML(file.name)}</td>
    <td><progress max="100"></progress></td>
    <td>${(file.size / 1024).toFixed(2)} kB</td>
    <td><a onclick="deleteRow(this)">Remove</a></td>
  `;

Ensure that the sanitizeHTML function is placed in an appropriate scope (outside of other functions if needed) so that it can be used throughout the file if similar sanitization is required elsewhere.

[sourcery-ai]

suggestion: Consider avoiding inline event handlers.

Use JavaScript to attach event listeners instead of inline onclick attributes to improve maintainability and separation of concerns.

Suggested implementation:

  row.innerHTML = `
    <td>${file.name}</td>
    <td><progress max="100"></progress></td>
    <td>${(file.size / 1024).toFixed(2)} kB</td>
    <td><a class="delete-button" href="#">Remove</a></td>
  `;

  // Attach event listener to the remove button to avoid inline onclick
  const deleteButton = row.querySelector(".delete-button");
  if (deleteButton) {
    deleteButton.addEventListener("click", (event) => {
      event.preventDefault();
      deleteRow(deleteButton);
    });
  }

Ensure that the deleteRow function is prepared to work with the element passed via the event listener.

[C4illin]

Looking great! Could you rename the commit to "feat: add support for drag/drop of images"

[aidanjacobson]

Yep