Uploading images with Uploadcare

We needed a way to allow customers to upload a banner image that we can use on their branded pages/emails.

The requirements:

• You might have that image on your computer, or your Web site, or maybe Facebook alubm, or Dropbox folder
• It should be as easy to upload as clicking a button or drag & drop
• But we need to server the image from a CDN
• And we need it to look good, cropped to a 2.5:1 aspect ratio

So really a smart image upload widget which lets you crop to a given aspect ration, and a CDN to serve them all.

Bang. Uploadcare.

I started out using their online wizard to configure the widget. Picked a bunch of common services (also Google Drive, Evernote), told it what size to crop to, and set it to image-only upload (otherwise, it can be used to upload any file).

Dropped that into the HTML, verified that everything worked correctly, and then turned to the SDK documentation.

<input type='hidden'
       name='image'
       value='{{image}}'
       role='uploadcare-uploader'
       data-crop='1940:776'
       data-images-only='true'
       data-tabs='file url facebook dropbox gdrive instagram evernote'>

A bit of fiddling to move the script loading from HTML template to code, and to capture the onchage event so I can show a live preview.

// When image changes, update live preview.
var widget = uploadcare.Widget('[role=uploadcare-uploader]');
widget.onChange(function(file) {
  if (file) {
    file.done(function(fileInfo) {
      $('#image').attr('src', fileInfo.cdnUrl);
    });
  } else
    $('#image').attr('src', '');
});

Then one API call on the back-end to store uploaded images. We only store the final image that we'll serve, once the customer saves the form. If they test out different images, those are only retained for 24 hours (good for live preview).

business.pre('save', function(next) {
  if (this.isModified('image') && this.get('image')) {
    var uuid = this.get('image').match(/[a-f0-9\-]{36}/)[0];
    uploadcare.files.store(uuid, function() {
      next();
    });
  } else
    next();
});

The whole affair took about an hour from start to finish. Compare to day or longer of fiddling with DIY image upload and cropping plugins, and the back-end to support those. Yikes.

Then there's pricing. The starter pack is $5/month for 1.5GB of storage and 5GB of bandwidth. Or you can use your own S3 bucket, and get 5,000 image uploads for the same price.

In short, a fantastic image uploading service. Go check it out.