feat(FileUpload): new component

[benjamincanac]

🔗 Linked issue

Resolves #1945

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[nuxthub-admin]

✅ Deployed ui3

Deployed ui3 38738e4 to preview

🔗	pr-1945.ui-6q2.pages.dev
📌	111232fc.ui-6q2.pages.dev
📱	View QR Code

📋 View deployment logs

[vachmara]

A few open points from OriginUI that we still need to resolve in the new implementation:

• Custom file type: While we support File and File[], per @genu’s suggestion, a custom type could make the component more extensible.
• File view positioning: Should we support files displayed only inside, outside, or allow both options?
• Grid vs. list view: Do we need to support both views, or is one enough for now?

Happy to discuss these further to help move things forward!

[benjamincanac]

@vachmara I just pushed a new version with lots of improvements, it introduces:

• a layout prop with list / grid values
• a variant prop with area / button values

Those should handle most cases and I'm pretty happy with the result! I didn't handle inside / outside positioning, in multiple mode, the grid goes inside and the list goes outside but we can still improve it.

Which @genu's suggestion are you talking about? 🤔

Feel free to play with the component in the playground and give feedback 😊

[vachmara]

@benjamincanac We should also reset the inputRef value to handle this edge case:
If a user drops example.png, deletes it, and then tries to re-upload the same file, the input still thinks the file is present, preventing the re-upload.

EDIT: This issue doesn't occur with drag-and-drop, but happens when using the native file picker.

[benjamincanac]

Do you have a suggestion to implement this? 🤔

[vachmara]

adding inputRef.value.value = '' should resolve this edge case

[benjamincanac]

Ok it took me some time because this wasn't working: 3e87dc6

I had to move the useFileDialog into a onMounted() because of vueuse/vueuse#4867

[vachmara]

2. Without adding to the scope of this effort, would it make sense to allow customizing the File type? That is rather than maintaining an internal list of Files and FileList to wrap those in special type to allow adding custom meta. What I mean by this:say, we're building an upload queue, and you want to track which of the files have been uploaded or in progress. In this case, the extra meta about the file state (uploading, complete, etc) wouldn't be in the File it self, but would be useful in the file slot be show an appropriate status for the file.

Based on @genu's suggestion above, I implemented this pattern by introducing a custom item type (not sure if it’s the best way):

export type FileUploadItem<Meta = Record<string, any>> = {
  file: File
} & Meta

[pkg-pr-new]

npm i https://pkg.pr.new/@nuxt/ui@4564

commit: 38738e4