Reputation: 83

How to prevent from submitting upload multiple times on server side when using ajax and php

i am using this code for uploading multiple files .here, upload and select button become disabled when uploading is in progress but this works only on client side user can easily modify the code and remove its disable property so how can i do this on server side so the user will not be able to submit the form many times by clicking upload button after disabling it. Thanku for any help!

index.php

<!DOCTYPE html>
<html>
<head>
    <title>Multiple File Upload using Ajax</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<body>
    <div>
        <form action="action.php" method="post" enctype="multipart/form- data" id="multiple-upload-form">
            <input type="button" id="select-file-btn" value="Select Files" onclick="document.getElementById('files').click(); return false;" />
            <input type="submit" id="file-upload-btn" name="file_upload_btn" value="Upload">
            <input type="file" id="files" name="files[]" multiple="" style="visibility: hidden;">
            <br><br>
            <div class="file-bar">
                <span class="file-bar-fill" id="file-bar-fill-id"><span class="file-bar-fill-text" id="file-bar-fill-text-id"></span></span>
            </div>
            <script type="text/javascript">
                var app = app || {};

                (function(o){
                    "use strict";

                    var ajax, getFormData, setProgress;

                   ajax = function(data){
                        var xmlhttp = new XMLHttpRequest(), uploaded;

                        xmlhttp.addEventListener('readystatechange', function(){
                            if(this.readyState==4){
                                if(this.status==200){
                                    uploaded = JSON.parse(this.response);

                                    if(typeof o.options.finished==='function'){
                                       o.options.finished(uploaded);
                                    }

                               }    else {
                                    if(typeof o.options.error === 'function'){
                                    o.options.error();
                                    }
                                }
                            }
                        });

                       xmlhttp.upload.addEventListener("progress", function(event){
                            var percent;
                            if(event.lengthComputable===true){
                                percent = Math.round((event.loaded / event.total) * 100);
                                setProgress(percent);
                           }

                        });

                        if(o.options.progressBar!==undefined){
                            o.options.progressBar.style.width=0;
                        }
                        if(o.options.progressText!==undefined){
                           o.options.progressText.innerText=0;
                       }

                         xmlhttp.open("post", o.options.processor);
                         xmlhttp.send(data);
                    };

                    getFormData = function(source){
                        var data = new FormData(), i;

                        if(source.length<=0)
                        {
                            return false;
                        }
                        else
                         {
                             for(i=0;i<source.length; i++){
                                data.append('files[]', source[i]);
                             }

                            return data;
                         }
                     };

                    setProgress = function(value){
                         if(o.options.progressBar!==undefined){
                            o.options.progressBar.style.width = value? value+"%":0;
                         }
                        if(o.options.progressText!==undefined){
                            o.options.progressText.innerText=value?value+"%":0;
                         }
                     };

                     o.uploader = function(options){
                          o.options = options;

                         if(o.options.files !== undefined){
                             var imageFormDataValue = getFormData(o.options.files.files);
                             if(imageFormDataValue===false)
                             {
                                 alert("No Files Selected");
                                 document.getElementById("file-upload-btn").disabled = false;
                                 document.getElementById("select-file-btn").disabled = false;
                             }
                             else
                            {
                                ajax(imageFormDataValue);
                            }
                        }
                    };

                 }(app));

                 document.getElementById("file-upload-btn").addEventListener("click", function(e){
                    e.preventDefault();

                    document.getElementById("file-upload-btn").setAttribute("disabled", "true");
                    document.getElementById("select-file-btn").setAttribute("disabled", "true");

                     var f = document.getElementById('files'),
                         pb = document.getElementById('file-bar-fill-id'),
                         pt = document.getElementById('file-bar-fill-text-id');

                    app.uploader({
                         files: f,
                         progressBar: pb,
                         progressText: pt,
                         processor: "action.php",

                        finished: function(data){
                            document.getElementById("file-upload-btn").disabled = false;
                            document.getElementById("select-file-btn").disabled = false;

                            if(data.status===true){
                                alert(data.data);
                            }

                        },

                         error: function(){
                            alert("Error occured. Try Again after page reload.");
                        }
                    });
                });
             </script>
         </form>
     </div>
</body>
</html>

action.php

 <?php

 set_time_limit(0);

 if(count($_FILES["files"])>0)
{
    $success = 0;
    $failed = 0;


     foreach ($_FILES["files"]["error"] as $key => $value)
    {
        if(empty($value))
        {
             if(move_uploaded_file($_FILES["files"]["tmp_name"][$key], __DIR__."/uploads/".uniqid()."_".$_FILES["files"]["name"][$key]))
          {
               $success++;
           }
           else
           {
            $failed++;
           }
       }
        else
        {
            $failed++;
         }
    }

    $data = "";

    if($success>0)
        $data .= $success." files uploaded. ";

    if($failed>0)
        $data .= $failed." files failed to upload";

     $response = array("status" => true, "data" => $data );

     echo json_encode($response);
 }

 ?>

Upvotes: 6

Answers (1)

Agnius Vasiliauskas

Reputation: 11277

As I've said in comment - no real cure to stop redundant uploads at server side as long as user has full access to html. The only thing that you can do - is to monitor total uploaded MB/day and to blacklist user ip/account who does such illegal activity. For example:

session_start();

$_SESSION['total_uploaded'] += (int)(filesize(($_FILES['fileToUpload']['tmp_name']))/(1024*1024));

if ($_SESSION['total_uploaded'] > 1024) {
    echo "<p style='background-color: palevioletred; max-width:280px;'>
         You uploaded too much data : {$_SESSION['total_uploaded']} MB<br>
         So your IP/account will be blacklisted !</p>";
}

$html = <<< STR
<table border="1">
<tr>
<td>
<form id="uploadForm" action="" method="post"  enctype= "multipart/form-data">
    <br>
    &emsp;<input type="file" name="fileToUpload" value=""><br><br>
    &emsp;<input type="submit" name="submit_file" value="Upload">
</form>
</td>
</tr>
</table>

STR;

echo $html;

After some threshold of bombing server with uploads user will see:

Upvotes: 2

How to prevent from submitting upload multiple times on server side when using ajax and php

Answers (1)

Related Questions