Uploading multiple images with Formidable and Jimp

Viewed 1274

I am trying to upload some images to my node backend with formidable middleware.

I want to upload multiple files from the same form. Each file will be stored in media/temp_files folder, then processed by Jimp to multiple resolutions and stored in a path with its resolution; finally all images should be returned to the next middleware. But I can't, after uploading both images to the temp folder, it only process and returns the first image.

I wrote this middleware for formidable:

var fs = require('fs');
var path = require('path');
var Jimp = require('jimp');
var mkdirp = require('mkdirp');

const formidable = require('formidable');
var fs = require('fs');

function parse(opts) {
    return (req, res, next) => {
        const form = new formidable.IncomingForm({
            uploadDir: 'media/temp_images',
            keepExtensions: true,
        });
        Object.assign(form, opts);

        form.on('file', function(field, file) {
            var date = new Date();

            var newName = date.getTime() + '.' + file.type.split('/')[1];
            var newPath = form.uploadDir + '/' + newName;
            fs.rename(file.path, newPath);
            file.path = newPath;
        });

        form.parse(req, (err, fields, files) => {
            var processImage = function(image, options) {
                options.sizes.map((item) => {
                    var clone = image.clone();
                    var uploadPath = path.join(options.folder, 'w' + item.width);
                    var filepath = path.join(uploadPath, options.name);
                    !fs.existsSync(uploadPath) && mkdirp.sync(uploadPath);
                    clone.resize(item.width, item.height).write(filepath);
                });
            };
            var promises = [];
            for (const file in files) {
                var options = {
                    sizes: [{ width: 100, height: 200 }, { width: 200, height: 400 }, { width: 600, height: 1200 }],
                    folder: path.join('media/images', file.toLowerCase()),
                    name: files[file].name,
                };

                var promise = new Promise((resolve, reject) => {
                    Jimp.read(files[file].path)
                        .then((image) => {
                            processImage(image, options);
                        })

                        .catch((err) => {
                            console.error(err);
                        });
                });
                promises.push(promise);
            }
            Promise.all(promises);

            if (err) {
                next(err);
                return;
            }

            Object.assign(req, { fields, files });
            next();
        });
    };
}

module.exports = parse;
exports.parse = parse;

I add it to a file, I call it with var formidableMiddleware = require('./formidableMiddleware') and then, app.use(formidableMiddleware()), and that's all.

The problem is that this logic returns only the first item, and I cant make it return both of them. I think is related to the way I'm using the Promises, but I cant find the bug.

Any advice will be welcome!!!

0 Answers
Related