title: Stop file upload when filesize too large - jQuery S3
body: <p>Please view the snippet below. I am using jQuery fileUpload and a direct s3 form to upload videos to AWS. I would like there to be a filesize limit of 5mb which is imposed before the video hits any local server. How can I amend this code so that the upload is halted completely and alerts the user when the filesize is over 5mb and if its under, everything carries on as usual?</p>
  
  <p>I have added a content length limit of 5mb to the S3 form options, so uploads of larger than this are refused, but it would be preferable if there was something to notify the user that an upload is too large to start with.</p>
  
  <pre><code> $ -&gt;
        $(".direct-upload").each -&gt;
          form = $(this)
          $(this).fileupload
            url: form.attr("action")
            type: "POST"
            autoUpload: true
            dataType: "xml"
            add: (event, data) -&gt;
             if data.files[0].size &lt; 5242880
              $.ajax
                url: "/signed_urls"
                type: "GET"
                dataType: "json"
                data:
                  doc:
                    title: data.files[0].name
  
                async: false
                success: (data) -&gt;
                  form.find("input[name=key]").val data.key
                  form.find("input[name=policy]").val data.policy
                  form.find("input[name=signature]").val data.signature
  
              data.submit() 
  
            send: (e, data) -&gt;
              $(".progress, #dropzone").fadeIn()
              $.each data.files, (index, file) -&gt;
                  $('.well').html("").append("Uploading: " + file.name + '&lt;br&gt;' + "File size: " + (file.size / 1000000 ) + ' MB')
  
  
            progress: (e, data) -&gt;
              percent = undefined
              percent = Math.round((e.loaded / e.total) * 100)
              $(".bar").css "width", percent + "%"
  
            fail: (e, data) -&gt;
              console.log "fail"
  
            success: (data) -&gt;
              url = undefined
              url = decodeURIComponent($(data).find("Location").text())
              $("#video_file").val url
  
              done: (event, data) -&gt;
                      $("#new_video").submit()
                      $(".progress").fadeOut 1200, -&gt;
                        $(".bar").css "width", 0
  </code></pre>
  
  <p>UPDATE:</p>
  
  <p>This works nicely. Moving the if statement before the /signed_url prevents a file that is too big being sent to the server and alerts the user.</p>
  
  <pre><code> $ -&gt;
        $(".direct-upload").each (data) -&gt;
          form = $(this)
          $(this).fileupload 
            url: form.attr("action")
            type: "POST"
            autoUpload: true
            dataType: "xml"
            add: (event, data) -&gt;
             if data.files[0].size &lt; 5242880
              $.ajax
                url: "/signed_urls"
                type: "GET"
                dataType: "json"
                data:
                  doc:
                    title: data.files[0].name
  
                async: false
                success: (data) -&gt;
                  form.find("input[name=key]").val data.key
                  form.find("input[name=policy]").val data.policy
                  form.find("input[name=signature]").val data.signature
  
              data.submit()
             else
               alert("File too big")
  
            send: (e, data) -&gt;
                 $(".progress, #dropzone").fadeIn()
                 $.each data.files, (index, file) -&gt;
                    $('.well').html("").append("Uploading: " + file.name + '&lt;br&gt;' + "File size: " + (Math.round(file.size / 1000000 )) + ' MB')
  
  
            progress: (e, data) -&gt;
              percent = undefined
              percent = Math.round((e.loaded / e.total) * 100)
              $(".bar").css "width", percent + "%"
  
            fail: (e, data) -&gt;
              console.log "fail"
  
            success: (data) -&gt;
              url = undefined
              url = decodeURIComponent($(data).find("Location").text())
              $("#video_file").val url
  
            done: (event, data) -&gt;
              $("#new_video").submit()
              $(".progress").fadeOut 1200, -&gt;
                  $(".bar").css "width", 0
  </code></pre>