Question posted in
You can find the official documentation here.

How to change the button from upload to download button? – Jquery ajax

I would like to change the upload button to download button after the file has been uploaded without refreshing the page. Any idea to do this? My intial thought is using the ajax. but i do not know how the coding look like. I am kinda of new with this javacript and also ajax.Please help guys.Thank in advance

code that i use

<script>
$(function($){
    // File upload via Ajax
    $("#uploadForm").on('submit', function(e){
        e.preventDefault();
        $.ajax({
            xhr: function() {
                var xhr = new window.XMLHttpRequest();
                xhr.upload.addEventListener("progress", function(evt) {
                    if (evt.lengthComputable) {
                        var percentComplete = evt.loaded / evt.total;
                        percentComplete = parseInt(percentComplete * 100);
                        $(".progress-bar").width(percentComplete + '%');
                        $(".progress-bar").html(percentComplete+'%');
                        
                    //     $('#uploadStatus').html('<p style="color:#28A74B;">File has uploaded successfully!</p>');
                    // console.log('it works');
                    }
                }, false);
                return xhr;
            },
            type: 'POST',
            url: 'upload.php',
            data: new FormData(this),
            contentType: false,
            cache: false,
            processData:false,
            beforeSend: function(){
                $(".progress-bar").width('0%');
            },
            error:function(){
                $('#uploadStatus').html('<p style="color:#EA4335;">File upload failed, please try again.</p>');
            },
            success: function(resp){
                // alert(resp == 'ok');
                // $('#uploadForm')[0].reset();
                // $('#uploadStatus').html('<p style="color:#28A74B;">File has uploaded successfully!</p>');
                if(resp == 'ok'){
                    $('#uploadForm')[0].reset();
                    $('#uploadStatus').html('<p style="color:#28A74B;">File has uploaded successfully!</p>');
                    
                }else if(resp == 'err'){
                    $('#uploadStatus').html('<p style="color:#EA4335;">Please select a valid file to upload.</p>');
                }
            }
        });
    });
    
    // File type validation
    $("#fileInput").change(function(){
        var allowedTypes = ['video/avi'];
        var file = this.files[0];
        var fileType = file.type;
        if(!allowedTypes.includes(fileType)){
            $('#uploadStatus').html('<p style="color:#EA4335;">Please select a valid file to upload.</p>');
            $("#fileInput").val('');
            return false;
        }
    });
});
</script>

html code use for the button

<?php 
    if (file_exists("D:/Files".$row['path'].".avi"))
   {
   ?>
   <form action="code4.php?file_id=D:/Files<?php echo $row['path']?>.avi" method="post">
   <button type="submit" name="download_btn" class="btn btn-success" id=download_btn> Download </button>
   </form>
   <?php
   }
   else
   {
   ?>
   <button type="button" data-fid='<?php echo $row['path']?>' name="upload_btn"class="btn btn-info upload_btn" data-toggle="modal" data-target="#uploadfile">Upload</button>
<?php
}
?>
Tags:

2

Answers


  1. 0

    You’re already checking if the file has been uploaded so add your code there:

    if(resp == 'ok'){
  // Existing code:
  $('#uploadForm')[0].reset();
  $('#uploadStatus').html('<p style="color:#28A74B;">File has uploaded successfully!</p>');

  // New code: change "Upload" button to "Download:
  $('button[name="upload_btn"]').html('Download');
}

    If you’re trying to replace the entire Upload button with the HTML for the Download button:

    $('button[name="upload_btn"]').replaceWith(
   '<button type="submit" name="download_btn" class="btn btn-success" id=download_btn> Download </button>'
);
    Login or Signup to reply.
  2. 0

    Simply have two buttons, show only one at the time

    (function () {
  $(document).on('submit', '#main_form', function (e) {
    e.preventDefault();
    /**
    $.ajax({
      url: "",
      method: "",
      data: "",
      success: onSuccess
    })
    **/
    
    //function onSuccess() {
      $(this).addClass('uploaded');
    //}
  });
})();
    #download_btn {
  display: none;
}

.uploaded #download_btn {
  display: inline;
}

.uploaded #upload_btn {
  display: none;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="main_form">
  <button type="submit" name="download_btn" class="btn btn-success" id="download_btn"> Download </button>
  <button type="submit" name="upload_btn" class="btn btn-success" id="upload_btn"> Upload </button>
</form>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search