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

Question

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

question from:https://stackoverflow.com/questions/65872010/how-to-properly-browse-an-image-with-vue-form-generator-cause-it-doesnt-work

Answer 1

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>