react-dnd backend that ignores "native items" like files (for use in drag and drop image upload, etc)

README.md

NonNativeHTML5Backend

Based on https://github.com/AgentME/react-dnd-html5-mixed-backend/, this local Backend extends react-dnd-html5-backend to prevent it from taking over "native items" (files, for example).

This is untested, but worked in my application. There is no promise this won't make your computer explode, etc.

How to use

// If using react-dnd-html-backend
import HTML5Backend from 'react-dnd-html5-backend';
export default DragDropContext(HTML5Backend)(YourComponent);

// If using local NonNativeHTML5Backend
import NonNativeHTML5Backend from './NonNativeHTML5Backend';
export default DragDropContext(NonNativeHTML5Backend)(YourComponent);

NonNativeHTML5Backend.js

import HTML5Backend from 'react-dnd-html5-backend/lib/HTML5Backend';

class NonNativeHTML5Backend extends HTML5Backend {
  constructor(manager) {
    super(manager);

    // Rebind our overwritten methods
    this.handleTopDrop = this.handleTopDrop.bind(this);
    this.handleTopDropCapture = this.handleTopDropCapture.bind(this);
    this.handleTopDragOver = this.handleTopDragOver.bind(this);
    this.handleTopDragLeaveCapture = this.handleTopDragLeaveCapture.bind(this);
  }

  handleTopDragOver(e) {
    if (this.isDraggingNativeItem()) {
      return;
    }

    super.handleTopDragOver(e);
  }

  handleTopDragLeaveCapture(e) {
    if (this.isDraggingNativeItem()) {
      return;
    }

    super.handleTopDragLeaveCapture(e);
  }

  handleTopDropCapture(e) {
    if (this.isDraggingNativeItem()) {
      return;
    }

    super.handleTopDropCapture(e);
  }

  handleTopDrop(e) {
    if (!this.monitor.isDragging() || this.isDraggingNativeItem()) {
      return;
    }

    super.handleTopDrop(e);
  }
}

export default function createHTML5Backend(manager) {
  return new NonNativeHTML5Backend(manager);
}

+1 for it.

awesome thanks a lot. This was what I was looking for!

awesome, thank you so much +1

@nickpresta This solves my problem, thanks!

However, it does introduce an issue where if I have react-dnd draggable items, beginning to drag one causes this error:
Cannot call beginDrag while dragging. Would you happen to know why?