How to disable the download button while downloading and adding a file

From Fluke, I understand a problem that can cause a big problem with my application.

I have my app here where it will upload the video. application

The problem is that if you upload a video and then press the button Add Questionto add another file input to a new line, the button Uploadin the new line does not turn off, which means that you can upload several files that I don’t want, since this will stop loading the first file to stop loading and potentially a system crash if users try to download a large number of files. My question is that if I click the button Add Question, if the file is loading, then the download button in the added lines should be disabled before the download is complete?

To use the application, follow these steps:

  • Double-click Add Questionto add 2 new table rows. In each row of the table you will see a file entry.

  • When entering a file in line 1, select a video (I select a decent video size so that the file loads when you follow the other steps) and click Uploadto download the video. Now you will see that the buttons are Uploaddisabled when the video is loading

  • Now that the video is loading, click the button Add Questionagain to add another line. Now you will see that the button Uploadin the newly added line is not disabled during file download. I want this button and other download buttons that are added to disable if the file is loading.

Below is the corresponding code in which it adds table rows from a button Add Question:

function GetFormVideoCount(){ 
  return $('.videouploadform').length + 1;
}


var qnum = 1;
var qremain = 5;

function insertQuestion(form) {   

    if (qnum > 5) {
    return;
}


    var $tbody = $('#qandatbl_onthefly > tbody');
    var $tr = $("<tr class='optionAndAnswer' align='center'>");
    var $video = $("<td width='17%' class='video'></td>"); 

              $('.num_questions').each( function() {

    var $fileVideo = $("<form action='videoupload.php' method='post' enctype='multipart/form-data' target='upload_target_video' onsubmit='return videoClickHandler(this);' class='videouploadform' >" + 
    "<p class='videof1_upload_form'><label>" + 
    "Video File: <input name='fileVideo' type='file' class='fileVideo' /></label><br/><br/><label class='videolbl'>" +  
    "<input type='submit' name='submitVideoBtn' class='sbtnvideo' value='Upload' /></label>" + 
    "<p class='videof1_upload_process' align='center'>Loading...<br/><img src='Images/loader.gif' /></p>" +
    "<input type='hidden' class='numvideo' name='numvideo' value='" + GetFormVideoCount() + "' />" + </p>" +
    "<iframe class='upload_target_video' name='upload_target_video' src='/' style='width:0px;height:0px;border:0px;solid;#fff;'></iframe></form>"); 

    $video.append($fileVideo);


    $tr.append($video);  
    $tbody.append($tr); 


}

Below is the corresponding code where, when it starts the file upload process and where it disables the download buttons in the lines that have already been added:

   function startVideoUpload(videouploadform){

             sourceVideoForm = videouploadform;

            $(".sbtnvideo").attr("disabled", "disabled");


    }); 

          return true;
    }

:

function stopVideoUpload(success, videoID, videofilename){


      $(".sbtnvideo").removeAttr("disabled");


      return true;   
}

:

   function videoClickHandler(videouploadform){ 
      if(videoValidation(videouploadform)){ 
          window.lastUploadVideoIndex = $('.videouploadform').index(videouploadform);
          return startVideoUpload(videouploadform); 
      } 
      return false;
  }

UPDATE:

function startVideoUpload(videouploadform){


               $(".sbtnvideo").click(function(event){
               $(".sbtnvideo").attr("disabled", "disabled");
    event.preventDefault();
    });

       return true;   
    }

    function stopVideoUpload(success, videoID, videofilename){


                $(".sbtnvideo").click(function(event){
                $(".sbtnvideo").removeAttr("disabled");
    return true;
});


          return true;   
    }
+5
1

, .

$(".sbtnvideo").click(function(event){
    event.preventDefault();
});

$(".sbtnvideo").click(function(event){
    return true;
});
+1

All Articles