nuxt / nuxt/ui

UFileUpload: no way to display an existing file URL as initial value in edit forms

Open
#6,603 2 comments 3 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

triage
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:

  1. v-model only accepts File | null — there's no way to pass an existing URL as the initial value
  2. The #files-top and #files slots only render when there are File objects in the component's internal state, so they can't be used to inject a URL-based preview when the model is null

What you'd expect

Either:

  • A separate src / initialUrl prop that displays an existing URL as a preview image (alongside or instead of the dropzone), or
  • The #files / #files-top slots 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/ui v3 (latest)

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.