UFileUpload: no way to display an existing file URL as initial value in edit forms
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 6.9k
- Forks
- 1.1k
- Avg merge
- 1d 7h
- Merged PRs (30d)
- 57
Description
Description
UFileUpload only accepts a File | null as its v-model, which makes it impossible to show an existing uploaded file (e.g. a URL returned from a server) when re-opening an edit form.
Use case
A common pattern in edit forms: a user previously uploaded a cover image, the URL is stored in the database, and when they reopen the form to make changes they expect to see their current image in the file upload component.
With the current API this is not possible because:
v-modelonly acceptsFile | null— there's no way to pass an existing URL as the initial value- The
#files-topand#filesslots only render when there areFileobjects in the component's internal state, so they can't be used to inject a URL-based preview when the model isnull
What you'd expect
Either:
- A separate
src/initialUrlprop that displays an existing URL as a preview image (alongside or instead of the dropzone), or - The
#files/#files-topslots rendering unconditionally so consumers can inject their own preview for an existing URL
Workaround
Currently the only option is to render the existing image preview entirely outside of UFileUpload and manage its state manually, which defeats the purpose of using the component in a form context.
Fetching the URL as a Blob and converting it to a File via new File([blob], name, { type }) technically works but requires an unnecessary extra network request and adds complexity around detecting whether the file actually changed on submit (to avoid re-uploading on every save).
Steps to reproduce
<script setup lang="ts">
// Imagine this URL comes from your database
const existingImageUrl = 'https://example.com/uploads/cover.jpg'
const file = ref<File | null>(null)
</script>
<template>
<!-- No way to show existingImageUrl as a preview here -->
<UFileUpload v-model="file" accept="image/*" />
</template>
Environment
@nuxt/uiv3 (latest)
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by locating the UFileUpload implementation and reading how its v-model, internal file state, and files/files-top slots are handled. Decide whether the API should use an initial URL prop or unconditional slots, then verify that an existing URL can be previewed without converting it to a File and that newly selected files still work as before.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nuxt, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100