Alokai•12mo 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•12mo 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•12mo ago

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

FabianClemenz•12mo 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•12mo 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•12mo ago

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

Keider•12mo ago

via api-client

FabianClemenz•12mo 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•12mo 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•12mo 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•12mo ago

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

FabianClemenz•12mo 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