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

I am looking for an image search API that supports JSONP so that users can easily search for images on my website

Oops! It seems like there was an issue trying to access properties that are undefined while reading 'pipe' in Angular12

How can I bypass express csurf dynamically depending on the form data provided?

Installing external Javascript libraries on Parse cloud code can be done by following these steps

The $ionicPopup is not being recognized by the $scope

The variable in my scope is not reflecting the changes in the HTML view

Is it possible to execute PHP without using Ajax when clicking on a Font Awesome icon?

Designing a Custom Wordpress Extension and Integrating External Scripts

Issue occurred: The error "Undefined offset 1" was encountered while trying to upload a file via

When attempting to trigger an error, the unit test will fail to pass

Ways to control the number of boxes that are checked

Find out if OpenAI's chat completion feature will trigger a function call or generate a message

Extract specific index from a JSON array

Angular does not delay for promises to settle

Establishing the NumbroJS cultural settings

Experience the power of CanJS Observable data objects with the added feature of

Struggling to align the image elements accurately

What is the best way to access the inputName element using the ng-messages directive?

In relation to User Interface: Analyzing target tracking and studying the flow of time

Implement a CSS style for all upcoming elements