title: single file upload using nodeJs multer not working with Angular frontend
body: <p>I'm trying to do single file upload using multer. Although I'm able to upload a file manually just using node in the relevant folder, I cannot sync it with my Angular frontend. I created a folder called uploads in the node backend folder where the files are supposed to get uploaded. Also I need to upload the file within a form and pass it to a api where it should take the file along with other parameters also.</p>
  
  <p>My node backend code which is working is below:</p>
  
  <pre><code>const multer = require('multer')
  
  const storage = multer.diskStorage({
  
  destination: function(req, file, cb) {
  
  cb(null, './uploads/')
  
  },
  
  filename: function(req, file, cb) {
  
  cb(null, Date.now() + file.originalname)
  
  }
  
  })
  
  const upload = multer({storage: storage})
  </code></pre>
  
  <p><strong>node route code</strong></p>
  
  <pre><code>app.post(baseUrl+'/create', upload.single('imagePath'), blogController.createBlog);
  </code></pre>
  
  <p><strong>Below is my Angular Component code which is not working:</strong></p>
  
  <pre><code>selectImage(event) {
  
  if(event.target.files.length &gt; 0){
  
  const file = event.target.files[0];
  
  this.images = file;
  
  }
  
  }
  
  public createBlog(): any {
  
  const formData = new FormData();
  
  formData.append('imagePath', this.images);
  
  let blogData = {
  
  title: this.blogTitle,
  
  description: this.blogDescription,
  
  blogBody: this.blogBodyHtml,
  
  category: this.blogCategory,
  
  imagePath: this.imagePath
  
  } //end blogData
  
  console.log(blogData);
  
  this.blogHttpService.createBlog(blogData).subscribe(...calling the node route)
  </code></pre>
  
  <p><strong>Frontend HTML Code:</strong></p>
  
  <pre><code>&lt;div&gt;
  
  &lt;input type="file" name="imagePath" (change)="selectImage($event)" /&gt;
  
  &lt;/div&gt;
  </code></pre>