Support to import files using drag and drop (#6438)

Fixes #6250
OpenRefine · Mar 29, 2024 · 4e4baad · 4e4baad
1 parent 83ee35c
commit 4e4baad
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 1 deletion.
diff --git a/main/webapp/modules/core/langs/translation-en.json b/main/webapp/modules/core/langs/translation-en.json
@@ -106,6 +106,7 @@
     "core-index-import/warning-clipboard": "You must paste some data to import.",
     "core-index-import/uploading-pasted-data": "Uploading pasted data…",
     "core-index-import/locate-files": "Locate one or more files on your computer to upload:",
+    "core-index-import/drag-files": "Drag files here",
     "core-index-import/enter-url": "Enter one or more web addresses (URLs) pointing to data to download:",
     "core-index-import/remove-row": "Remove this row",
     "core-index-import/clipboard-label": "Paste data from clipboard here:",

diff --git a/...ebapp/modules/core/scripts/index/default-importing-sources/import-from-computer-form.html b/...ebapp/modules/core/scripts/index/default-importing-sources/import-from-computer-form.html
@@ -1,5 +1,15 @@
 <form bind="form"><div class="grid-layout layout-normal"><table>
   <tr><td id="or-import-locate-files"></td></tr>
-  <tr><td><input type="file" multiple bind="fileInput" name="upload" /></td></tr>
+  <tr>
+    <td>
+
+      <div class="file-input-container">
+        <input type="file" multiple bind="fileInput" name="upload" class="file-input" />
+        <span class="file-input-text" id="drag-files"></span>
+      </div>
+
+    </td>
+  </tr>
   <tr><td><button bind="nextButton" class="button button-primary" type="button"></button></td></tr>
 </table></div></form>
+
diff --git a/main/webapp/modules/core/scripts/index/default-importing-sources/sources.js b/main/webapp/modules/core/scripts/index/default-importing-sources/sources.js
@@ -55,6 +55,7 @@ ThisComputerImportingSourceUI.prototype.attachUI = function(bodyDiv) {
   this._elmts = DOM.bind(bodyDiv);
 
   $('#or-import-locate-files').text($.i18n('core-index-import/locate-files'));
+  $('#drag-files').text($.i18n('core-index-import/drag-files'));
   this._elmts.nextButton.html($.i18n('core-buttons/next'));
 
   this._elmts.nextButton.on('click',function(evt) {

diff --git a/main/webapp/modules/core/styles/index/default-importing-sources.css b/main/webapp/modules/core/styles/index/default-importing-sources.css
@@ -40,3 +40,26 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
   max-width: 50em;
   height: 30em;
 }
+
+.file-input {
+    min-width: 200px;
+    height: 100px;
+    border: 2px solid #ccc;
+    border-radius: 5px;
+    padding: 5px;
+    box-sizing: border-box;
+}
+
+.file-input-container {
+    position: relative;
+}
+
+.file-input-text {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-65%, 0%);
+    pointer-events: none;
+    text-align: center;
+    color: #555;
+}