You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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! :)
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)
The text was updated successfully, but these errors were encountered:
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.
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.
Environment
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:
This fails:
Function:
Logs
The text was updated successfully, but these errors were encountered: