从Outlook等邮件拖拽文件至JavaScript组件的JS/HTML控制方案问询

Absolutely, you can absolutely implement drag-and-drop from Outlook (and other email clients) into your custom component, and you do have full control over the process using JavaScript and HTML—even beyond the native support you mentioned for modern Chrome and Safari. Let’s break down how to approach this, including key controls and edge cases to watch for:

First, the foundation works similarly to native file drag-and-drop, but with small adjustments for email client quirks:

• You’ll need to listen to three critical events on your component element: dragenter, dragover, and drop.
• Always prevent the default behavior for dragover and drop—this stops the browser from opening the dragged file directly, letting your component take over processing.
• Most modern Outlook versions (Windows and macOS) treat dragged attachments as standard File objects, so they’ll appear in dataTransfer.files just like local file drags.

You have granular control over every step of the interaction:

• Custom visual feedback: Update your component’s styling on dragenter (e.g., change border color, add a highlight) to signal that drops are allowed. Revert the style on dragleave or after a drop completes.
• Filter file types/sizes: In the drop event, iterate over the incoming files and check file.type or filename extensions to only keep files that fit your component’s requirements. Reject unsupported types with a user-friendly message.
• Conditional acceptance: Based on your component’s state (e.g., if an upload is already in progress), you can choose to block drops by skipping the preventDefault() call on dragover, or show a "drop not allowed" visual cue.
• Cleanup on cancellation: Listen to the dragend event to reset any temporary styles or state if the user cancels the drag mid-process.

Outlook can sometimes pass extra non-file data (like email content) along with attachments—here’s how to handle it:

• Prioritize dataTransfer.items over dataTransfer.files: Some Windows Outlook versions don’t populate files correctly, but items will contain valid file entries. Use item.kind === 'file' to filter for actual files, then call item.getAsFile() to get the File object.
• Filter out non-file data: Check dataTransfer.types to skip entries like text/html or text/plain (which come from dragging entire emails instead of attachments). Only process entries marked as 'Files'.

Here’s a working implementation that includes all the above controls:

<div id="dropZone" style="border: 2px dashed #ccc; padding: 2rem; text-align: center; transition: all 0.2s;">
  Drag Outlook attachments here!
</div>

<script>
const dropZone = document.getElementById('dropZone');

// Prepare drop zone for incoming drags
['dragenter', 'dragover'].forEach(eventName => {
  dropZone.addEventListener(eventName, (e) => {
    e.preventDefault();
    // Add active drag state
    dropZone.style.borderColor = '#2196F3';
    dropZone.style.backgroundColor = '#e3f2fd';
  });
});

// Reset style when drag leaves
dropZone.addEventListener('dragleave', () => {
  resetDropZoneStyle();
});

// Handle the actual drop
dropZone.addEventListener('drop', (e) => {
  e.preventDefault();
  resetDropZoneStyle();

  const validFiles = [];

  // Process items first for Outlook compatibility
  if (e.dataTransfer.items) {
    Array.from(e.dataTransfer.items).forEach(item => {
      if (item.kind === 'file') {
        const file = item.getAsFile();
        if (file) validFiles.push(file);
      }
    });
  } else {
    // Fallback for simpler cases
    Array.from(e.dataTransfer.files).forEach(file => validFiles.push(file));
  }

  // Filter to only accept images and PDFs
  const allowedFiles = validFiles.filter(file => 
    file.type.startsWith('image/') || file.type === 'application/pdf'
  );

  if (allowedFiles.length === 0) {
    alert('No valid files found! Please drag images or PDF attachments.');
    return;
  }

  // Replace this with your component's file processing logic
  console.log('Accepted files ready for processing:', allowedFiles);
});

function resetDropZoneStyle() {
  dropZone.style.borderColor = '#ccc';
  dropZone.style.backgroundColor = 'transparent';
}
</script>

Overall, the process is very similar to native file drag-and-drop—you just need to add a few checks to handle Outlook’s specific data formats. You have full control over which files to accept, how to respond visually during the drag, and what to do with the files once they’re dropped.

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