Alokai•2y ago

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•2y 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

KeiderOP•2y ago

but on input type file, shouldn't we use v-model ??

FabianClemenz•2y 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)

KeiderOP•2y 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•2y ago

but directly in your component and not via composable and api-client?

KeiderOP•2y ago

via api-client

FabianClemenz•2y 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

KeiderOP•2y 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•2y 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)

KeiderOP•2y ago

yes sorry special config with multer, but it's not me who do this part.

FabianClemenz•2y 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)

Gaming

Programming

Input type file doesn't show filename