Skip to content
Advertisement

How to properly browse an image with Vue-Form-Generator ? (cause it doesnt work for me)

I am a new full-stack developer student and I want to use Vue-Form-Generator to generate a form with input fields and I want to browse an image. All of my fields works except the image browse one. It doesn’t displays on my page. I tried a lot of things, but my last hope is someone who could know it.

My Vue.js code :

  <div class="page">
  <h2>Ajout d'un chercheur</h2>
    <div class="form">
    <vue-form-generator :schema="schema" :model="model" :options="formOptions"></vue-form-generator>
    </div>
  </div>
</template>

<script>

export default {
    data () {
    return {
      model: {
        avatar: null,
        prenom: 'Prénom',
        nom: 'Nom',
        url: 'www.son_site.fr'
      },
      schema: {
        fields: [
          {
            type: "image",
            label: "Photo",
            model: "avatar",
            placeholder: "Photographie du chercheur",
            browse: true,
            required: true,
            featured:true,
          },
          {
            type: 'input',
            inputType: 'text',
            label: 'Prénom',
            model: 'prenom',
            placeholder: 'Prénom',
            featured: true,
            required: true
          },
          {
            type: 'input',
            inputType: 'text',
            label: 'Name',
            model: 'nom',
            placeholder: 'Nom',
            featured: true,
            required: true
          },
          {
            type: 'input',
            inputType: 'text',
            label: 'URL / Site Web',
            model: 'url',
            placeholder: 'www.son_site.fr',
            featured: true,
            required: true
          },
          {
            type: 'submit',
            onSubmit(model) {
              console.log(model);
            },
            label: '',
            buttonText: "Ajouter",
            validateBeforeSubmit: true
          },
        ]
      },
      formOptions: {
        validateAfterLoad: true,
        validateAfterChanged: true,
        validateAsync: true
      }
    }
  }
}
    
</script>

What it displays : my page with everything except the image browse

The console error

Advertisement

Answer

Given the console error you have, looks like you are using the “Core” rather than “Full” version of Vue-Form-Generator.

See the docs here for how to use the full version, which includes all field types. The image field type is not in the core version.

// the "full" way
<script>
  import VueFormGenerator from "vue-form-generator";
  import "vue-form-generator/dist/vfg.css";  // optional full css additions
</script>

// the "core" way
<script>
  import VueFormGenerator from "vue-form-generator/dist/vfg-core.js";
  import "vue-form-generator/dist/vfg-core.css";  // optional core css additions
</script>
User contributions licensed under: CC BY-SA
7 People found this is helpful
Advertisement