The simplest and fastest way for your web-app to upload images directly to Amazon S3

Configuring back-end libraries, front-end drag-n-drop libraries, monitoring resources on your app servers, processing files and re-uploading to S3 ... leave that work to shubox.io and get back to your other features!

Sign up. Start uploading now!

Avatar Upload

<div class="avatar-image"
     id="avatar-image"
     data-shubox-progress='0'
     data-shubox-uploader-name="production-avatar-image"></div>

<script>
  new Shubox(
    '#avatar-image', {
      previewsContainer: false,
      success: function(file){
        img = new Image();
        img.onload = function(){
          $('.avatar-image').append('<img src="'+ file.s3url + '">');
        };
        img.src = file.s3url;
      },
      error: function(file, message){
        alert("Oops! There was an error: \n" + message);
      }
    }
  );
</script>

In the div above you'll see that there is a data attribute called data-shubox-progress. Shubox will update that data attribute with the upload percentage. This allows you to style your element how you'd like, based on the upload progress. It's how the "fill up" effect is accomplished in this particular demo. Note: You do NOT have to add that attribute for it to work - it will be added automatically upon file upload.

Also of now previewsContainer:false. Setting previewsContainer to false will keep the element from inserting the preview template upon initial upload.

Text Input Upload

<input type="text" class="text file_url" id="file_url" name="file_url"
  value=""
  placeholder="Try it! Drag and drop or click in here!"
  data-shubox-uploader-name="production-sample-upload">

<script>
  new Shubox(
    '#file_url', {
      textBehavior: 'append',
      success: function(file){
        $('.user-ux form input')
          .after('<div class="input-upload-success">🎉 SUCCESS!</div>');
      },
      error: function(file, message){
        alert("Oops! There was an error: \n" + message);
      }
    }
  );
</script>

The item of note here is regarding the option textBehavior:'append'. It will tell Shubox to append any or all subsequent uploads to append the url to the input field instead of replacing it. Changing the value to replace would ... you guessed it - replace the contents.