Expose the ability to open file references from outside of Webamp

docs/usage.md

@@ -242,6 +242,21 @@ const unsubscribe = webamp.onMinimize(() => {
 unsubscribe();
 ```
 
+### `openFiles(files)`
+
+Ask Webamp to open a set of [files](https://developer.mozilla.org/en-US/docs/Web/API/File). Useful for implementing a file input or "drag and drop" target outside of Webamp.
+
+* `.zip` or `.wsz` files are opened as skins
+* `.eqf` files are opened as equalizer files
+* All other file types are assumed to be media files
+
+```JavaScript
+const someFileInput = document.getElementById('someFileInput');
+someFileInput.addEventListener('change', (e) => {
+    webamp.openFiles(e.target.files);
+});
+```
+
 ## Notes
 
 - Internet Explorer is not supported.

js/index.js

@@ -85,16 +85,6 @@ if ("URLSearchParams" in window) {
   skinUrl = params.get("skinUrl") || skinUrl;
 }
 
-function supressDragAndDrop(e) {
-  e.preventDefault();
-  e.dataTransfer.effectAllowed = "none";
-  e.dataTransfer.dropEffect = "none";
-}
-
-window.addEventListener("dragenter", supressDragAndDrop);
-window.addEventListener("dragover", supressDragAndDrop);
-window.addEventListener("drop", supressDragAndDrop);
-
 let lastActionType = null;
 
 // Filter out consecutive common actions
@@ -264,6 +254,20 @@ Raven.context(() => {
 
   webamp.renderWhenReady(document.getElementById("app"));
 
+  function supressDragAndDrop(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    e.dataTransfer.dropEffect = "link";
+    e.dataTransfer.effectAllowed = "link";
+  }
+
+  window.addEventListener("dragenter", supressDragAndDrop);
+  window.addEventListener("dragover", supressDragAndDrop);
+  window.addEventListener("drop", e => {
+    webamp.openFiles(e.dataTransfer.files);
+    supressDragAndDrop(e);
+  });
+
   // Expose webamp instance for debugging and integration tests.
   window.__webamp = webamp;
 });

js/webampLazy.js

@@ -206,6 +206,10 @@ class Winamp {
     return storeHas(this.store, state => !state.display.loading);
   }
 
+  openFiles(files) {
+    this.store.dispatch(loadFilesFromReferences(files));
+  }
+
   async renderWhenReady(node) {
     await this.skinIsLoaded();
     const genWindowComponents = {};