[Spice-devel] [PATCH spice-html5 v2 4/5] Use drag and drop for transfering files from client to guest

Pavel Grunt pgrunt at redhat.com
Thu Jan 8 06:19:46 PST 2015


---
v2:
 - adds missing removeEventListeners
---
 filexfer.js     | 22 ++++++++++++++++++++++
 spice.html      | 15 +++++++++++++++
 spice_auto.html | 15 +++++++++++++++
 3 files changed, 52 insertions(+)

diff --git a/filexfer.js b/filexfer.js
index d472240..2ba0671 100644
--- a/filexfer.js
+++ b/filexfer.js
@@ -23,3 +23,25 @@ function SpiceFileXferTask(id, file)
     this.id = id;
     this.file = file;
 }
+
+function handle_file_dragover(e)
+{
+    e.stopPropagation();
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'copy';
+}
+
+function handle_file_drop(e)
+{
+    var sc = window.spice_connection;
+    var files = e.dataTransfer.files;
+
+    e.stopPropagation();
+    e.preventDefault();
+    for (var i = files.length - 1; i >= 0; i--)
+    {
+        if (files[i].type); // do not copy a directory
+            sc.file_xfer_start(files[i]);
+    }
+
+}
diff --git a/spice.html b/spice.html
index fc53a2a..000f23d 100644
--- a/spice.html
+++ b/spice.html
@@ -111,6 +111,11 @@
                 }
                 document.getElementById('connectButton').innerHTML = "Start";
                 document.getElementById('connectButton').onclick = connect;
+                if (window.File && window.FileReader && window.FileList && window.Blob)
+                {
+                    document.getElementById('spice-area').removeEventListener('dragover', handle_file_dragover, false);
+                    document.getElementById('spice-area').removeEventListener('drop', handle_file_drop, false);
+                }
                 console.log("<< disconnect");
             }
 
@@ -120,6 +125,16 @@
                 window.spice_connection = this;
 
                 resize_helper(this);
+
+                if (window.File && window.FileReader && window.FileList && window.Blob)
+                {
+                    document.getElementById('spice-area').addEventListener('dragover', handle_file_dragover, false);
+                    document.getElementById('spice-area').addEventListener('drop', handle_file_drop, false);
+                }
+                else
+                {
+                    console.log("File API is not supported");
+                }
             }
 
         </script>
diff --git a/spice_auto.html b/spice_auto.html
index 48dcae1..689b066 100644
--- a/spice_auto.html
+++ b/spice_auto.html
@@ -147,6 +147,11 @@
                 if (sc) {
                     sc.stop();
                 }
+                if (window.File && window.FileReader && window.FileList && window.Blob)
+                {
+                    document.getElementById('spice-area').removeEventListener('dragover', handle_file_dragover, false);
+                    document.getElementById('spice-area').removeEventListener('drop', handle_file_drop, false);
+                }
                 console.log("<< disconnect");
             }
 
@@ -156,6 +161,16 @@
                 window.spice_connection = this;
 
                 resize_helper(this);
+
+                if (window.File && window.FileReader && window.FileList && window.Blob)
+                {
+                    document.getElementById('spice-area').addEventListener('dragover', handle_file_dragover, false);
+                    document.getElementById('spice-area').addEventListener('drop', handle_file_drop, false);
+                }
+                else
+                {
+                    console.log("File API is not supported");
+                }
             }
 
             connect();
-- 
1.9.3



More information about the Spice-devel mailing list