fix(Field.Upload): handling of multiple async file uploads

[langz]

From:

Screen.Recording.2024-12-05.at.13.37.33.mov

To:

Screen.Recording.2024-12-05.at.13.16.22.mov

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
eufemia	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 6, 2024 10:49am

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[tujoworker]

What is the reason we do it that way? What if there is one file added already. And later the user adds two. Will the second one ever be newFiles[0]?

[langz]

We can probably do it in a different way, somehow this is the only one that made sense to me at the given time.
What I do is that I find the first "new file", and use that to find the index of where the "new files" is located in the files (the new files is always located/positioned after each other). I then remove/replace these new files with the async received files.

So what I want to do is to update the latest files by replacing the "new files" (the files newly added by the user) with the async received files, and keeping the same order.

[tujoworker]

Right. Can you try if this works as well? I think it should do the same as the slicing:

const updatedFiles = filesRef.current.map((file) => {
  const matchingNewFile = uploadedFiles.find(({ id }) => id === file.id)
  return matchingNewFile || file
})

[langz]

Thanks for the great suggestion.
The problem is that the id of the uploaded/async file can be something other than the local id, as it can be server generated, as in the example setting server_generated_id.
But it probably exists a more delicate way of solving this, than what I've done so far 🧠
Maybe using a different property? But then again, the response from the server could potentially change whatever property it wants.

[tujoworker]

I see, it does not the same 😀 – but I think now we are on something:

// Update files, replacing newFiles with uploadedFiles, preserving order
const updatedFiles = [
  ...filesRef.current.map(
    (file) =>
      uploadedFiles.find((uploaded) => uploaded.id === file.id) ||
      file
  ),
  ...uploadedFiles.filter(
    (uploaded) =>
      !filesRef.current.some((file) => file.id === uploaded.id)
  ),
]

But it's not less code, so I'm not sure it's better 🤷

[langz]

I'll merge now, then try this improvement later.
I see that this again also depends on the id, which I again think can be different in what's coming from the "server".

[tujoworker]

🎉 This PR is included in version 10.60.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀