MinimalFileInput - Add the ability to select one or more files.

Author: csavelief

dist/cjs/main.js

@@ -73,8 +73,8 @@
 <script>
 
   const env = 'www';
-  const client = 'acme';
-  const apiKey = 'xxx';
+  const client = 'ista';
+  const apiKey = '';
   const baseUrl = `https://${env}.${client}.computablefacts.com`;
   const url = `https://${env}.${client}.computablefacts.com/api/v2/public/json-rpc?api_token=${apiKey}`;
 
@@ -83,6 +83,7 @@
     const httpClient = new com.computablefacts.platform.HttpClient();
     httpClient.init(baseUrl, apiKey);
     httpClient.whoAmI().then(response => console.log(response));
+
     /*
       httpClient.findObjects({
         format: 'arrays', dataset: 'rnic-t4-2023', sample_size: 10, cursor: null, json_query: 'TEXT:vérif*',
@@ -92,23 +93,36 @@
           json_ids: response.data,
         });
       }).then(response => console.log(response));
-    */
+*//*
+    httpClient.findObjects({
+       format: 'arrays',dataset: 'job-syndics-clients-avec-codes-communes-2', sample_size: 10, json_query: 'NOM:"sevig*"',
+    }).then(response => console.log(response));
+
+    httpClient.findObjects({
+      format: 'arrays',dataset: 'job-syndics-clients-avec-codes-communes-2', sample_size: 10, json_query: 'CAGTCO:[94 TO 94]',
+    }).then(response => console.log(response));
+*/
+    httpClient.findObjects({
+      format: 'arrays',dataset: 'job-syndics-clients-avec-codes-communes-2', sample_size: 10, json_query: 'NOM:"sevig*" AND CAGTCO:[94 TO 94]',
+    }).then(response => console.log(response));
+
     /*
       httpClient.findTerms({
-        dataset: 'test-ocr-irve', sample_size: 10, json_query: 'TEXT:blabla*',
+        dataset: 'job-syndics-clients-avec-codes-communes-2', sample_size: 10, json_query: 'NOM:"sevig*"',
       }).then(response => console.log(response));
-    */
+  */
     /*
       httpClient.executeSqlQuery({
         format: 'arrays_with_header', invalidate_cache: true, force_rebuild: true, sql_query: 'SELECT ID FROM tmp_docs_irve LIMIT 30',
       }).then(response => console.log(response));
     */
+    /*
     httpClient.executeSqlQuery({
       format: 'arrays_with_header',
       invalidate_cache: true,
       sql_query: 'SELECT ID FROM tmp_copros_clientes_2_3_denormalise LIMIT 30',
     }).then(response => console.log(response));
-
+    */
     /*
       httpClient.getObjects({
         dataset: 'test-ocr-irve',
@@ -532,6 +546,7 @@
       container: 'file-input',
       text: 'Sélectionner un fichier...',
       buttonText: 'Rechercher...',
+      multiple: true,
       on_selection_change: file => console.log(file),
     });
   }

dist/cjs/main.js.map

@@ -203,7 +203,8 @@ blueprintjs.Blueprintjs = class extends widgets.Widget {
         break;
       }
       case 'FileInput': {
-        obj.el = new blueprintjs.MinimalFileInput(container);
+        const multiple = obj.multiple;
+        obj.el = new blueprintjs.MinimalFileInput(container, multiple);
         break;
       }
       case 'RadioGroup': {
@@ -2314,15 +2315,17 @@ blueprintjs.MinimalFileInput = class extends blueprintjs.Blueprintjs {
 
   /**
    * @param {Element} container the parent element.
+   * @param {boolean} multiple true iif the user must be able to select one or more files.
    * @constructor
    */
-  constructor(container) {
+  constructor(container, multiple) {
     super(container);
     this.observers_ = new observers.Subject();
     this.disabled_ = false;
     this.text_ = null;
     this.buttonText_ = null;
     this.fill_ = true;
+    this.multiple_ = multiple === true;
     this.render();
   }
 
@@ -2362,6 +2365,15 @@ blueprintjs.MinimalFileInput = class extends blueprintjs.Blueprintjs {
     this.render();
   }
 
+  get multiple() {
+    return this.multiple_;
+  }
+
+  set multiple(value) {
+    this.multiple_ = value;
+    this.render();
+  }
+
   /**
    * Listen to the `selection-change` event.
    *
@@ -2380,8 +2392,17 @@ blueprintjs.MinimalFileInput = class extends blueprintjs.Blueprintjs {
   }
 
   _newElement() {
+    const props = {};
+    if (this.multiple) {
+      props.multiple = 'multiple';
+    }
     return React.createElement(FileInput, {
-      disabled: this.disabled, text: this.text, buttonText: this.buttonText, fill: this.fill, onInputChange: (el) => {
+      inputProps: props,
+      disabled: this.disabled,
+      text: this.text,
+      buttonText: this.buttonText,
+      fill: this.fill,
+      onInputChange: (el) => {
         this.text = el.target.files[0].name;
         this.render();
         this.observers_.notify('selection-change', el.target.files[0]);