[Feature Request]: Paste to upload file

[rinkaaan]

Description

Support pasting from clipboard to upload a file in: https://cloudscape.design/components/file-upload/?tabId=playground&example=multiple-files-upload

Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I checked the current issues for duplicate requests

[rinkaaan]

Nvm, got it working with this react hook:

import { useEffect, useCallback, useState } from "react"

interface UsePasteUploadOptions {
  callback: (file: File) => void
  isActive?: boolean
}

export default function usePasteUpload({ callback, isActive = true }: UsePasteUploadOptions) {
  const [lastPastedFile, setLastPastedFile] = useState<File | null>(null)

  const handlePaste = useCallback((event: ClipboardEvent) => {
    const items = event.clipboardData?.items
    if (!items) return

    for (let i = 0; i < items.length; i++) {
      if (["image", "video"].some(type => items[i].type.includes(type))) {
        const file = items[i].getAsFile()
        if (file) {
          setLastPastedFile(file)
          callback(file)
        }
        break
      }
    }
  }, [callback])

  useEffect(() => {
    if (isActive) {
      document.addEventListener("paste", handlePaste)
      return () => document.removeEventListener("paste", handlePaste)
    }
  }, [isActive, handlePaste])

  return lastPastedFile
}

[rinkaaan]

It's working but for some reason files added to the state via my paste hook don't have gap with other files. I'm guessing there's some internal file tracking being done by the file upload component?

It's only happening on macOS Safari.

[rinkaaan]

Seems like this is unrelated to paste to upload, will open separate issue.