form-script.js

   1 //Files and character counter
   2 document.addEventListener("FileUploaded", function(e){
   3                         console.log("end-of-end");
   4                         console.log(image_load_arr)
   5                         var all_checked = !image_load_arr.some(function(image_load_bool){
   6                                 return (!image_load_bool)
   7                         });
   8                         if(all_checked){
   9                                 console.log("sent");
  10                                 var form_submision = new XMLHttpRequest();
  11                                 form_submision.open("POST", "/add-to-queue");
  12                                 form_submision.onload = function(){
  13                                         var code = form_submision.response.split(" ")[0];
  14                                         //if( code == "-1") alert("Multiple submissions detected");
  15                                         //else if(code == "-2")alert("Error");
  16                                         //window.location.href= "/confirmation";
  17                                 };
  18                                 form_submision.send(form_submision_values);
  19                         }
  20         });
  21 var form_submision_values;
  22
  23 var character_counter = document.getElementById('CharacterCount');
  24 var error_msg = document.getElementById('errorMsg');
  25 var error_msg_text = document.createTextNode("");
  26 error_msg.appendChild(error_msg_text);
  27 var textarea = document.getElementById('Comment');
  28 var submit = document.getElementById('submit-button');
  29 submit.removeAttribute('disabled');
  30
  31 var image_load_arr = [false,false,false,false];
  32
  33 var CHARACTER_LIMIT =  280;
  34
  35 function checkIfSubmitToBeDisabled(){
  36         characterCountColoring();
  37         //Check comment
  38         var length = textarea.value.length;
  39         if(length == 0) {
  40                 submit.setAttribute('disabled',1);
  41                 error_msg.textContent = "Input a comment and/or file";
  42         }
  43         else if(length > CHARACTER_LIMIT){
  44                 submit.setAttribute('disabled',1);
  45                 error_msg.textContent = "Character count exceeded(>500"+ CHARACTER_LIMIT + ")";
  46         }
  47         else{
  48                 submit.removeAttribute('disabled');
  49                 error_msg.innerHTML = "Click to submit";
  50         }
  51         //check all file fontainers
  52         for(var i = 1 ; i <= 4; i++){
  53                 if(document.getElementById("f" + i).files[0] != undefined){ // check if exists
  54                         console.log(document.getElementById("f" + i).files[0].name);
  55                         if(document.getElementById("f" + i).files[0].name.indexOf(".webm") >-1){ //
  56                                 submit.setAttribute('disabled',1);
  57                                 console.log(error_msg_text);
  58                                 error_msg.textContent = "Twitter does not support .webm. Use .mp4 instead.";
  59                                 break;
  60                         }
  61                         if(length == 0) {
  62                                 console.log(document.getElementById("f" + i).files[0] )
  63                                 submit.removeAttribute('disabled');
  64                                 error_msg.nodeValue = "Click to submit";
  65                         }
  66                 }
  67         }
  68 }
  69
  70 function characterCountColoring(){
  71         var length = textarea.value.trim().length;
  72         var red = 0; var blue = 100; var green = 100;
  73         if(length == 0){
  74                 red = 0; blue = 0; green = 0;
  75         }
  76         else if(length > CHARACTER_LIMIT){
  77                 red = 255; blue = 0; green = 0;
  78         }
  79         else{
  80                 red = Math.ceil(length/CHARACTER_LIMIT * 180);
  81         }
  82         character_counter.innerHTML = '<span style=\'color:rgb(' + red + ',' + green + ',' + blue + ')\'>' + length + '</span>'
  83 }
  84
  85 function setFileListener(file){
  86         file_node = document.getElementById(file);
  87         (function(_file_node){
  88                 _file_node.addEventListener("change", checkIfSubmitToBeDisabled);
  89         })(file_node);
  90 }
  91
  92 //use an RSA token to prevent multiple form submissions
  93 //Ticket gen recieves the comment, the IP of the sender and creates a random value identifying the token.
  94 //This token primarily uses the IP and random value to decide if a form has been submitted multiple times.
  95 //Comments are checked against the server before file proccessing for speed and hidden in the token. comment is not sent in the files POST request.
  96 function submitProcess(event){
  97         image_load_arr = [false, false, false, false];
  98         var form = document.getElementById("submit-form");
  99         var submit =  document.getElementById("submit-button");
 100         var comment = document.getElementById("Comment").value;
 101         //submit.setAttribute("disabled", 1);
 102         form_submision_values =  new FormData();
 103
 104         //create a ticket to prevent resubmision on
 105          var ticket_request = new XMLHttpRequest();
 106          ticket_request.open("GET", "/ticket-gen?comment=" + comment);
 107          ticket_request.responseType="text";
 108          ticket_request.onload = function(){
 109                 var ticket = ticket_request.response;
 110                 console.log(ticket);
 111                 if(ticket[0] == "-"){
 112                         ticket_arr = ticket.split(" ");
 113                         if(ticket_arr[0] == "-1") window.alert("Don't double click submit.............\nServer got the comment, is processing image.");
 114                         if(ticket_arr[0] == "-2") {
 115                                 var response = window.confirm("Comment will require admin verification due to text filter. Please remove the word '" + ticket_arr[1] + "' or press OK to be put on the verification list");
 116                                 if(response == true){
 117                                         document.getElementById("Comment").value = "VERIFY: " +  document.getElementById("Comment").value
 118                                         submitProcess(event);
 119                                 }
 120                         }
 121                         if(ticket_arr[0] == "-3") {
 122                                 alert("Comment too long");
 123                         }
 124                         return false;
 125                 }
 126
 127                 form_submision_values.append("ticket", ticket);
 128
 129                 var file_upload_event = new Event("FileUploaded");
 130                 for(var file = 1 ; file <= 4 ; file++){
 131                         (function(_file){
 132                                 var image_reader = new FileReader();
 133                                 var file_obj = document.getElementById("f" + _file).files[0];
 134                                 if(file_obj !== undefined){
 135                                         image_reader.readAsBinaryString(file_obj, "UTF-8");
 136                                         image_reader.onload=function(){ }
 137                                         image_reader.onloadend=function(){
 138                                                 form_submision_values.append("file" + _file, file_obj.name + " " + btoa(image_reader.result));
 139                                                 console.log(file_obj.name  + " " + btoa(image_reader.result).substring(0,15));
 140                                                 image_load_arr[_file - 1] = true;
 141                                                 document.dispatchEvent(file_upload_event);
 142                                         }
 143                                 }
 144                                 else{
 145                                         image_load_arr[_file - 1] = true;
 146                                         form_submision_values.append("file" + _file, "");
 147                                         document.dispatchEvent(file_upload_event);
 148                                 }
 149                         })(file);
 150                 }
 151
 152          }
 153          ticket_request.send(null);
 154
 155         submit.removeAttribute("comment");
 156         event.preventDefault();
 157         return false;
 158 }
 159
 160 for(var i = 1 ; i <= 4; i++) setFileListener("f" + i);
 161
 162 if (textarea.addEventListener) {
 163         textarea.addEventListener('input', function() {
 164                 checkIfSubmitToBeDisabled();
 165   }, false);
 166 }
 167 else if (textarea.attachEvent) {
 168         textarea.attachEvent('onpropertychange', function() {
 169                  checkIfSubmitToBeDisabled();
 170   });
 171 }
 172 document.getElementById("submit-form").addEventListener("submit", submitProcess);
 173
 174
 175