title: How do I upload FIle in Vuejs and Expressjs
body: <p>Hey please am new to Vuejs and Express...So am trying to practice.</p>
  <p>So am trying to create a User Profile with comes with a image Using Vuejs and ExpressJs but none of the file or text is uploading.</p>
  <p>This is my <strong>CreateProfile.vue</strong> file</p>
  <pre><code>       &lt;div class=&quot;icon-pic&quot;&gt;
         &lt;label for=&quot;Password&quot;&gt;Upload your Logo / Picture&lt;/label&gt;
          &lt;input type=&quot;file&quot; ref=&quot;file&quot; @change=&quot;handleFileUpload&quot;/&gt;
        &lt;/div&gt;
  
        &lt;b-input-group class=&quot;mb-2&quot;&gt;
          &lt;b-form-input
            id=&quot;input-small&quot;
            type=&quot;text&quot;
            placeholder=&quot;Enter your Name&quot;
            required
            :rules=&quot;[rules.required]&quot;
            v-model=&quot;profile.fullname&quot;
          &gt;&lt;/b-form-input&gt;
  
          &lt;b-form-input
            id=&quot;input-small&quot;
            type=&quot;text&quot;
            placeholder=&quot;Enter your BrandName&quot;
            v-model=&quot;profile.brandname&quot;
          &gt;&lt;/b-form-input&gt;
        &lt;/b-input-group&gt;
  </code></pre>
  <p><strong>Note</strong>: There are other inputs...</p>
  <p>Below is my script functions for the form</p>
  <pre><code>&lt;script&gt;
  import ProfileService from '@/services/ProfileService'
  
  export default {
  data () {
  return {
    profile: {
      fullname: null,
      brandname: null,
      skill1: null,
      skill2: null,
      skill3: null,
      skill4: null,
      socail_handle1: null,
      socail_handle2: null
    },
    file: null,
    error: null,
    rules: {
      required: (value) =&gt; !!value || 'Required.'
    }
  }},
  methods: {
  handleFileUpload () {
    const file = this.$refs.file.files[0]
    this.file = file
  },
  async create () {
    this.error = null
    const formData = new FormData()
    formData.append('file', this.files)
    const areAllFieldsFilledIn = Object.keys(this.profile).every(
      (key) =&gt; !!this.profile[key]
    )
    if (!areAllFieldsFilledIn) {
      this.error = 'Please fill in all the required fields.'
      return
    }
    try {
      await ProfileService.post(this.profile, formData)
      this.$router.push({
        name: 'profile'
      })
    } catch (error) {
      this.error = error.response.data.error
    }
  }}}
  </code></pre>
  
  <p>Below is my <strong>ProfileController.js</strong> file</p>
  <pre><code>const {Profile} = require ('../models')
  const multer = require ('multer')
  
  const fileFilter = (req, file, cb) =&gt; {
  const allowedTypes = [&quot;image/jpeg&quot;, &quot;image/jpg&quot;, &quot;image/png&quot;]
  if (!allowedTypes.includes(file.mimetype)){
  const err = new Error('Incorrect File');
  return cb(err, false)
  }
  cb(null, true)
  }
  
  const upload = multer ({
  dest: '../public',
  fileFilter,
  })
  
  module.exports = {
  async post (req, res){
      try {
          upload.single('files')
          const profile = await new Profile({
          profile: this.profile,
          files: req.file
        });
        profile.save().then(result =&gt; {
          console.log(result);
          res.status(201).json({
            message: &quot;Done upload!&quot;
          })
        })
      } catch (err) {
          console.log(err)
          res.status(500).send({
          error: 'An Error has occured trying to fetch'
      })}}
  </code></pre>
  <p>Follow by my <strong>Model/Profile.js</strong> file</p>
  <pre><code>module.exports = (sequelize, DataTypes) =&gt; {
  const Profile = sequelize.define('Profile', {
       files: {
        type: DataTypes.JSON
       },
       fullname: {
         type: DataTypes.STRING,
         allowNull: false
       },
       brandname: DataTypes.STRING,
       skill1: DataTypes.STRING,
       skill2: DataTypes.STRING,
       skill3: DataTypes.STRING,
       skill4: DataTypes.STRING,
       socail_handle1: DataTypes.STRING,
       socail_handle2: DataTypes.STRING
   })
   return Profile 
   }
  </code></pre>
  <p>I hope any one can help me with this please!!!</p>
  <p>This is my <strong>route.js</strong> file</p>
  <pre><code>const AuthController = require('./controllers/AuthController')
  const AuthControllerPolicy = require('./policies/AuthControllerPolicy')
  const ProfileControler = require('./controllers/ProfileController')
  const upload = require ('multer')
  
  module.exports = (app) =&gt; {
  app.post('/register',
      AuthControllerPolicy.register,
      AuthController.register)
  
  app.post('/login',
      AuthController.login)
  
  app.get('/profile',
      ProfileControler.index)
      
  app.post('/upload', upload.single('file'),
      ProfileControler.upload)
  </code></pre>
  <p>}</p>