Stop file loading when files are too large - jQuery S3

Question

Please view the snippet below. I am using jQuery fileUpload and s3 direct form to upload videos to AWS. I would like to have a 5mb file size limit that is imposed before the video gets to any local server. How can I change this code so that the download is completely stopped and alerts the user when the file size exceeds 5 MB, and if it is under it, everything happens as usual?

I added a 5 mb content length restriction to the parameters of the S3 form, so loading them more than that, but it would be preferable if there was something to notify the user that the download is too large to start.

$ -> $(".direct-upload").each -> form = $(this) $(this).fileupload url: form.attr("action") type: "POST" autoUpload: true dataType: "xml" add: (event, data) -> if data.files[0].size < 5242880 $.ajax url: "/signed_urls" type: "GET" dataType: "json" data: doc: title: data.files[0].name async: false success: (data) -> 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) -> $(".progress, #dropzone").fadeIn() $.each data.files, (index, file) -> $('.well').html("").append("Uploading: " + file.name + '<br>' + "File size: " + (file.size / 1000000 ) + ' MB') progress: (e, data) -> percent = undefined percent = Math.round((e.loaded / e.total) * 100) $(".bar").css "width", percent + "%" fail: (e, data) -> console.log "fail" success: (data) -> url = undefined url = decodeURIComponent($(data).find("Location").text()) $("#video_file").val url done: (event, data) -> $("#new_video").submit() $(".progress").fadeOut 1200, -> $(".bar").css "width", 0 

UPDATE:

It works well. Moving the if statement before / signed _url prevents a file that is too large to be sent to the server and alert the user.

  $ -> $(".direct-upload").each (data) -> form = $(this) $(this).fileupload url: form.attr("action") type: "POST" autoUpload: true dataType: "xml" add: (event, data) -> if data.files[0].size < 5242880 $.ajax url: "/signed_urls" type: "GET" dataType: "json" data: doc: title: data.files[0].name async: false success: (data) -> 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) -> $(".progress, #dropzone").fadeIn() $.each data.files, (index, file) -> $('.well').html("").append("Uploading: " + file.name + '<br>' + "File size: " + (Math.round(file.size / 1000000 )) + ' MB') progress: (e, data) -> percent = undefined percent = Math.round((e.loaded / e.total) * 100) $(".bar").css "width", percent + "%" fail: (e, data) -> console.log "fail" success: (data) -> url = undefined url = decodeURIComponent($(data).find("Location").text()) $("#video_file").val url done: (event, data) -> $("#new_video").submit() $(".progress").fadeOut 1200, -> $(".bar").css "width", 0 

Answer 1

It is almost exactly the same as I do it. If you do not send it, it will not send the file.

Do you want to send an ajax request to /signed_urls when the file size is too large? Maybe you should move it all inside the if data.files[0].size < 5242880 ?

Answer 2

 <form method="post" action="./step2.php" enctype="multipart/form-data" id="formID" name="formID"> <input type="text" name="title" id="title" /> <input type="file" name="pptfile" id="pptfile"/> <input type="submit" name="btn" id="btn" /> <script type="text/javascript"> function checkUpload(size) { if(size>25) { var n = size.toFixed(2); alert('Your file size is: ' + n + "MB, and it is too large to upload! Please try to upload smaller file (25MB or less)."); document.getElementById("btn").style.display='none'; } else { //alert('File size is OK'); $('#tbn').show(); } } $('#pptfile').bind('change', function() { var fileSize = this.files[0].size/1024/1024; checkUpload(fileSize); }); </script> </form>