A
Alokai•17mo ago
Keider

Input type file doesn't show filename

Hi, I have a form for uploading a file. I'm using the SfInput component and the validation provider from vee-validate. The form is working correctly, as I can successfully send one or multiple files.
<ValidationProvider
name="files"
ref="provider"
rules="mimes:image/*,application/pdf,application/zip"
v-slot="{ errors, validate }"
slim>
<SfInput
class="marginTop"
name="files"
type="file"
:label="$t('File to choose')"
:valid="!errors[0]"
:errorMessage="errors[0]"
@change="onPickFiles"
multiple
/>
</ValidationProvider>
<ValidationProvider
name="files"
ref="provider"
rules="mimes:image/*,application/pdf,application/zip"
v-slot="{ errors, validate }"
slim>
<SfInput
class="marginTop"
name="files"
type="file"
:label="$t('File to choose')"
:valid="!errors[0]"
:errorMessage="errors[0]"
@change="onPickFiles"
multiple
/>
</ValidationProvider>
However, on the front-end side, the input doesn't change and still indicates that no file is selected. Do you have any idea where the problem might be coming from? Thanks in advance.
11 Replies
skirianov
skirianov•17mo ago
Hey @_keider I suppose that Input should receive a value after the onchange event. meaning, v-model should be assigned. https://v2.vuejs.org/v2/guide/components.html#Using-v-model-on-Components this should do
Components Basics — Vue.js
Vue.js - The Progressive JavaScript Framework
Keider
Keider•17mo ago
but on input type file, shouldn't we use v-model ??
FabianClemenz
FabianClemenz•17mo ago
do you call validate in the onPickFiles method? (and where and how do you send the files to your backend? - having trouble doing that atm)
Keider
Keider•17mo ago
this is my onPickFiles method.
const files = ref([])
const onPickFiles = async (event) => {
const arrayFiles = [...event.target.files]
const { valid } = await context.refs.provider.validate(event);
if(valid) {
files.value = arrayFiles;
}
};
const files = ref([])
const onPickFiles = async (event) => {
const arrayFiles = [...event.target.files]
const { valid } = await context.refs.provider.validate(event);
if(valid) {
files.value = arrayFiles;
}
};
i send the files with a method on sumbit.
FabianClemenz
FabianClemenz•17mo ago
but directly in your component and not via composable and api-client?
Keider
Keider•17mo ago
via api-client
FabianClemenz
FabianClemenz•17mo ago
Do you send the files as binarystring to the api client? I also struggled with your problem. My current workaround is removing the ValidationProvider and using the accept keyword to let the user only select the wanted types In the end my backend will validate the file too
Keider
Keider•17mo ago
in my submit a create a formData and push manually files in:
javascriptfiles.value.forEach((file) => {
form.append('files', file, file.name);
});
javascriptfiles.value.forEach((file) => {
form.append('files', file, file.name);
});
FabianClemenz
FabianClemenz•17mo ago
and in the composable you just call the api-client function with the given parameters? Did you add special config to your middleware (the express server is only accepting json in the default)
Keider
Keider•17mo ago
yes sorry special config with multer, but it's not me who do this part.
FabianClemenz
FabianClemenz•17mo ago
no problem, this helps me a lot 😄 have a lot of trouble doing that... (and had a lot of trouble with the validation like you)
Want results from more Discord servers?
Add your server