Filepond: Order of input elements in FilePond subtree doesn't match order of files

[hason]

Summary

Drag and drop only change position of files via css. DOM is unchanged. The hidden inputs doesn't reflect ordered positions of files. On server, the array of file names is not ordered.

Expected behaviour

Drag and drop should move real DOM elements.

| Environment | Version
|------------- | -----------
| OS | Linux
| Device |
| Browser | Chromium 80

[rikschennink]

Fixing now 👍

[rikschennink]

Should be fixed in v4.13.0

[hason]

@rikschennink Thanks!

[cloydlau]

Why can I still reproduce this in v4.13.0? I am using vue-filepond of which filepond is a peer dependency. Or is there a callback I can use to reorder files array manually?

[rikschennink]

@cloydlau I don't know why. Please supply a test case on codesandbox.

[cloydlau]

@rikschennink https://codesandbox.io/s/holy-night-told4?file=/src/App.vue

[rikschennink]

@cloydlau This is a FilePond vue specific issue, please create a new issue on the FilePond vue repo. The internal hidden input fields are reordered, the issue here is that the files prop is not being updated.

[cloydlau]

https://codesandbox.io/s/holy-night-told4
Already changed the dependency to filepond only. It seems files prop still can't be reordered.

[rikschennink]

@cloydlau that's because its value doesn't update. It's only used to send information to FilePond. Running getFiles will return the current list of files.

[cloydlau]

I need to refresh files value when order changed. I just found 'reorderfiles' event at #445 which will solve my problem perfectly, thanks. It's missing in document by the way.

[cloydlau]

Document says 'allowReorder' only works in single column mode. Actually it also works in grid layout with a little limit, the position that file items can be dropped onto is restricted in grid layout. Hope this could be optimized later on.