Saving uploaded files to a folder using ngFileUpload and Multer

Question

Saving uploaded files to a folder using ngFileUpload and Multer

I am brand new to angular MEAN and I am currently attempting to upload a file, specifically a PDF, and save it to the server. Despite my efforts, I have been unable to locate any examples on how to actually save the uploaded file to the server's storage.

In this project, I am utilizing the ng-file-upload directive from https://github.com/danialfarid/ng-file-upload, Express for the server, and AngularJS for the file upload functionality.

POST UPDATED!! Please see below

Additional information: For this project, I am using Yeoman's full mean stack generator.

UPDATE: I attempted to use multer (https://github.com/expressjs/multer) to save the uploaded file to the server. However, when trying to upload the file, I encountered a 500 error with the following message:

Error: Unexpected field
   at makeError ({proj_folder}/node_modules/multer/lib/make-error.js:12:13)
   ...

Updated HTML

<form accept-charset="UTF-8" class="form" name="form" ng-submit="$ctrl.submitForm(form)" 
                enctype="multipart/form-data">
...
<input ngf-select ng-model="$ctrl.paperFile" ngf-model-options="{allowInvalid: true}" name="paper" ngf-accept="'application/pdf'" required="" type="file" >
...
</form>

submitForm method

...
    this.Upload.upload({
            url:'/paperUpload',
            method: 'POST',
            file: this.paperFile,
            fields:{
              _id:this.user._id
            }
          })
          .then(function(resp){
             console.log('Success upload');
             console.log(resp.data);
          }, function(error){
            console.log('fail upload');
            console.log(error);
          }, function(evt){
            console.log('upload on progress');
            console.log(evt);
          });

Server route:

var express = require('express');
var multer = require('multer');
var router = express.Router();
var upload = multer({dest:'uploads/',
    rename: function(fieldname, filename){
        return filename+"_"+Date.now(); 
    }});
router.post('/paperUpload', upload.single('paper'), uploadPaper);

...

//method to upload
export function uploadPaper(req,res){
  res.status(204).end();
}

Although the 'uploads' folder is created, the file is not being uploaded and consistently results in failure.

Any assistance would be greatly appreciated. Thank you

javascript angularjs file-upload multer ng-file-upload

Answer 1

Answer №1

Follow these instructions:

Start by running npm install ng-file-upload
Add ng-file-upload.min.js to your Angular index .html file
To implement file upload functionality in your Angular app, use this example code from http://jsfiddle.net/0m29o9k7/. Copy and paste the code provided outside of any existing form on your page:
Modify the URL in the example code to specify where you want to upload files -- url: '',

In your server.js or app.js (depending on what you're using to run your app), include the following lines:

var crypto = require('crypto'); var mime = require('mime'); var multer = require('multer');

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'app/app-content/images/')
  },
  filename: function (req, file, cb) {
    crypto.pseudoRandomBytes(16, function (err, raw) {
      cb(null, raw.toString('hex') + Date.now() + '.' + mime.extension(file.mimetype));
    });
  }
});

var upload = multer({ storage: storage });

// set '/app' as the default route
app.post('/', upload.any(), function (req, res) { 
    res.send(req.files);
});

Customize the 'app/app-content/images/' path to specify the location where uploaded files will be stored

This code configures the file upload URL to point to your Node server's root directory, allowing you to easily access the uploaded files.

Answer 2

Follow these instructions:

Start by running npm install ng-file-upload
Add ng-file-upload.min.js to your Angular index .html file
To implement file upload functionality in your Angular app, use this example code from http://jsfiddle.net/0m29o9k7/. Copy and paste the code provided outside of any existing form on your page:
Modify the URL in the example code to specify where you want to upload files -- url: '',

In your server.js or app.js (depending on what you're using to run your app), include the following lines:

var crypto = require('crypto'); var mime = require('mime'); var multer = require('multer');

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'app/app-content/images/')
  },
  filename: function (req, file, cb) {
    crypto.pseudoRandomBytes(16, function (err, raw) {
      cb(null, raw.toString('hex') + Date.now() + '.' + mime.extension(file.mimetype));
    });
  }
});

var upload = multer({ storage: storage });

// set '/app' as the default route
app.post('/', upload.any(), function (req, res) { 
    res.send(req.files);
});

Customize the 'app/app-content/images/' path to specify the location where uploaded files will be stored

This code configures the file upload URL to point to your Node server's root directory, allowing you to easily access the uploaded files.

Answer 3

Answer №2

Have you tried using the 'file' or 'fields' options with Upload.upload before? I recently encountered a similar issue and was able to resolve it by including the arrayField in my POST request. If you encounter the same error, consider removing 'fields' and instead adding a new key to the data object with the _id that needs to be passed.

this.Upload.upload({
            url:'/paperUpload',
            method: 'POST',
            headers: {
                'Content-Type': 'multipart/form-data ; boundary = ----WebKitFormBoundaryvlb7BC9EAvfLB2q5'
            },
            arrayKey: '',
            data: {
              paper: this.paperFile,
            },
            fields:{
              _id:this.user._id
            }
          })
          .then(function(resp){
             console.log('Success upload');
             console.log(resp.data);
          }, function(error){
            console.log('fail upload');
            console.log(error);
          }, function(evt){
            console.log('upload on progress');
            console.log(evt);
          });

Answer 4

Have you tried using the 'file' or 'fields' options with Upload.upload before? I recently encountered a similar issue and was able to resolve it by including the arrayField in my POST request. If you encounter the same error, consider removing 'fields' and instead adding a new key to the data object with the _id that needs to be passed.

this.Upload.upload({
            url:'/paperUpload',
            method: 'POST',
            headers: {
                'Content-Type': 'multipart/form-data ; boundary = ----WebKitFormBoundaryvlb7BC9EAvfLB2q5'
            },
            arrayKey: '',
            data: {
              paper: this.paperFile,
            },
            fields:{
              _id:this.user._id
            }
          })
          .then(function(resp){
             console.log('Success upload');
             console.log(resp.data);
          }, function(error){
            console.log('fail upload');
            console.log(error);
          }, function(evt){
            console.log('upload on progress');
            console.log(evt);
          });

Saving uploaded files to a folder using ngFileUpload and Multer

Answer №1

Answer №2

Similar questions

Transferring Information from Vue to PHP: What You Need to Know

The dynamic JavaScript in Bootstrap 4 seems to be malfunctioning, despite working perfectly in Bootstrap 3

Issue with Angular UI-Grid: Tooltip not appearing

The v-on handler is encountering an error: "ReferenceError: i18n is not defined"

Sort an array of numbers with orderBy and ensure any string values are placed at the end

Exploring the world of audio playback in TypeScript/JavaScript and Electron using setInterval

Data in DynamoDB Local is deleted once the instance is shut down

Flawless 2D mouse selection using Canvas for pixel-perfect accuracy

Choose an option with JavaScript once the request is successful

Issue persists with Angular 2 *ngFor functionality even after successfully importing CommonModule

React fetch request does not reach the Express router's index route

establish the reliance on field w

Struggling with incorporating elements into a dynamic CSS3 banner design?

The useTransition() method in React remains stuck in the isPending state when making API calls from routes in the /pages/api directory

Is it possible to create a React Component without using a Function or Class

Design a slider that mimics infinite scrolling using CSS

Tips for turning off server-side sorting in Datatables

The property 'x' cannot be found when declaring two different return types

Remove all nested object entries

When an HTML input button within a table fails to trigger any jQuery function upon being clicked