docs(QFile): Add upload progress example quasarframework#6193 (quasarframework#6199)

* docs(QFile): Add upload progress example quasarframework#6193

* feat(QFile): Try to update the input real model if browser allows

* Use local test server for upload

* Update QFile.js

Co-authored-by: Razvan Stoenescu <razvan.stoenescu@gmail.com>

Author: pdanpdan

docs/src/examples/QFile/WithProgress.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="q-pa-md column items-start q-gutter-y-md">
+    <q-file
+      :value="files"
+      @input="updateFiles"
+      label="Pick files"
+      outlined
+      multiple
+      :clearable="uploading === null"
+      style="max-width: 400px"
+    >
+      <template v-slot:file="{ index, file }">
+        <q-chip
+          class="full-width q-my-xs"
+          :removable="uploading !== null && uploadProgress[index].percent < 1"
+          square
+          @remove="cancelFile(index)"
+        >
+          <q-linear-progress
+            class="absolute-full full-height"
+            :value="uploadProgress[index].percent"
+            :color="uploadProgress[index].color"
+            track-color="grey-2"
+            stripped
+          />
+
+          <q-avatar>
+            <q-icon :name="uploadProgress[index].icon" />
+          </q-avatar>
+
+          <div class="ellipsis relative-position">
+            {{ file.name }}
+          </div>
+
+          <q-tooltip>
+            {{ file.name }}
+          </q-tooltip>
+        </q-chip>
+      </template>
+    </q-file>
+
+    <q-btn class="q-mt-sm" color="primary" label="Upload" @click="upload" />
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      files: null,
+      uploadProgress: [],
+      uploading: null
+    }
+  },
+
+  methods: {
+    cancelFile (index) {
+      this.uploadProgress[index] = {
+        ...this.uploadProgress[index],
+        error: true,
+        color: 'orange-2'
+      }
+    },
+
+    updateFiles (files) {
+      this.files = files
+      this.uploadProgress = (files || []).map(file => ({
+        error: false,
+        color: 'green-2',
+        percent: 0,
+        icon: file.type.indexOf('video/') === 0
+          ? 'movie'
+          : (file.type.indexOf('image/') === 0
+            ? 'photo'
+            : (file.type.indexOf('audio/') === 0
+              ? 'audiotrack'
+              : 'insert_drive_file'
+            )
+          )
+      }))
+    },
+
+    upload () {
+      clearTimeout(this.uploading)
+
+      const allDone = this.uploadProgress.every(progress => progress.percent === 1)
+
+      this.uploadProgress = this.uploadProgress.map(progress => ({
+        ...progress,
+        error: false,
+        color: 'green-2',
+        percent: allDone === true ? 0 : progress.percent
+      }))
+
+      this.__updateUploadProgress()
+    },
+
+    __updateUploadProgress () {
+      let done = true
+
+      this.uploadProgress = this.uploadProgress.map(progress => {
+        if (progress.percent === 1 || progress.error === true) {
+          return progress
+        }
+
+        const percent = Math.min(1, progress.percent + Math.random() / 10)
+        const error = percent < 1 && Math.random() > 0.95
+
+        if (error === false && percent < 1 && done === true) {
+          done = false
+        }
+
+        return {
+          ...progress,
+          error,
+          color: error === true ? 'red-2' : 'green-2',
+          percent
+        }
+      })
+
+      this.uploading = done !== true
+        ? setTimeout(this.__updateUploadProgress, 300)
+        : null
+    }
+  },
+
+  beforeDestroy () {
+    clearTimeout(this.uploading)
+  }
+}
+</script>

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

@@ -63,6 +63,10 @@ Under the covers, QFile uses a native input. Due to browser security policy, it
 
 <doc-example title="With chips" file="QFile/WithChips" />
 
+### Using progress indicator
+
+<doc-example title="With progress indicator" file="QFile/WithProgress" />
+
 ### Restricting files
 
 <doc-example title="Basic restrictions" file="QFile/RestrictionBasic" />

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

@@ -1,12 +1,16 @@
 <template>
   <div class="q-layout-padding">
-    <div style="max-width: 600px;" class="q-gutter-y-md">
-      <q-file filled v-model="fileS" label="Single" clearable />
-      <q-file color="yellow" filled v-model="fileM" multiple label="Multiple" clearable />
+    <form action="http://localhost:4444/upload" method="post" enctype="multipart/form-data" target="wind1" style="max-width: 600px;" class="q-gutter-y-md">
+      <q-file name="file1" filled v-model="fileS" label="Single" clearable />
+      <q-file name="file2" color="yellow" filled v-model="fileM" multiple label="Multiple" clearable />
 
-      <q-file color="accent" filled v-model="fileS" use-chips label="Single chips" clearable />
-      <q-file color="accent" filled v-model="fileM" multiple use-chips label="Multiple chips" clearable counter max-files="3" />
-    </div>
+      <q-file name="file3" color="accent" filled v-model="fileS" use-chips label="Single chips" clearable />
+      <q-file name="file4" color="accent" filled v-model="fileM" multiple use-chips label="Multiple chips" clearable counter max-files="3" />
+
+      <q-btn label="Move first file to single" @click="testMove" />
+
+      <q-btn type="submit" label="Submit" />
+    </form>
   </div>
 </template>
 
@@ -17,6 +21,16 @@ export default {
       fileS: null,
       fileM: null
     }
+  },
+
+  methods: {
+    testMove () {
+      if (Array.isArray(this.fileM) === false || this.fileM.length === 0) {
+        return
+      }
+
+      this.fileS = this.fileM.splice(0, 1)[0]
+    }
   }
 }
 </script>

ui/dev/upload-server/server.js

@@ -46,6 +46,6 @@ app.post('/upload', (req, res) => {
 })
 
 app.listen(port, () => {
-  console.log('\nUpload server running on http://localhost:' + port)
+  console.log('\nUpload server running on http://localhost:' + port + '/upload')
   console.log('You can now upload from main dev server using QUploader')
 })

ui/src/components/file/QFile.js

@@ -43,9 +43,32 @@ export default Vue.extend({
 
   watch: {
     value (val) {
-      if (val === void 0 || val === null) {
-        this.$refs.input.value = null
+      if (this.$refs.input === void 0) {
+        return
       }
+
+      try {
+        if (val === void 0 || val === null) {
+          this.$refs.input.value = ''
+          return
+        }
+
+        const dt = 'DataTransfer' in window
+          ? new DataTransfer()
+          : ('ClipboardEvent' in window
+            ? new ClipboardEvent('').clipboardData
+            : void 0
+          )
+
+        if (dt !== void 0) {
+          (Array.isArray(val) === true ? val : [val]).forEach(file => {
+            dt.items.add(file)
+          })
+
+          this.$refs.input.files = dt.files
+        }
+      }
+      catch (e) { }
     }
   },