Cannot modify the fileRecord in upload handler

[jigarzon]

Hi, after uploading, I need to update the url property in the fileRecord object, in order to store in my database the fileRecord with all the information needed to see the files later (as commented in the section "Demo 1. Preloading Existing Files" of the documentation).

I try to modify the fileRecord object in this way:

uploaded(ev) {
      var files = Array.isArray(ev) ? ev : [ev]
      for (var file of files) {
        var respObj = JSON.parse(file.request.response)
        var backendResponse = respObj.result.files.file[0]   //this is the way my backend returns it
        if (fileObj) {
          file.fileRecord.url = backendResponse.url
        }
        
      }
    },

The problem is that after modifying the fileRecord, it's not reflected in the v-model instance (the files have no url set)
I even tried to make something more complex: finding the specific file in the model and updating it manually... but it still doesn't work:

 uploaded(ev) {
      var files = Array.isArray(ev) ? ev : [ev]
      for (var file of files) {
        var respObj = JSON.parse(file.request.response)
        var backendResponse = respObj.result.files.file[0]
        var fileRecord = this.fileRecords.find(
          f => f.upload.data.result.files.file[0].name === backendResponse.name
        )
        if (fileRecord) {
          fileRecord.url =backendResponse.url
        }
      }

    },

What is the common way of resolving this?

[safrazik]

the reactive (i.e: reflected in the v-model instance) properties of fileRecord are converted into functions from primitive values. The only supported reactive properties at the moment are:
(when called without argument, it's a getter, otherwise setter.

{
  progress: 0,
  name: 'Some name.txt'
  // ...
}

• fileRecord.progress(value?: number) - get/set upload progress
• fileRecord.name() - get file name (readonly)

As your use makes a lot of sense, maybe url should be changed to a reactive property as well.

What is the common way of resolving this?

The ideal solution would be (after implementing fileRecord.url() reactive property)

 uploaded(event) {
      var responses = Array.isArray(event) ? event : [event]
      for (var response of responses) {
        var respObj = response.data
        var backendResponse = respObj.result.files.file[0] //this is the way my backend returns it
        var fileRecord = response.fileRecord
        fileRecord.url(backendResponse.url)
      }
  },

Workaround for now:

 uploaded(event) {
      var responses = Array.isArray(event) ? event : [event]
      for (var response of responses) {
        var respObj = response.data
        var backendResponse = respObj.result.files.file[0] //this is the way my backend returns it
        var fileRecord = response.fileRecord
        var index = this.fileRecords.indexOf(fileRecord);
        // for re-calculation
        this.fileRecords[index] = {
          name: fileRecord.name,
          // ...
          url: backendResponse.url,
        }
      }
  },

[jigarzon]

I've tried that but it's still not reactive.

[jigarzon]

This is the exact code I'm using:

  uploaded (ev) {
      var files = Array.isArray(ev) ? ev : [ev]
      for (var file of files) {
        var respObj = JSON.parse(file.request.response)
        var backendResponse = respObj.result.files.file[0]
        var fileRecord = file.fileRecord
        var index = this.fileRecords.indexOf(fileRecord)
        this.fileRecords[index] = {
          name: fileRecord.name,
          url:  backendResponse.url
        }
      }
    },

[safrazik]

You have to fill other props as well

        this.fileRecords[index] = {
          name: fileRecord.name,
          // ... other props!
          url: backendResponse.url,
        }

[safrazik]

The required props for preloading:

{
            "name":"Some.exe",
            "size": 8165824,
            "type": "application/vnd.microsoft.portable-executable",
            "ext":"exe",
}

[jigarzon]

Thanks a lot safrazik for your help & time.

I did that update:

 uploaded (ev) {
      var files = Array.isArray(ev) ? ev : [ev]
      for (var file of files) {
        var respObj = JSON.parse(file.request.response)
        var backendObj = respObj.result.files.file[0]
        var fileRecord = file.fileRecord
        var index = this.fileRecords.indexOf(fileRecord)
        this.fileRecords[index] = {
          name: fileRecord.name,
          size: fileRecord.size,
          type: fileRecord.type,
          ext: fileRecord.ext,
          url: backendObj.url
        }
      }
    },

But I still see this in my model (I made a simple {{fileRecords}} in my component to see its value):

[ { "file": {}, "url": null, "urlResized": null, "lastModified": 1581000145000, "sizeText": "97 KB", "size": 99161, "type": "image/png", "ext": "png", "color": "transparent", "upload": { "data": { "result": { "files": { "file": [ { "container": "1", "name": "4348731801885217.png", "type": "image/png", "field": "file", "originalFilename": "profile1.png", "size": 99161 } ] }, "fields": { "filename": [ "profile1.png" ] } } }, "error": false }, "dimensions": { "width": 360, "height": 261 } } ] 

[safrazik]

 uploaded (ev) {
      var files = Array.isArray(ev) ? ev : [ev]
      for (var file of files) {
        var respObj = JSON.parse(file.request.response)
        var backendObj = respObj.result.files.file[0]
        var fileRecord = file.fileRecord
        var index = this.fileRecords.indexOf(fileRecord)
        this.fileRecords[index] = {
          name: fileRecord.name,
          size: fileRecord.size,
          type: fileRecord.type,
          ext: fileRecord.ext,
          progress: 100,
          url: backendObj.url
        }
      }
      this.fileRecords = this.fileRecords.slice() // trigger vue change
    },

Note that it's still a hack only

[jigarzon]

Thanks its too hacky, I will workaround in a different way. I will encaspulate everything in a component with computed get / set to emit the right value to the parent.

I would let this ticket open, if you like, to require for a better way to resolve this case, as this is an open issue in a bunch of tickets I saw.

I really appreciate this project, its an awesome solution fully of features and looks great... its not easy to find such powerful components in standalone efforts in the Vue ecosystem .

[safrazik]

You can wait for the fix to arrive in few days.

Thanks for the appreciation. Thanks for using the library.

[safrazik]

fileRecord.url() is a reactive property from versoin 1.7.0-beta.0

 uploaded(event) {
      var responses = Array.isArray(event) ? event : [event]
      for (var response of responses) {
        var respObj = response.data
        var backendResponse = respObj.result.files.file[0] //this is the way my backend returns it
        var fileRecord = response.fileRecord
        fileRecord.url(backendResponse.url)
      }
  },