image resize using multiparty stream

Question

How can I use GraphicsMagick or transloadit in my scenario?

I am using expressjs multiparty to upload files to Azure storage:

app.post('/upload', function (req, res) {
    var blobService = azure.createBlobService();
    var form = new multiparty.Form();

    form.on('part', function(part) {
        if (part.filename) {
            var filename = part.filename;
            var size = part.byteCount;

            var onError = function(error) {
                if (error) {
                    res.send({ grrr: error });
                }
            };
            blobService.createBlockBlobFromStream('container', filename, part, size, onError);
        } else {
            form.handlePart(part);
        }
    });

    form.parse(req);
    res.send("SWEET");
});

Is there any service that I can use to resize the image and thumbnail before upload to the storage. I don't want to save the file to temp folder, because I am using azure websites.

Answer 1

Disclosure: I work Transloadit, so I'll be diving into that direction.

Option 1, keep handling the upload yourself:

Since you are handling the upload yourself and using Node.js, you could send the files to Transloadit using the Node.js SDK:

// npm install transloadit --save
const TransloaditClient = require('transloadit')

const transloadit = new TransloaditClient({
  authKey: 'YOUR_TRANSLOADIT_KEY',
  authSecret: 'YOUR_TRANSLOADIT_SECRET'
})

// Likely you'll want to use .addStream(part) here instead!
transloadit.addFile('myfile_1', './chameleon.jpg')

const options = {
  params: {
    steps: {
      thumbed: {
        use: ':original',
        robot: '/image/resize',
        width: 75,
        height: 75,
        resize_strategy: 'fit',
      },
    }
  }
}

transloadit.createAssembly(options, (err, result) => {
  if (err) {
    throw err
  }

  console.log({result})
})

The file is now resized by Transloadit, you could use our /azure/export Robot to send the file to Azure Storage:

"exported": {
  "use": ["thumbed"],
  "robot": "/azure/store",
  "credentials": "YOUR_CREDENTIALS"
}

Option 2, let Tranloadit also handle the upload

Alternatively you could drop our new open source file uploader Uppy as a plugin into your website, and use its Transloadit plugin to send files directly to Transloadit. The encoding and Azure export instructions would be saved inside your Tranloadit account in a Template. You'd refer to that template_id in your Uppy integration, and then you don't have to write any serverside code yourself or deal with multipart uploads. Your uploads will also become resumable. There's a live example on the Uppy website. Here's how I'd adapt it for your usecase (untested):

<!-- Basic Uppy styles. You can use Transloadit's CDN, Edgly:
https://transloadit.edgly.net/releases/uppy/v0.27.4/dist/uppy.min.css -->
<link rel="stylesheet" href="/uppy/uppy.min.css">

<div class="UppyDragDrop"></div>

<!-- Load Uppy pre-built bundled version. You can use Transloadit's CDN, Edgly:
https://transloadit.edgly.net/releases/uppy/v0.27.4/dist/uppy.min.js -->
<script src="/uppy/uppy.min.js"></script>
<script>
  var uppy = Uppy.Core();
  uppy.use(Uppy.DragDrop, {
    target: '.UppyDragDrop',
  });
  uppy.use(Transloadit, {
    params: {
      auth: {
        key: YOUR_TRANSLOADIT_API_KEY
      },
      template_id: YOUR_TEMPLATE_ID
    },
    waitForEncoding: true
  });

  console.log('--> Uppy pre-built version with Tus, DragDrop & Russian language pack has loaded');
</script>