Client-side image uploader for S3



Client-side image upload tool for Amazon S3. render generates an image preview and file upload field. When an image is selected, it is scaled within a canvas element to fill the configured image area, and can be moved horizontally or vertically to adjust cropping. To upload, the tool makes a request for AuthData credentials from the server, which can be generated using auth and returned as JSON to authorized users. On upload, the image URL is returned and may be submitted with other text data in the form.

Below is a typical configuration of imgupload inside an HTTP server. render is a self-contained function that can be passed as an argument to a self-evaluating html script function node:

function(request, response) {
  switch (request.path) {
    case '/':
      return response.end(html([
        {div: {id: 'uploader'}},
        {button: {id: 'submit', children: 'Submit'}},
        {script: function(render) {
          if (!render) return imgupload.render;
          var uploader = render(document.getElementById('uploader'), '/auth');
          document.getElementById('submit').onclick = function() {
            uploader.upload(function(err, url) {
              if (err) return alert('Error uploading image');
      ]), 'html');
    case '/auth':
      return response.end(JSON.stringify(imgupload.auth(config)), 'json');

mode determines how the image is scaled within the dimensions defined, and can be 'auto', 'contain', or 'cover'. The last two behave like the CSS values for background-size. 'auto' preserves the image's dimensions unless they exceed the required dimensions, in which case it behaves like 'contain'. If 'cover' is used, the image may be shifted horizontally or vertically by the user to adjust cropping.


If a file is selected, upload will issue a request for AuthData use this data to upload the scaled image directly to Amazon S3. The resulting image URL is returned as an argument to callback if successful. setImageURL will load an image URL to preview, and can be called on page load with a current image URL value or after upload to show an uploaded image. It can also be called with an empty value to clear the current image preview and URL. When submitting the container form data, use getImageURL to populate a hidden field with this value.