UInput Type File x Supabase Storage Upload

KazTheCreator commented 2 weeks ago

Environment

Operating System: Darwin
Node Version: v20.11.1
Nuxt Version: -
CLI Version: 3.11.1
Nitro Version: -
Package Manager: npm@10.2.4
Builder: -
User Config: -
Runtime Modules: -
Build Modules: -

Version

v.2.13.0

Reproduction

https://stackblitz.com/edit/nuxt-ui-g7snqc?file=app.vue

Description

Hey! Im running into a new issue with UInput and Supabase Storage Upload.

Ive created a component to upload/update an avatar image from the app to supabase storage. Im following this docs: https://supabase.com/docs/guides/getting-started/tutorials/with-nuxt-3#create-an-upload-widget

When im using a native input html tag and follow the guide/doc it works and the file will be uploaded correctly to storage bucket in supabase.

In case im using a UInput type file it will fail.

It seems to me the issue is the following: Native Input Change Event is a valid Object of evt.target.files UInput Change Event is a String of the computed Path. (It computes to the C:..FakePath/generic-avatar-a.jpg)

Is there a way to "not" get the FakePath? Am I missing something? Ive tried a v-model on UInput too, which resulted in supabase recieving the string of fakepath url.

Ive provided a reproduction in a minimalistic way. Thank you in advance for looking at the issue! :)

Additional context

This works:

      <input
        type="file"
        id="single"
        accept="image/*"
        @change="uploadAvatar"
        :disabled="uploading"
      />

This fails:

<UInput
        type="file"
        class="w-full"
        @change="uploadAvatar"
        accept="image/*"
      />

Function:

<script setup>
const files = ref();

const uploadAvatar = async (evt) => {
  files.value = evt.target.files;
  console.log(files.value);
};
</script>

Logs

app.vue:36 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'files')
    at uploadAvatar (app.vue:36:28)
    at callWithErrorHandling (vue.js?v=6c63edae:1661:19)
    at callWithAsyncErrorHandling (vue.js?v=6c63edae:1668:17)
    at emit (vue.js?v=6c63edae:2192:5)
    at vue.js?v=6c63edae:9264:45
    at Proxy.onChange (Input.vue:174:9)
    at _mergeProps.onChange._cache.<computed>._cache.<computed> (Input.vue:307:79)
    at callWithErrorHandling (vue.js?v=6c63edae:1661:19)
    at callWithAsyncErrorHandling (vue.js?v=6c63edae:1668:17)
    at HTMLInputElement.invoker (vue.js?v=6c63edae:10301:5)

benjamincanac commented 2 weeks ago

Are you sure your @nuxt/ui version is 2.13, because since 2.15 your uploadAvatar function would receive the files directly, no need to do evt.target.files.

KazTheCreator commented 2 weeks ago

You are right I had ^2.13.0 in package.json and it seems the latest npm i did used 2.15. Thank you very much & sorry for the inconvenience.

I did it like this and it works now: files.value = evt const file = files.value[0]

Might be interesting though for the UInput Docs Page? Since the guide of supabase and the rest that I found researching was using the evt.target.files approach.

nuxt / ui