Drag and drop to upload samples (#4345)

* access samplerCanvas and add eventListners to it * add reader to read sample files * add conditions for sample upload * update guide * Refactor: Remove redundant code
sugarlabs · Feb 21, 2025 · 0e5fc93 · 0e5fc93
1 parent e6857f2
commit 0e5fc93
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 27 deletions.
diff --git a/guide/README.md b/guide/README.md
@@ -2347,6 +2347,9 @@ You can import sound samples (.WAV files) and use them with the *Set
 Instrument" block. The *Sampler* widget lets you set the center pitch
 of your sample so that it can be tuned.
 
+### How to import sound samples ?
+By clicking the upload samples icon or by perfoming a drag and drop to sample canvas.  
+
 ![widget](./sampler1.svg "Sampler Widget")
 
 You can then use the *Sample* block as you would any input to the *Set

diff --git a/js/widgets/sampler.js b/js/widgets/sampler.js
@@ -300,6 +300,57 @@ function SampleWidget() {
         return this._save_lock;
     };
 
+    //To handle sample files
+    this.handleFiles = (sampleFile) => {
+        const reader = new FileReader();
+        reader.readAsDataURL(sampleFile);
+
+        reader.onload = () =>{
+            // if the file is of .wav type, save it
+            if (reader.result.substring(reader.result.indexOf(":")+1, reader.result.indexOf(";")) === "audio/wav"){
+                if (reader.result.length <= 1333333){
+                    this.sampleData = reader.result;
+                    this.sampleName = sampleFile.name;
+                    this._addSample();
+                }
+                else{
+                    this.activity.errorMsg(_("Warning: Your sample cannot be loaded because it is >1MB."), this.timbreBlock);
+                }            
+            }
+             // otherwise, output error message
+            else{
+                this.showSampleTypeError();
+            }
+        }
+        reader.onloadend = () => {
+            if (reader.result) {
+                const value = [sampleFile.name, reader.result];
+            }
+        };
+    }
+
+    //Drag-and-Drop sample files
+    this.drag_and_drop = () => {
+        const dropZone = document.getElementsByClassName("samplerCanvas")[0];
+
+        dropZone.addEventListener("dragover", (e) => {
+            e.preventDefault();
+            dropZone.classList.add("dragover");
+        })
+
+        dropZone.addEventListener("dragleave", () => {
+            dropZone.classList.remove("dragover");
+        })
+
+        dropZone.addEventListener( "drop", (e) => {
+            e.preventDefault();
+            dropZone.classList.remove("dragover");
+
+            const sampleFiles = e.dataTransfer.files[0];
+            this.handleFiles(sampleFiles);
+        })
+    }
+
     /**
      * Initializes the Sample Widget.
      * @param {object} activity - The activity object.
@@ -382,33 +433,7 @@ function SampleWidget() {
             const __readerAction = function (event) {
                 window.scroll(0, 0);
                 const sampleFile = fileChooser.files[0];
-                const reader = new FileReader();
-                reader.readAsDataURL(sampleFile);
-
-                // eslint-disable-next-line no-unused-vars
-                reader.onload = function (event) {
-                    // if the file is of .wav type, save it
-                    if (reader.result.substring(reader.result.indexOf(":")+1, reader.result.indexOf(";")) === "audio/wav") {
-                        if (reader.result.length <= 1333333) {
-                            that.sampleData = reader.result;
-                            that.sampleName = fileChooser.files[0].name;
-                            that._addSample();
-                        } else {
-                            that.activity.errorMsg(_("Warning: Your sample cannot be loaded because it is >1MB."), that.timbreBlock);
-                        }
-                    }
-                    // otherwise, output error message
-                    else {
-                        that.showSampleTypeError();
-                    }
-                };
-
-                reader.onloadend = function () {
-                    if (reader.result) {
-                        // eslint-disable-next-line no-unused-vars
-                        const value = [fileChooser.files[0].name, reader.result];
-                    }
-                };
+                that.handleFiles(sampleFile);
                 fileChooser.removeEventListener("change", __readerAction);
             };
 
@@ -502,6 +527,7 @@ function SampleWidget() {
         this.pause();
 
         widgetWindow.sendToCenter();
+        this.drag_and_drop();
     };
 
     /**