Inform user if the imported file is not valid

contribs/gmf/src/datasource/ExternalDataSourcesManager.js

@@ -464,9 +464,11 @@ const exports = class {
 
   /**
    * @param {!File} file File.
+   * @param {function(boolean):*?} opt_callback Callback called with true if the file is loaded and added.
+   *     Otherwise with false.
    * @export
    */
-  createAndAddDataSourceFromFile(file) {
+  createAndAddDataSourceFromFile(file, opt_callback) {
     this.getFileDataSource_(file).then(
       (dataSource) => {
         const fileGroup = this.fileGroup_;
@@ -488,9 +490,17 @@ const exports = class {
 
         // (5) Finally, add it to the ngeo collection
         this.dataSources_.push(dataSource);
+
+        // call the callback.
+        if (opt_callback) {
+          opt_callback(true);
+        }
       },
       (rejections) => {
-        googAsserts.fail(`Failed to load file: ${file.name}`);
+        console.error(`Failed to load file: ${file.name}`);
+        if (opt_callback) {
+          opt_callback(false);
+        }
       }
     );
   }

contribs/gmf/src/import/import.less

@@ -1,6 +1,7 @@
 @import "~font-awesome/less/variables.less";
 @import "~gmf/less/typeahead.less";
 @import "~gmf/less/vars.less";
+@import "~bootstrap/less/variables.less";
 
 gmf-importdatasource {
   input[type=file] {
@@ -10,6 +11,9 @@ gmf-importdatasource {
   .gmf-importdatasource-url-form-group {
     background-color: #fff;
   }
+  .btn.has-error {
+    color: @brand-danger;
+  }
 }
 
 gmf-wmscapabilitylayertreenode,

contribs/gmf/src/import/importdatasourceComponent.html

@@ -2,7 +2,8 @@
   <select
     class="form-control"
     ng-model="$ctrl.mode"
-    ng-options="mode | translate for mode in $ctrl.modes">
+    ng-options="mode | translate for mode in $ctrl.modes"
+    ng-click="$ctrl.hasError = false">
   </select>
 </div>
 
@@ -39,12 +40,14 @@
     <div class="form-group">
       <button
         class="btn btn-sm btn-default form-control"
+        ng-class="{'has-error': $ctrl.hasError}"
         title="{{'Load a file from local' | translate}}"
         type="submit"
         ng-click="idsl_form.$valid && $ctrl.load()"
-        ng-disabled="$ctrl.file === undefined"
+        ng-disabled="$ctrl.file === undefined || $ctrl.hasError"
       >
-        <span>{{'Load local file' | translate}}</span>
+        <span ng-if="!$ctrl.hasError">{{'Load local file' | translate}}</span>
+        <span ng-if="$ctrl.hasError">{{'Unable to load the file' | translate}}</span>
       </button>
     </div>
   </form>
@@ -68,6 +71,7 @@
     <div class="form-group">
       <button
         class="btn btn-sm btn-default form-control gmf-importdatasource-connect-btn"
+        ng-class="{'has-error': $ctrl.hasError}"
         title="{{'Connect to online resource' | translate}}"
         type="submit"
         ng-click="idsc_form.$valid && $ctrl.connect()"

contribs/gmf/src/import/importdatasourceComponent.js

@@ -290,6 +290,7 @@ exports.Controller_ = class {
    * @export
    */
   browse() {
+    this.hasError = false;
     this.element_.find('input[type=file][name=file]').click();
   }
 
@@ -338,7 +339,11 @@ exports.Controller_ = class {
    */
   load() {
     const file = googAsserts.assert(this.file);
-    this.gmfExternalDataSourcesManager_.createAndAddDataSourceFromFile(file);
+    this.gmfExternalDataSourcesManager_.createAndAddDataSourceFromFile(file, (success) => {
+      if (!success) {
+        this.hasError = true;
+      }
+    });
   }
 
   /**