CODEWITHSUNDEEP
phpjqueryhtml
user1830984
user1830984

Reputation: 859

success message changes to cancel message after file is successfully uploaded

I am having trouble displaying the correct message when file is sucessfully uploaded.

What happens is that when a file is successfully uploaded, for a split second it displays the success message but then suddenly it changes to the cancel message. My question is that if a file is successfully uploaded, I want the the success message to be displayed and obviously I don't want it to change to cancel message.

Below is a form where it contains a file input as well as and upload and cancel button;

<form action='imageupload.php' method='post' enctype='multipart/form-data' target='upload_target_image' onsubmit='return imageClickHandler(this);' class='imageuploadform' > 
 Image File: <input name='fileImage' type='file' class='fileImage' /></label><br/><br/><label class='imagelbl'>
 <input type='submit' name='submitImageBtn' class='sbtnimage' value='Upload' /></label>
 <input type='reset' name='imageCancel' class='imageCancel' value='Cancel' /></label>
 <iframe class='upload_target_image' name='upload_target_image' src='#' style='width:0px;height:0px;border:0px;solid;#fff;'></iframe></form>

Below is the function where it starts the file uploading:

function startImageUpload(imageuploadform){

  $(imageuploadform).find('.imagef1_cancel').css('visibility','visible');
  sourceImageForm = imageuploadform;

        $(imageuploadform).find(".imageCancel").on("click", function(event) {
    $('.upload_target_image').get(0).contentwindow
    $("iframe[name='upload_target_image']").attr("src", "javascript:'<html></html>'");
     $request = $.ajax("cancelimage.php").done(function(data) {

        return stopImageUpload(2);

    });  

}); 

      return true;
}

Below is the function where it stop the file uploading:

var imagecounter = 0;

function stopImageUpload(success, imagefilename){

      var result = '';
      imagecounter++;

      if (success == 1){
         result = '<span class="imagemsg'+imagecounter+'">The file was uploaded successfully</span>';      
      }
      else if (success == 2){
          result = '<span class="imagemsg'+imagecounter+'"> The file upload was cancelled</span>';
      }
      else {
         result = '<span class="imagemsg'+imagecounter+'">There was an error during file upload</span>';
      }


      $(sourceImageForm).find('.imagef1_cancel').css('visibility','hidden');
      $(sourceImageForm).find('.imagemsg').html(result);
      $(sourceImageForm).find(".fileImage").replaceWith("<input type='file' class='fileImage' name='fileImage' />");


      return true;   
}

Below is the clickHandler function:

     function imageClickHandler(imageuploadform){ 
          if(imageValidation(imageuploadform)){ 
              window.lastUploadImageIndex = $('.imageuploadform').index(imageuploadform); 
              return startImageUpload(imageuploadform); 
              $request.abort()
          } 
          return false;
      }

Below is the imageupload.php page where it uploads the files:

<?php

ini_set('display_errors', 1);
error_reporting(E_ALL);


session_start();


if ($_FILES['fileImage']['error'] === UPLOAD_ERR_OK) {
    $result = 0;


    if (getimagesize($_FILES['fileImage']['tmp_name'])) {
        if ((($_FILES["fileImage"]["type"] == "image/gif") || ($_FILES["fileImage"]["type"] == "image/jpeg") || ($_FILES["fileImage"]["type"] == "image/pjpeg") || ($_FILES["fileImage"]["type"] == "image/jpg")) && ($_FILES['fileImage']['size'] > 0)) {
            if (is_file("ImageFiles/" . $_FILES['fileImage']['name'])) {
                $parts = explode(".", $_FILES['fileImage']['name']);
                $ext   = array_pop($parts);
                $base  = implode(".", $parts);
                $n     = 2;

                while (is_file("ImageFiles/" . $base . "_" . $n . "." . $ext))
                    $n++;
                $_FILES['fileImage']['name'] = $base . "_" . $n . "." . $ext;

                move_uploaded_file($_FILES["fileImage"]["tmp_name"], "ImageFiles/" . $_FILES["fileImage"]["name"]);
                $result = 1;


            }

            else {
                move_uploaded_file($_FILES["fileImage"]["tmp_name"], "ImageFiles/" . $_FILES["fileImage"]["name"]);
                $result = 1;
            }

        }

    }
} else {
    echo "Upload was not successful";
}

?>

Upvotes: 2

Views: 685

Answers (1)

jfriend00
jfriend00

Reputation: 707476

Your code calls:

stopImageUpload(2);

after the completion of the ajax call. Passing 2 causes your code to say the upload was cancelled. So, right now the code is doing exactly what you've asked it to do (which is to always say that the upload was cancelled).

You will need to differentiate between success and other ways that the ajax function may complete in order to show the proper state at completion.

Upvotes: 1

Related Questions