AJAX File Upload with PHP Validation

Question

I have a form that has two text fields and a file upload field.

The validation is handled completely from PHP and I'm using a little bit of Ajax to retrieve the error messages the PHP script produces via an array (err[]).

My problem is, I can't seem to get the file upload validation to work correctly. (when uploading a file, it will always say "Wrong file format only .png , .gif, .jpg, .jpeg are accepted")

The Ajax is below:

function checkform() {
        $.post('upload.php', $("form#uploadForm").serialize(), function (data) {

                $("div#error").html(data).slideDown("fast");

                var destination = $('div#uploadContainer').offset().top - 15;
                $("html:not(:animated),body:not(:animated)").animate({
                    scrollTop: destination
                }, 200);

            });
    return false;
}

The following validation seems to ALWAYS be triggered:

$extension = strrchr($_FILES['uploadFile']['name'], '.');
    if (!in_array($extension, $extensions)) {
        $err[]='Wrong file format only .png , .gif, .jpg, .jpeg are accepted';
    }
...
...

This might help you ? http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously?rq=1 — Riddell, May 04 '16 at 15:34
This too: http://stackoverflow.com/questions/6974684/how-to-send-formdata-objects-with-ajax-requests-in-jquery — Riddell, May 04 '16 at 15:34
I've seen both before making this post - not sure how to implement the suggested code into what I already have though. — gromey, May 04 '16 at 15:36

score 0 · Answer 1 · answered May 04 '16 at 15:49

0

if (isset($_FILES['uploadFile']) && $_FILES['uploadFile']['size'] != 0)
{
    // Upload file
}

answered May 04 '16 at 15:49

Deepak Adhikari

419
2
4

Interesting... That's now passing the validation rule, but now my rule under it is being picked up (see original post) – gromey May 04 '16 at 15:52
$extension = end(explode('.', $_FILES['uploadFile']['name'])); – Deepak Adhikari May 04 '16 at 16:09
$extension = end(explode('.', $_FILES['uploadFile']['name'])); if (!in_array($extension, $extensions)) { $err[]='Wrong file format only .png , .gif, .jpg, .jpeg are accepted'; } ^ Like this? - Difficult to see without the formatting - I really appreciate the help Deepak – gromey May 04 '16 at 16:39
@DavidPottrell I have pasted code above with formatting. Please scroll up the page. – Deepak Adhikari May 04 '16 at 16:47

score 0 · Answer 2 · answered May 04 '16 at 16:10

0

$extension = end(explode('.', $_FILES['uploadFile']['name']));

if (!in_array($extension, $extensions))
{
    $err[]='Wrong file format only .png , .gif, .jpg, .jpeg are accepted';
}

answered May 04 '16 at 16:10

Deepak Adhikari

419
2
4

No luck I'm afraid! Even though a valid image is selected, the validation rule is still triggered. Seems my validation rules need work! – gromey May 04 '16 at 17:25
Could you paste your validation rules? – Deepak Adhikari May 04 '16 at 17:32
@DavidPottrell Check new ans. I have posted above. – Deepak Adhikari May 04 '16 at 17:44
Use `strtolower(pathinfo($_FILES['uploadFile']['name'], PATHINFO_EXTENSION))` instead of that hacky way to get the extention. – Ismael Miguel May 04 '16 at 17:58
@DeepakAdhikari Still no luck - it still displays the file extension rule - I've looked over the code so many times and can't see why... – gromey May 04 '16 at 22:07
@DavidPottrell It may be because of upload and file extensions logic. I have posted correct logic. Please check it. – Deepak Adhikari May 05 '16 at 05:07

score 0 · Answer 3 · answered May 04 '16 at 17:43

0

As $extension has extension without dot(.). Remove dot(.) from file extensions

$extensions = array('.png', '.gif', '.jpg', '.jpeg','.PNG', '.GIF', '.JPG', '.JPEG');

which will be

$extensions = array('png', 'gif', 'jpg', 'jpeg','PNG', 'GIF', 'JPG', 'JPEG');

Hope this fixes the bug

answered May 04 '16 at 17:43

Deepak Adhikari

419
2
4

Using @imvain2's ajax, the validation works now. However on successful submission, the page should redirect, instead it's just echoed inside of the error message container? – gromey May 05 '16 at 08:37

score 0 · Answer 4 · edited May 23 '17 at 10:28

0

Per @riddell's comment (AJAX File Upload with PHP Validation)

the problem is most likely NOT php but actually the Jquery itself. something like this could work

var form = $('form')[0];
var data = new FormData(form);

    $.ajax({
      url: 'upload.php',
      data: data ,
      processData: false,
      contentType: false,
      type: 'POST',
      success: function(data){
        alert(data);
      }
    });

edited May 23 '17 at 10:28

Community

1
1

answered May 04 '16 at 18:12

imvain2

15,480
1
16
21

Using this code brings me back to the original issue of it triggering the first validation rule "Please select an image". - It does work with the other validation rules though :S – gromey May 04 '16 at 22:03
in your PHP try `print_r($_FILES);` and check in the console to see if the files are even being transferred. – imvain2 May 04 '16 at 22:21
Array ( [uploadFile] => Array ( [name] => pc-1207834.jpg [type] => image/jpeg [tmp_name] => /tmp/phpvG4w9s [error] => 0 [size] => 657386 ) ) Please upload an image – gromey May 04 '16 at 22:26

score 0 · Answer 5 · answered May 05 '16 at 05:06

Correct logic for upload and checking file extension

if (isset($_FILES['uploadFile']) && $_FILES['uploadFile']['size'] != 0)
{
    $extension = end(explode('.', $_FILES['uploadFile']['name']));

    if (!in_array($extension, $extensions))
    {
        $err[]='Wrong file format only .png , .gif, .jpg, .jpeg are accepted';
    }

    // Write code to upload image here
}
else
{
    // There was error while uploading image
    // $_FILES['uploadFile']['error'] gives error code
    //  
    // Possible errors
    // UPLOAD_ERR_OK: 0
    // UPLOAD_ERR_INI_SIZE: 1
    // UPLOAD_ERR_FORM_SIZE: 2
    // UPLOAD_ERR_NO_TMP_DIR: 6
    // UPLOAD_ERR_CANT_WRITE: 7
    // UPLOAD_ERR_EXTENSION: 8
    // UPLOAD_ERR_PARTIAL: 3
}

This works! The only issue now is the success page appears inside of the error messages. — gromey, May 05 '16 at 08:15

AJAX File Upload with PHP Validation

5 Answers5