Submitting before file fully uploads

[ghost]

Anyone else find in the example app that if you submit the form before the file is fully uploaded...that the record created just completely leaves out the image?

It seems like from a user perspective, this would be pretty annoying...

Has anyone found a good workaround for this?

[nathany]

We just disable the submit button when the upload starts and enable it again when it completes or fails.

[weavermedia]

I use Ladda (http://lab.hakim.se/ladda/) to disable the submit button and add an animated spinner to confirm that something is happening. There's even an option to overlay a progress bar on the button (sounds crappy but it actually looks really nice).

Just add the ladda-button class to the submit button and instantiate it on the page with

<button type='submit' class="ladda-button" data-style="expand-left">
    Submit
</button>
<script>
  var newSpinner = Ladda.create( document.querySelector( 'button' ) );
</script>

Then bind the start and stop javascript to the s3 callbacks.

jQuery(function() {
  $("#myS3Uploader").bind('s3_uploads_start', function(e) {
    newSpinner.start();
  });
});

$(document).bind('s3_uploads_complete', function() {
  return newSpinner.stop();
});

You'll need the Ladda .js files and CSS files in your asset pipeline.