title: Why label of file size on filepond show 1kb every file when displaying edit form?
body: <p>I have a module that has add and edit form. In the add and edit form, the user can upload files. When edit, it will show uploaded files</p>
  <p>In add form, it works. When user upload, file size of file displays file size correctly</p>
  <p>But my problem is when edit form, each file displays 1kb file size on all files</p>
  <p>You can see the problem here:</p>
  <p><a href="https://i.stack.imgur.com/gfKLy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gfKLy.png" alt="enter image description here" /></a></p>
  <p>I use filepond package to upload files</p>
  <p>My vue component like this :</p>
  <pre><code>&lt;template&gt;
      &lt;b-card&gt;
        &lt;b-form @submit=&quot;onSubmit&quot;&gt;
          &lt;b-row&gt;
            &lt;b-col cols=&quot;8&quot;&gt;
              ...
              &lt;b-form-group
                id=&quot;fieldset-horizontal&quot;
                label-cols-sm=&quot;4&quot;
                label-cols-lg=&quot;2&quot;
                content-cols-sm
                content-cols-lg=&quot;8&quot;
                label-for=&quot;description&quot;
              &gt;
                &lt;template v-slot:label&gt;
                  Description
                &lt;/template&gt;
                &lt;b-form-input id=&quot;description&quot; v-model=&quot;description&quot; required  maxlength=&quot;100&quot;&gt;&lt;/b-form-input&gt;
              &lt;/b-form-group&gt;
              &lt;b-form-group
                id=&quot;fieldset-horizontal&quot;
                label-cols-sm=&quot;4&quot;
                label-cols-lg=&quot;2&quot;
                content-cols-sm
                content-cols-lg=&quot;9&quot;
                label-for=&quot;files&quot;
              &gt;
                &lt;template v-slot:label&gt;
                  Files 
                &lt;/template&gt;
                &lt;file-pond v-if=&quot;this.$route.params.id&quot;
                  label-idle='Drag and drop files here... or &lt;span class=&quot;filepond--label-action&quot;&gt; Browse &lt;/span&gt;'
                  v-bind:allow-multiple=&quot;true&quot;
                  v-bind:server=&quot;server&quot;
                  v-bind:files=&quot;files&quot;
                /&gt;
                &lt;file-pond v-else
                  label-idle='Drag and drop files here... or &lt;span class=&quot;filepond--label-action&quot;&gt; Browse &lt;/span&gt;'
                  v-bind:allow-multiple=&quot;true&quot;
                  accepted-file-types='application/pdf, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, .xlsx'
                  v-bind:server=&quot;server&quot;
                  v-bind:required=&quot;true&quot;
                /&gt;
              &lt;/b-form-group&gt;
            &lt;/b-col&gt;
            &lt;b-col cols=&quot;4&quot;&gt;
              &lt;b-button type=&quot;submit&quot; @click=&quot;save&quot; variant=&quot;success&quot;&gt;Save&lt;/b-button&gt;
            &lt;/b-col&gt;
          &lt;/b-row&gt;
        &lt;/b-form&gt;
      &lt;/b-card&gt;
    &lt;/template&gt;
    
    &lt;script&gt;
    
    import {  mapGetters, mapActions } from &quot;vuex&quot;
    import vueFilePond from &quot;vue-filepond&quot;
    ...
    
    export default {
      data() {
        return {
          files: [],
          server: {
            process: (fieldName, file, metadata, load, error, progress, abort) =&gt; {
              if(file.lastModified) { 
                if (this.dataFiles.findIndex(a =&gt; a.fileName == file.name) &gt; -1) {
                    error(new Error('More than one file with the same name cannot be attached'));
                }
                else {
                  const data = new FormData()
                  data.append('files[]', file)
                  const CancelToken = axios.CancelToken
                  const source = CancelToken.source()
                  const config = {
                    method: 'post',
                    url: `${apiUrl}/upload`,
                    data : data,
                    cancelToken: source.token,
                    onUploadProgress: (e) =&gt; {
                        progress(e.lengthComputable, e.loaded, e.total)
                    },
                  }
                  axios(config)
                  .then(response =&gt; {
                    this.setSaveFile({ 
                      id: response.data.id, 
                      name: response.data.name, 
                      url: response.data.url,
                    })
                    load(response.data.id)
                  })
                  .catch((thrown) =&gt; {
                    if (axios.isCancel(thrown)) {
                      console.log('Request canceled', thrown.message)
                    } else {
                      error('error')
                    }
                  })
                  return {
                    abort: () =&gt; {
                      source.cancel('Operation canceled by the user.')
                    }
                  }
                }
              }
              else { /* this will show data file when edit data */
                this.setSaveFile({ 
                  id: metadata.id, 
                  name: metadata.name, 
                  url: metadata.url,
                })
                load(metadata.id)
              }
            },
            revert: (uniqueFileId, load, error) =&gt; {
              const type = this.$route.params.id ? 'edit' : 'add'
              this.setDeleteFile({id: uniqueFileId, type: type } )
              error('error')
              load()
            },
          },
        }
      },
      async mounted() {
        if(this.$route.params.id) {
          await this.setEdit(this.$route.params.id)
        }
      },
      computed: {
        ...mapGetters([
          &quot;dataFiles&quot;,
          &quot;dataEditSuccess&quot;,
        ])
      },
      watch: {
        dataEditSuccess: {
          handler(data) {
            if (this.$route.params.id &amp;&amp; data) {
              this.showEditData()
            }
          },
          immediate: true
        }
      },
      methods: {
        ...mapActions([
          &quot;setSaveFile&quot;, 
          &quot;setDeleteFile&quot;,
          &quot;setEdit&quot;,
        ]),    
        showEditData() {
          const data = this.dataEditSuccess
          this.description = data.description
          for (let key in data.files) {
            let filePost = {
              source: data.files[key].name,
              options: {
                metadata: {
                  id: data.files[key].id, 
                  name: data.files[key].name, 
                  url: data.files[key].url,
                },
              },
            }
            this.files.push(filePost)
          }
        },     
      },
      ...
    }
    &lt;/script&gt;
    
  </code></pre>
  <p>How can I solve this problem?</p>
  <p>Note :</p>
  <p>The docs : <a href="https://github.com/pqina/vue-filepond" rel="nofollow noreferrer">https://github.com/pqina/vue-filepond</a></p>
  <p>Update :</p>
  <p>I make my code in codesandbox like this : <a href="https://codesandbox.io/s/vue-filepond-live-demo-forked-0v3r3j" rel="nofollow noreferrer">https://codesandbox.io/s/vue-filepond-live-demo-forked-0v3r3j</a></p>
  <p>Here it looks the same file size</p>
  <p>Actually I can uncomment this script to solve my problem :</p>
  <pre><code>file: {
     name: this.filesFromApi[key].name,
     size: this.filesFromApi[key].size,
  },
  </code></pre>
  <p>But it makes me unable to fetch <code>metadata</code> in process. So <code>process</code> cannot be called. You can try it and see in the console log</p>