IE11+Oracle-ADF项目：如何让DropzoneJS调用AdfFileUploadManager替代POST URL？

Absolutely, you can hook DropzoneJS into Oracle ADF's AdfFileUploadManager.addFileToQueue() instead of relying on its default POST URL upload—this is a common pattern when pairing third-party drag-and-drop UIs with ADF's native file handling infrastructure. Below’s a step-by-step implementation tailored for your IE11 + ADF stack:

Step 1: Initialize Dropzone with core overrides #

First, disable Dropzone’s automatic upload and set a dummy URL (since we’re completely bypassing its default submission flow). Match other settings like file size/type limits to your ADF configuration:

// Initialize Dropzone with custom config
const dropzoneInstance = new Dropzone("#your-dropzone-container", {
  url: "#", // Dummy URL to satisfy Dropzone's required config
  autoProcessQueue: false, // Critical: Disable automatic upload
  uploadMultiple: false, // Adjust based on your ADF setup (start single-file if unsure)
  maxFilesize: 10, // Match your ADF upload size limit
  acceptedFiles: ".pdf,.doc,.docx,.xls,.xlsx", // Mirror ADF's allowed file types
  clickable: true, // Keep click-to-select functionality alongside drag-and-drop
});

Step 2: Hook Dropzone's file-add event to ADF's upload manager #

Listen for Dropzone’s addedfile event—this fires whenever a file is dragged or selected. In this handler, grab the File object and pass it directly to ADF’s addFileToQueue() method:

// Wait for the ADF page to fully load before attaching listeners
AdfPage.PAGE.addLoadListener(function() {
  // Listen for files added to Dropzone
  dropzoneInstance.on("addedfile", function(dropzoneFile) {
    // Get reference to ADF's upload manager
    const adfUploadManager = AdfFileUploadManager.getUploadManager();
    
    // Pass the file to ADF's queue
    adfUploadManager.addFileToQueue(dropzoneFile);
    
    // Optional: Remove the file from Dropzone's UI if you want to use ADF's native upload status UI
    // dropzoneInstance.removeFile(dropzoneFile);
    
    // Optional: Trigger immediate upload via ADF if needed
    // adfUploadManager.uploadAll();
  });
});

Step 3: Handle IE11-specific compatibility #

IE11 has limited HTML5 File API support, so keep these tweaks in mind:

• Use an IE11-compatible build of Dropzone (avoid newer ES6+ features if you’re not transpiling).
• Ensure ADF’s JavaScript libraries load before Dropzone—wrapping your Dropzone init in AdfPage.PAGE.addLoadListener() (as shown above) ensures this.
• If you encounter file object inconsistencies in IE11, wrap the Dropzone file in a simple object matching ADF’s expected structure (rarely needed but helpful as a fallback):

  const adfCompatibleFile = {
    name: dropzoneFile.name,
    size: dropzoneFile.size,
    type: dropzoneFile.type,
    getInputElement: function() { return dropzoneFile.previewElement.querySelector("input"); }
  };
  adfUploadManager.addFileToQueue(adfCompatibleFile);
  

Step 4: Optional: Sync Dropzone UI with ADF's upload status #

To keep Dropzone’s UI in sync with ADF’s upload progress, success, and failure events, attach listeners to ADF’s upload manager:

// Track upload progress
adfUploadManager.addUploadProgressListener(function(event) {
  const adfFile = event.getFile();
  const matchingDropzoneFile = dropzoneInstance.getFile(adfFile.name);
  
  if (matchingDropzoneFile) {
    // Update Dropzone's progress bar
    matchingDropzoneFile.upload.progress = event.getPercentComplete();
    dropzoneInstance.emit("uploadprogress", matchingDropzoneFile, event.getPercentComplete(), event.getBytesLoaded());
  }
});

// Handle upload success/failure
adfUploadManager.addUploadCompletionListener(function(event) {
  const adfFile = event.getFile();
  const matchingDropzoneFile = dropzoneInstance.getFile(adfFile.name);
  
  if (matchingDropzoneFile) {
    if (event.getStatus() === AdfFileUploadEvent.SUCCESS) {
      dropzoneInstance.emit("success", matchingDropzoneFile);
      dropzoneInstance.removeFile(matchingDropzoneFile); // Clean up UI
    } else {
      dropzoneInstance.emit("error", matchingDropzoneFile, event.getMessage());
    }
  }
});

This setup lets you leverage Dropzone’s polished drag-and-drop experience while offloading all backend file handling to ADF’s native AdfFileUploadManager—perfect for your project requirements.

内容的提问来源于stack exchange，提问作者A.E