Simplify file input in import datasource component

By using the custom-file-input from Bootstrap: https://getbootstrap.com/docs/4.3/components/input-group/#custom-file-input
camptocamp · Jul 16, 2019 · 9b8b43a · 9b8b43a
1 parent c0c38ef
commit 9b8b43a
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 33 deletions.
diff --git a/contribs/gmf/src/import/import.scss b/contribs/gmf/src/import/import.scss
@@ -2,9 +2,6 @@
 @import "~gmf/sass/typeahead.scss";
 
 gmf-importdatasource {
-  input[type=file] {
-    display: none;
-  }
 
   .gmf-importdatasource-url-form-group {
     background-color: #fff;

diff --git a/contribs/gmf/src/import/importdatasourceComponent.html b/contribs/gmf/src/import/importdatasourceComponent.html
@@ -15,26 +15,10 @@
     ng-show="$ctrl.mode === 'Local'">
     <div class="form-group">
       <div class="input-group">
-        <input
-          name="file"
-          type="file"
-          required
-        />
-        <input
-          class="form-control"
-          placeholder="{{'No file' | translate}}"
-          readonly
-          type="text"
-          value="{{$ctrl.fileNameAndSize}}"
-          ng-click="$ctrl.browse()"
-        />
-        <span class="input-group-btn">
-          <button
-            class="btn btn-default"
-            type="button"
-            ng-click="$ctrl.browse()"
-            translate>Browse</button>
-        </span>
+        <div class="custom-file">
+          <input name="file" type="file" class="custom-file-input" required>
+          <label class="custom-file-label" translate>No file</label>
+        </div>
       </div>
     </div>
     <div class="form-group">

diff --git a/contribs/gmf/src/import/importdatasourceComponent.js b/contribs/gmf/src/import/importdatasourceComponent.js
@@ -266,6 +266,13 @@ class Controller {
       const fileInput = /** @type {HTMLInputElement} */(this.fileInput_[0]);
       const files = fileInput.files;
       this.file = files && files[0] ? files[0] : null;
+
+      if (this.file) {
+        this.hasError = false;
+        // update the label
+        $(fileInput).next('.custom-file-label').html(this.fileNameAndSize);
+      }
+
       this.scope_.$apply();
     });
   }
@@ -316,14 +323,6 @@ class Controller {
     }
   }
 
-  /**
-   * Triggers a 'click' on the "Browse" button.
-   */
-  browse() {
-    this.hasError = false;
-    this.element_.find('input[type=file][name=file]').click();
-  }
-
   /**
    * Connect to given online resource URL.
    */

diff --git a/contribs/gmf/src/map/mousepositionComponent.html b/contribs/gmf/src/map/mousepositionComponent.html
@@ -1,7 +1,7 @@
 <div class="btn-group dropup">
-  <a class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
     <span class="gmf-mouseposition-control-target"></span>
-  </a>
+  </button>
   <ul class="dropdown-menu dropdown-menu-right" role="menu">
     <li class="dropdown-header" translate>Coordinate systems</li>
     <li ng-repeat="projitem in ::ctrl.projections">