1

In my app, I require to simulate the MouseEvent type drop and add files to its dataTransfer. My current approach is like this:

let dropEvent = new MouseEvent('drop', {
      view: window,
      bubbles: true,
      cancelable: true
    });
    dropEvent.dataTransfer = {files: this.refs.inputFile.files};

this.refs.fileUploader.dispatchEvent(dropEvent);

The approach works on Chrome and Firefox but not on Safari. The error on Safari is:

TypeError: Attempted to assign to readonly property.

Can I have some feedbacks on doing it in a cross-browser supported manner?

abhinavmsra
  • 666
  • 6
  • 21
  • See [Simulate drop file event](http://stackoverflow.com/questions/22365796/simulate-drop-file-event/) – guest271314 Dec 29 '16 at 06:00
  • @guest271314 but that post doesnt deal with Safari specific issue. – abhinavmsra Dec 29 '16 at 08:05
  • Have you tried approach at link? Is issue safari browser or pattern used at Question? – guest271314 Dec 29 '16 at 09:07
  • @guest271314 i cannot do that approach. The solution there proposes to call the `ondrop` function but I cannot do that because i use a plugin that listens to the `drop` event on a dom element. So, I need to trigger a Mouse event on that element not call the `ondrop` function manually. – abhinavmsra Dec 29 '16 at 10:31
  • _"The solution there proposes to call the `ondrop` function but I cannot do that because i use a plugin that listens to the `drop` event on a dom element. So, I need to trigger a Mouse event on that element not call the ondrop function manually."_ If you are using a plugin that listens to `drop` event what is purpose of creating a `MouseEvent` with `type` set to `drop`? – guest271314 Dec 29 '16 at 10:36
  • @guest271314 The problem is the plugin only responds to `drop` events but I need to support conventional file fields as well i.e. User can `dnd` files and also upload files using conventional file field. I want to trigger the same `drop` event when the user uploads file from the filefield. Above code works on Chrome and Firefox but not on Safari. – abhinavmsra Dec 29 '16 at 10:44
  • Have not tried safari. Does `this.refs.fileUploader` have a `drop` handler attached? It is not possible to write files to `FileList` object. You should be able to adjust plugin to accept `FileList` from `` element. Have you attached `change` event to `` element? Can you create a plnkr http://plnkr.co to demonstrate working approach? – guest271314 Dec 29 '16 at 16:44
  • Have you tried approach at linked Question? The `files` parameter at `event.dataTransfer.files` should be within an array `dropEvent.dataTransfer = {files: [this.refs.inputFile.files]};` – guest271314 Dec 29 '16 at 16:51

0 Answers0