feat(QFile): New Boolean prop --> append quasarframework#6955

Author: rstoenescu

docs/src/examples/QFile/AppendingFiles.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="q-pa-md">
+    <q-file
+      v-model="files"
+      label="Pick files"
+      filled
+      multiple
+      append
+      style="max-width: 300px"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      files: null
+    }
+  }
+}
+</script>

docs/src/pages/vue-components/file-picker.md

@@ -53,6 +53,14 @@ Under the covers, QFile uses a native input. Due to browser security policy, it
 
 <doc-example title="Multiple files" file="QFile/BasicMultiple" />
 
+### Appending files <q-badge align="top" label="v1.11.3+" />
+
+By default, QFile replaces the model each time the user selects any files through the popup. However, when you are accepting multiple files (`multiple` prop) you can change this behavior and append the new selection to the model rather than replacing its old value.
+
+Below you can pick files multiple times and QFile will keep on appending them to the model:
+
+<doc-example title="Appending files" file="QFile/AppendingFiles" />
+
 ### Counters
 
 <doc-example title="Basic counter" file="QFile/CounterBasic" />

ui/dev/src/pages/form/file-picker.vue

@@ -18,13 +18,18 @@
 
       <q-btn type="submit" label="Submit" />
     </form>
+
+    <div class="q-mt-md">
+      <q-file name="file1" filled v-model="multiAppend" label="Mutiple & Append" clearable multiple append />
+    </div>
   </div>
 </template>
 
 <script>
 export default {
   data () {
     return {
+      multiAppend: null,
       fileS: null,
       fileM: null,
 

ui/src/components/file/QFile.js

@@ -21,6 +21,7 @@ export default Vue.extend({
       ? {}
       : [ File, FileList, Array ],
 
+    append: Boolean,
     useChips: Boolean,
     displayValue: [ String, Number ],
 
@@ -88,6 +89,10 @@ export default Vue.extend({
         id: this.targetUid,
         disabled: this.editable !== true
       }
+    },
+
+    isAppending () {
+      return this.multiple === true && this.append === true
     }
   },
 
@@ -119,8 +124,13 @@ export default Vue.extend({
     },
 
     __addFiles (e, fileList) {
-      const files = this.__processFiles(e, fileList)
-      files !== void 0 && this.__emitValue(files)
+      const files = this.__processFiles(e, fileList, this.innerValue, this.isAppending)
+
+      files !== void 0 && this.__emitValue(
+        this.isAppending === true
+          ? this.innerValue.concat(files)
+          : files
+      )
     },
 
     __getControl (h) {
@@ -211,6 +221,9 @@ export default Vue.extend({
 
   created () {
     this.fieldClass = 'q-file q-field--auto-height'
-    this.type = 'file' // necessary for QField's clearable
+
+    // necessary for QField's clearable
+    // and FileValueMixin
+    this.type = 'file'
   }
 })

ui/src/components/file/QFile.json

@@ -14,6 +14,13 @@
       "category": "model"
     },
 
+    "append": {
+      "type": "Boolean",
+      "desc": "Append file(s) to current model rather than replacing them; Has effect only when using 'multiple' mode",
+      "category": "behavior",
+      "addedIn": "v1.11.3"
+    },
+
     "display-value": {
       "type": [ "Number", "String" ],
       "desc": "Override default selection string, if not using 'file' or 'selected' scoped slots and if not using 'use-chips' prop",