Submitting before file fully uploads #113

Open
gbenz opened this Issue Jul 22, 2013 · 2 comments

Projects

None yet

3 participants

@gbenz
gbenz commented Jul 22, 2013

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
Contributor
nathany commented Jul 25, 2013

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment