title: Uploading multiple images with Formidable and Jimp
body: <p>I am trying to upload some images to my node backend with formidable middleware.</p>
  
  <p>I want to upload multiple files from the same form. Each file will be stored in <code>media/temp_files</code> 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.</p>
  
  <p>I wrote this middleware for <code>formidable</code>:</p>
  
  <pre><code>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) =&gt; {
          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) =&gt; {
              var processImage = function(image, options) {
                  options.sizes.map((item) =&gt; {
                      var clone = image.clone();
                      var uploadPath = path.join(options.folder, 'w' + item.width);
                      var filepath = path.join(uploadPath, options.name);
                      !fs.existsSync(uploadPath) &amp;&amp; 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) =&gt; {
                      Jimp.read(files[file].path)
                          .then((image) =&gt; {
                              processImage(image, options);
                          })
  
                          .catch((err) =&gt; {
                              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;
  </code></pre>
  
  <p>I add it to a file, I call it with <code>var formidableMiddleware = require('./formidableMiddleware')</code> and then, <code>app.use(formidableMiddleware())</code>, and that's all.</p>
  
  <p>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. </p>
  
  <p>Any advice will be welcome!!!</p>