title: Upload image and Json from Angular to Multer/Express
body: <p>I would like to upload an image and a json to a server using Express and Multer.
  When I test with Postman there is no problem but when I test with the Front-end in Angular, it seems that the image isn't sent.</p>
  
  <p>Here are the codes : </p>
  
  <p>problem-form.component.html</p>
  
  <pre><code>&lt;div class="problemContainer"&gt;
   &lt;div class="problemForm"&gt;
    &lt;h2&gt;Soumission de problème&lt;/h2&gt;
    &lt;form [formGroup]="form" (ngSubmit)="submitForm()"&gt;
      &lt;p&gt;
        &lt;mat-form-field class="inputFW"&gt;
          &lt;input matInput formControlName="User" placeholder="Adresse email"&gt;
          &lt;mat-error&gt;This field is required&lt;/mat-error&gt;
        &lt;/mat-form-field&gt;
      &lt;/p&gt;
      &lt;p&gt;
        &lt;mat-form-field class="inputFW"&gt;
          &lt;input matInput value="{{machineName}}" placeholder="Nom de la machine" disabled&gt;
          &lt;mat-error&gt;Le nom de la machine est requis&lt;/mat-error&gt;
        &lt;/mat-form-field&gt;
      &lt;/p&gt;
      &lt;p&gt;
        &lt;mat-form-field class="inputFW"&gt;
          &lt;textarea matInput placeholder="Description du problème (max 200 caractères)" formControlName="Description" rows="3"&gt;&lt;/textarea&gt;
        &lt;/mat-form-field&gt;
      &lt;/p&gt;
      &lt;p&gt;
        &lt;label&gt;Image (Optionnel)&lt;/label&gt;&lt;br&gt;&lt;br&gt;
        &lt;input type="file" (change)="fileChange($event)" name="image" /&gt;
      &lt;/p&gt;
      &lt;button mat-raised-button color="primary"&gt;Envoyer&lt;/button&gt;
    &lt;/form&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>function in the component that call the service</p>
  
  <pre><code>submitForm(){
    if(this.form.valid){
      let obj = this.form.value
      obj.image = this.image
      this.service.createProblem(obj).subscribe(data =&gt; console.log(data), err =&gt; {console.log(err)})
    }else{
      console.log("erreur")
    }
  }
  </code></pre>
  
  <p>function in the service that post to the server</p>
  
  <pre><code>createProblem(problem: Object){
    console.log('roman')
    let form = new FormData()
    form.append('Name', problem['Name'])
    form.append('Description', problem['Description'])
    form.append('User', problem['User'])
    form.append('image', problem['image'])
    console.log(problem['image'])
    return this.http.post(getUrl()+ `problems`, form);
  }
  </code></pre>
  
  <p>Configuration of multer</p>
  
  <pre><code>let storage = multer.diskStorage({
    destination: function (req, file, cb) {
      cb(null, 'images')
    },
    filename: function (req, file, cb) {
      cb(null, 'problem_' + Date.now()+'.'+mime.extension(file.mimetype))
    }
  })
  let upload = multer({ storage: storage });
  </code></pre>
  
  <p>The route that call a function in the controller</p>
  
  <pre><code>router.route('/')
  /** GET /api/problems - Get list of Problems */
    .get(pbCtrl.list)
  
  /** POST /api/problem - create a new problem */
    .post(/*validate(paramValidation.problem), */upload.single('image'), pbCtrl.create);
  </code></pre>
  
  <p>The function in the controller </p>
  
  <pre><code>function create(req, res, next) {
    let photo
    if(req.file != null)
      photo = req.file.filename
    PC.findOne({ Name: req.body.Name, Active: true }, { '_id': 0 }).exec()
      .then((pc) =&gt; {
          if (pc == null)
              return res.sendStatus(400)
          const newPc = new PC({
              Name: pc.Name,
              Local: pc.Local,
              IP: pc.IP,
              MAC: pc.MAC,
              Comment: pc.Comment,
              Active: pc.Active,
              Problem: { User: req.body.User, Description: req.body.Description, Image: photo }
          })
          newPc.save()
              .then(savedPC =&gt; {
                  res.json(savedPC);
                  //return next();
              }).catch(e =&gt; { next(e); });;
  
      })
      .catch((err) =&gt; {
          console.log(err)
          res.sendStatus(400)
      })
  }
  </code></pre>
  
  <p>Thanks all</p>