Search code examples
javascriptphpjqueryjquery-file-uploadblueimp

How to limit maximum 1 file upload in jQuery-File-Upload from backend in PHP


I am using jQuery-File-Upload and trying to limit the maximum image uploads to 1 (single image upload).

I am using example php file from the demo version itself which is located in server/php/ as UploadHandler.php

As of now I have blocked the multiple image uploads on drag and drop in JS but as its just on the client side and which can't be trusted as a full proof solution, I want to know how can I limit the maximum no. of uploads per request

Till now I have done:

<input class="photo file" id="fileupload" name="images" type="file">

And on JS part:

$('#fileupload').fileupload({
    url: url,
    dataType: 'json',
    autoUpload: true,
    dropZone: $('#fileupload'),
    singleFileUploads: false,
}).on('fileuploadadd', function (e, data) {
    //Hides error
    $('.error').hide().children().text('');
    var maxFileUploadAllowed = 1;
    var fileCount = data.files.length;
    if (fileCount > maxFileUploadAllowed) {
      $('.error').fadeIn().children().text("You are allowed to upload only 1 file");
      return false;
    }

and that works properly, but limiting 1 file on backend is also necessary

On some digging I found that there's a parameter in options as 'max_number_of_files' => null, I tried changing it to 1 but then on each file upload even on single file upload it started giving error as Maximum File limit exceeded

And after further digging I found that checks in this if statement is somehow true and causing error.

if (is_int($this->options['max_number_of_files']) &&
            ($this->count_file_objects() >= $this->options['max_number_of_files']) &&
            // Ignore additional chunks of existing files:
            !is_file($this->get_upload_path($file->name))) {
        $file->error = $this->get_error_message('max_number_of_files');
        return false;
    }

I did echo $this->count_file_objects() and found that it's actually returning the maximum files allowed in the uploads directory.

So there's no handler in demo code which can limit no. of file uploads on the backend.

Just wanted to know if there's a way I can restrict the no. of file uploads in the backend?

There will be issues when user will fiddle the following:

  1. Name array <input class="photo file" id="fileupload" name="images[]" type="file">
  2. "multiple" attribute in <input class="photo file" id="fileupload" name="images[]" type="file" multiple>
  3. Or fiddle with the following piece of

code below:

var maxFileUploadAllowed = 1;
    var fileCount = data.files.length;
    if (fileCount > maxFileUploadAllowed) {
      $('.error').fadeIn().children().text("You are allowed to upload only 1 file");
      return false;
    }

As there's no check in the backend.


Solution

  • After digging deeper into the PHP code in the demo within server/php/UploadHandler.php

    I found that upload process is working on POST and thus $this->post($this->options['print_response']); method is called for handling uploads:

    And before this process there were some initial validations in validate():

    protected function validate($uploaded_file, $file, $error, $index) {
        if ($error) {
            $file->error = $this->get_error_message($error);
            return false;
        }
        $content_length = $this->fix_integer_overflow(
            (int)$this->get_server_var('CONTENT_LENGTH')
        );
        $post_max_size = $this->get_config_bytes(ini_get('post_max_size'));
        if ($post_max_size && ($content_length > $post_max_size)) {
            $file->error = $this->get_error_message('post_max_size');
            return false;
        }
    ...
    return true;
    }
    

    So it's clear that validate() is responsible for initial checks.

    Initially, in Options, I added a parameter called max_files_upload_allowed: 1 and then I added a error message in the $error_messages as 'max_files_upload_allowed' => 'You are not allowed to upload multiple files at once'

    then I created my method getUploadFilesCount() to check the no. of files user added to upload queue:

    protected function getUploadFilesCount() {
          $file_upload_count = $this->get_upload_data($this->options['param_name']);
          return count($file_upload_count['name']);
        }
    

    And after that added following check in validate()

    //Check max_files_upload_allowed here
    if (is_int($this->options['max_files_upload_allowed']) && (
            $this->getUploadFilesCount() > $this->options['max_files_upload_allowed'] &&
            $this->options['max_files_upload_allowed'] > 0)
        ) {
                $file->error = $this->get_error_message('max_files_upload_allowed');
        return false;
    }
    

    And voila! If user adds more files than listed in max_files_upload_allowed: 1 then (s)he will receive the error.

    And that solves the purpose, prevents malicious attempts and adds more reliability to the file upload process used.