What is the best method for uploading and saving a file using AngularJS and ExpressJS together?

Question

What is the best method for uploading and saving a file using AngularJS and ExpressJS together?

I am using a library for AngularJS called angular-file-upload. Despite successfully setting it up and getting image uploads to work, I am facing an issue with passing the file to the server side (express js).

Jade:

input.form-input(ng-model="userAvatarFile" ng-file-select="onFileSelect($files)" name="userAvatarFile" type="file")

This is the AngularJS code snippet:

$scope.onFileSelect = function($files) {

    console.log($files);

    for (var i = 0; i < $files.length; i++) {
        var file = $files[i];
        $scope.upload = $upload.upload({
            url: '/api/user/upload', 
            method: 'POST',
            data: {myObj: $scope.userAvatarFile},
            file: file, 
        }).progress(function(evt) {
            console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));
        }).success(function(data, status, headers, config) {
            console.log(data);
        });
    }
};

And here's the express code:

exports.upload = function(req, res) {
  console.log(req.body);
  console.log(req.files);
};

However, when checking the console output in express, it always shows:

 {}
 undefined

Any suggestions on what might be causing this issue?

javascript angularjs express

Answer 1

Answer №1

The Multipart middleware functionality was eliminated in Connect version 3.0. To replace it, Connect suggests using either connect-multiparty or connect-busboy. In my opinion, connect-busboy is the better option. Here's how you can implement it:

(Remember to execute

npm install --save connect-busboy

)

// Initial file setup remains constant for all other instances
var express = require('express'),
    busboy  = require('connect-busboy');

app.use(busboy({ immediate: true }));

// File route
exports.upload = function (req, res) {
    req.busboy.on('file', function (fieldname, file, filename) {
        // fieldname will be 'file', file will represent the file itself (in binary format), and filename contains the name of the file
    });
    req.busboy.on('field', function (key, value) {
        // key will be 'myObj', while value will be $scope.userAvatarFile
    });
};

If you need to store the image in a file, follow these steps:

exports.upload = function (req, res) {
    req.busboy.on('file', function (fieldname, file, filename) {
        // saveTo indicates the temporary path
        var saveTo = path.join(os.tmpDir(), path.basename(fieldname));
        file.pipe(fs.createWriteStream(saveTo));

        // Further actions with saveTo
    });
};

Nevertheless, this method poses security risks (like saving data on the disk, hence why req.files is no longer available). Majority of libraries that handle files (e.g., Cloudinary) provide a WriteStream alternative. Below is an illustration with Cloudinary:

exports.upload = function (req, res) {
    req.busboy.on('file', function (fieldname, file, filename) {
        var stream = cloudinary.uploader.upload_stream(function(result) { console.log(result); });

        // Initially, you could use file.pipe(stream), but Cloudinary's stream isn't an authentic WriteStream; thus, the following approach also functions well:

        file.on('data', stream.write);
        file.on('end', stream.end);
    });
};

By the way, I adopted your code, tested it, and it performs effectively. Reach out if any issues arise. I faced a similar concern last week, so I delved into the matter.

Answer 2

The Multipart middleware functionality was eliminated in Connect version 3.0. To replace it, Connect suggests using either connect-multiparty or connect-busboy. In my opinion, connect-busboy is the better option. Here's how you can implement it:

(Remember to execute

npm install --save connect-busboy

)

// Initial file setup remains constant for all other instances
var express = require('express'),
    busboy  = require('connect-busboy');

app.use(busboy({ immediate: true }));

// File route
exports.upload = function (req, res) {
    req.busboy.on('file', function (fieldname, file, filename) {
        // fieldname will be 'file', file will represent the file itself (in binary format), and filename contains the name of the file
    });
    req.busboy.on('field', function (key, value) {
        // key will be 'myObj', while value will be $scope.userAvatarFile
    });
};

If you need to store the image in a file, follow these steps:

exports.upload = function (req, res) {
    req.busboy.on('file', function (fieldname, file, filename) {
        // saveTo indicates the temporary path
        var saveTo = path.join(os.tmpDir(), path.basename(fieldname));
        file.pipe(fs.createWriteStream(saveTo));

        // Further actions with saveTo
    });
};

Nevertheless, this method poses security risks (like saving data on the disk, hence why req.files is no longer available). Majority of libraries that handle files (e.g., Cloudinary) provide a WriteStream alternative. Below is an illustration with Cloudinary:

exports.upload = function (req, res) {
    req.busboy.on('file', function (fieldname, file, filename) {
        var stream = cloudinary.uploader.upload_stream(function(result) { console.log(result); });

        // Initially, you could use file.pipe(stream), but Cloudinary's stream isn't an authentic WriteStream; thus, the following approach also functions well:

        file.on('data', stream.write);
        file.on('end', stream.end);
    });
};

By the way, I adopted your code, tested it, and it performs effectively. Reach out if any issues arise. I faced a similar concern last week, so I delved into the matter.

Answer 3

Answer №2

tgkokk demonstrated an example using Cloudinary that is no longer functional with the latest version of Cloudinary, v1.1.1. The upload_stream method has been updated by Cloudinary to now return a Transform stream object. Instead of manually adding events to on('data') and on('end'), it is recommended to use 'pipe' as shown below.

Learn more about Cloudinary version 1.1 changes here.

exports.upload = function (req, res) {
    req.busboy.on('file', function (fieldname, file, filename) {
        var stream = cloudinary.uploader.upload_stream(function(result) {    
            console.log(result); 
        });

        // pipe usage
        file.pipe(stream);
    });
};

Answer 4

tgkokk demonstrated an example using Cloudinary that is no longer functional with the latest version of Cloudinary, v1.1.1. The upload_stream method has been updated by Cloudinary to now return a Transform stream object. Instead of manually adding events to on('data') and on('end'), it is recommended to use 'pipe' as shown below.

Learn more about Cloudinary version 1.1 changes here.

exports.upload = function (req, res) {
    req.busboy.on('file', function (fieldname, file, filename) {
        var stream = cloudinary.uploader.upload_stream(function(result) {    
            console.log(result); 
        });

        // pipe usage
        file.pipe(stream);
    });
};

What is the best method for uploading and saving a file using AngularJS and ExpressJS together?

Answer №1

Answer №2

Similar questions

How can I include gte, lte, etc. in a URL query parameter?

Tips for validating a dynamic key within a Mongoose schema

"Step-by-step guide on using JavaScript to print a PDF file stored locally

HTML elements generated dynamically do not possess any jQuery properties

Error: The function react__WEBPACK_IMPORTED_MODULE_6___default.a.useState is not defined as a function

Aggregate the properties of objects in an array into a single object using Lodash

Having trouble with the JQuery scrollTop animation? Getting the error message "Cannot read property 'top' of undefined"?

Using a vanilla JS object as a prop for a child component

What is the best way to load a database URL asynchronously and establish a database connection prior to the initialization of an Express

Encountering issues with Gzip compression in my Spring Boot 1.5.10.RELEASE project

Using jQuery to toggle sliding the information above a div

Triggering an event upon selecting a dropdown option

Automatically switch to dark mode at specified times: A simple guide

How can one use C# and Selenium to send text to a hidden textarea with the attribute style="display: none;"?

Exploring the depths of JavaScript JSON elements

Server initialization error in Node.js

Using AngularJS to show content based on a callback function

Encountering a node.js issue

Unable to modify array in MongoDB

angular-in-memory-web-api encounters a 404 error