Re-loading Q-file with Array Contents

[quasy]

Hi,

I am using q-file to allow the user to select multiple files. Once selected, the files show up but after saving the page and returning, the files are there but do not show filenames and the counter is all messed up. I am not uploading the files, only want to maintain the list and show it to the user when they return.

  <q-file
	accept=".pdf, image/*"
	multiple
	append
        use-chips
	hint="Attach files here"
	v-model="editedObject.filesArray"
	label="Files"
	counter />

Once selected:

After returning:

(the files are still in the object, I console.log it to confirm).

Thanks for looking at this question.

[beets]

@quasy Can you share more information on how you’re trying to persist the state? Are you storing the array in vuex, using keep alive? Is it possible to make a code sandbox to reproduce the issue?

[quasy]

Thanks for responding @beets. I am using vuex to save the state. This is on a dialog that is saved and the entire editedObject is saved.

On a sandbox, I am not sure how to do one with vuex that would persist and the be able to be retrieved.

One looking at the data further, the only thing in the retrieved data is an empty array so I think I am not saving the data properly somehow…

[beets]

@quasy Just to be clear, are you trying to persist between page loads (i.e. refresh) or just within the same instance of the page being loaded. My guess is that somewhere the file object is not being saved.

[quasy]

Thanks @beets. That is what I think. I simplified this even more. Here are the steps.

( a ) Template:

   <q-file
	accept=".pdf, image/*"
	class="q-ma-xs q-mb-md col-12"
	multiple
	append
	dense
	@input="link(filesLinked)"
	label="Files"
	use-chips
	hint="Click to select files to link"
	bottom-slots
	v-model="filesLinked"
	counter>
  </q-file>

( b ) The @input function (which adds the file objects to the editedObject:

 link (files) {
  this.editedObject.filePaths = []
  files.forEach(r => {
	this.editedObject.filePaths.push(r)
  })
  console.log(this.editedObject) // to check that it has the file array added - CONFIRMED GOOD!
}

( c ) Later, I save the object to the store (when the user clicks save):

        console.log(this.editedObject) // to check what is being sent to the store -- CONFIRMED GOOD!
        this.$store.dispatch('editPortfolio', this.editedObject)
        this.$store.dispatch('loadeditPortfolio')

( d ) When re-loading the dialog with data (re-hydrating the editedObject for display):

console.log(row) // to confirm that the data in the list of editedObjects has the saved data... IT DOES NOT! There is an array of n elements (same number as what was added) but they are not file objects {name: "filename.ext", path: "...", lastModified: timestamp, size: x, type: ...} Why???
this.editedObject = Object.assign({}, portfolioObject, row)
this.receipts = []
this.editedObject.filePaths.forEach(r => {
  this.files.push(r)
})
console.log(this.files) // to confirm it is loaded (since this is the v-model for q-file)
this.editPortfolioDialog = true // show the dialog

The issue is that the data is not being saved as I would expect. Amy I saving the file array incorrectly in pushing each item onto the array of this.editedObject.filePaths?

Thank you for your help with this.

[quasy]

Ok - figured this out. Somehow, my array does not like me taking what I get from the q-file and push it onto my array that I am storing. I have to take the attributes, I care about and create an object, pushing that onto my array for storage. The retrieval works perfectly.