Hey there! Let's break down that odd issue you're hitting when trying to handle multi-file pastes via the paste event in Chrome. Looking at your code snippet, here are the most common pitfalls and fixes to get things working smoothly:

Common Issues & Fixes #

1. Ensure Proper Event Object Handling #

Your code uses regardedEvent = event.originalEvent || event which makes sense if you're working with a framework-wrapped event (like jQuery). But in vanilla Chrome, originalEvent won't exist—so double-check that you're accessing the correct event's clipboardData property. Always add a guard clause to avoid errors if clipboardData is unavailable:

const regardedEvent = event.originalEvent || event;
if (!regardedEvent?.clipboardData) {
  console.warn("Clipboard data isn't accessible here");
  return;
}

2. Filter for File-Only Clipboard Items #

The clipboardData.items array can contain all sorts of content (text, images, files, etc.). If you don't filter for file-type items, you'll end up with invalid data or unexpected behavior. Make sure to check each item's kind property:

const files = Array.from(items)
  .filter(item => item.kind === 'file') // Only keep file entries
  .map(item => item.getAsFile()) // Convert to File objects
  .filter(file => file !== null); // Guard against null values

3. Verify Event Binding & Default Behavior #

• You're calling event.preventDefault() early on, which is correct to block the default paste action (like inserting file paths into a text field). Just ensure this is called on the correct event object—if using a framework, you might need to call it on regardedEvent instead.
• Make sure your paste event is bound to a focusable element (like document, an input, or a contenteditable div). Chrome won't trigger paste events on elements that can't receive focus.

Full Working Example #

Here's a polished version of your function that addresses these points:

let pasteFunction = function(event, callback) {
  // Block default paste behavior
  event.preventDefault();

  // Unwrap framework-wrapped event if needed
  const regardedEvent = event.originalEvent || event;
  if (!regardedEvent?.clipboardData) {
    console.warn("Clipboard access denied or unavailable");
    return;
  }

  const items = regardedEvent.clipboardData.items;
  if (!items || items.length === 0) return;

  // Extract valid File objects from clipboard
  const pastedFiles = Array.from(items)
    .filter(item => item.kind === 'file')
    .map(item => item.getAsFile())
    .filter(file => file !== null);

  // Pass files to callback if available
  if (pastedFiles.length > 0 && typeof callback === 'function') {
    callback(pastedFiles);
  }
};

// Register the paste event on the document
document.addEventListener('paste', (e) => {
  pasteFunction(e, (files) => {
    console.log("Successfully retrieved pasted files:", files);
    // Add your file handling logic here (upload, preview, etc.)
  });
});

Additional Checks for Odd Behavior #

• If you're still seeing weirdness, test in an incognito window to rule out browser extensions interfering with clipboard access.
• Confirm that you're pasting actual files from your file manager (not text or images copied from a webpage—those might have different clipboardData structures).

内容的提问来源于stack exchange，提问作者Schnodderbalken