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 pletely and alerts the user when the filesize is over 5mb and if its under, everything carries on as usual?
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.
$ ->
$(".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:
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.
$ ->
$(".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
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 pletely and alerts the user when the filesize is over 5mb and if its under, everything carries on as usual?
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.
$ ->
$(".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:
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.
$ ->
$(".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
3 Answers
Reset to default 8<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>
That's pretty much exactly the same way I do it. If you don't submit it, it won't send the file.
Do you want to be submitting that ajax requested to /signed_urls when the filesize is too big? Maybe you should move all of that inside the if data.files[0].size < 5242880 block?
Working for me:
checkFileSize(event) {
f = document.getElementById('id_ifile');
if (f.files.length > 0 && f.files[0].size > 3 * 1024 ** 2) {
alert( 'The file is too large (no more than 3MB)' );
event.preventDefault();
}
}