add debounce code to prevent the client from making multiple submissions after clicking the submit button
MODIFY
app/views/assessments/_handin_form.html.erb
app/views/assessments/_handin_form.html.erb
<% end %>
<% content_for :javascripts do %>
<script>
+ var submittedFile = false;
+
+ function flashError(message) {
+ const elem = $("<div />").prop("id", "flash_error").addClass("error").text(message);
+ $("#flashes").append(
+ elem
+ );
+
+ setTimeout(() => {
+ elem.hide(500);
+ }, 3000);
+ }
+
function dropHandler(e) {
e.preventDefault();
$(".drag-drop-handin").get(0).style = undefined;
- handleFiles(e.dataTransfer.files);
+ if (e.dataTransfer.files.length === 1) {
+ var fileSelector = $("#handin_show_assessment input[type='file']").get(0);
+ fileSelector.files = e.dataTransfer.files;
+ if (fileSelector.files.length === 1) {
+ showFiles();
+ enableSubmit();
+ }
+ }
}
function dragOverHandler(e) {
false
);
- function handleFiles(fileList) {
- if (fileList.length === 1) {
- var fileSelector = $("#handin_show_assessment input[type='file']").get(0);
- fileSelector.files = fileList;
- showFiles();
- } else {
- // invalid number of files alert
- }
- }
-
function showFiles() {
var fileSelector = $("#handin_show_assessment input[type='file']").get(0);
var file = fileSelector.files[0];
- console.log(file);
$("#handin-file-name").text(file.name);
$("#handin-modify-date").text(moment(file.lastModified).format("MMMM Do YYYY, h:mm a"));
+ submittedFile = false;
var sOutput = file.size + " bytes";
for (var aMultiples = ["kb", "mb", "gb", "tb", "pb", "eb", "zb", "yb"], nMultiple = 0, nApprox = file.size / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) {
}
}
+ if (fileSelector.files.length === 1) {
$(".handin-row").hide();
$(".handedin-row").show();
enableSubmit();
}
+ }
$("#integrity_checkbox").change(function (e) {
enableSubmit();
e.preventDefault();
var fileSelector = $("#handin_show_assessment input[type='file']").get(0);
fileSelector.value = null;
- $(".handin-row").show();
- $(".handedin-row").hide();
+ $(".handin-row").show(function () {
enableSubmit();
});
+ $(".handedin-row").hide();
+ });
function enableSubmit() {
var checkbox = document.getElementById("integrity_checkbox");
} else {
$("#fake-submit").removeClass("disabled");
}
+
+ if (checkbox.checked && $(".handin-row").is(":hidden") && $("#fake-submit").hasClass("disabled") && fileSelector.files.length === 0) {
+ // theres an issue
+ $(".handin-row").show();
+ $(".handedin-row").hide();
+ flashError("There was an error processing your file, please try again.");
+ }
}
+
+ $("#fake-submit").click(function (e) {
+ if (submittedFile) {
+ e.preventDefault();
+ return;
+ }
+ $("#fake-submit").addClass("disabled");
+ submittedFile = true;
+ });
</script>
<% end %>
<div class="row handin-row">

add debounce code to prevent the client from making multiple submissions after clicking the submit button