PHP input type file field being submitted, file isnt

Question

I have the following form.

<form action="picture.php" method="POST" class="pic_form">
<span class="picture_box">
<input type="file" accept="image/*" name="pic_upload" class="picture_upload_input" />
<p class="upload_info">Only file types of the extensions gif, jpg, png and svg are allowed. The maximum file size is 15mb. If your file is larger than 15mb, it will not upload.</p>
</span>
<input type="hidden" name="uid" value="<?php echo $_SESSION['userid']; ?>" />
<input type="button" name="upload_button" value="Upload" class="upload_button" />
</form>

I validate that the file is set and that it's of the correct type and size using jQuery. When I submit this form (using jQuery), the field is posted

$_POST['pic_upload']

This returns true.

However, the file itself isn't posted

$_FILES['custom_pic_upload']

This returns false and

var_dump($_FILES['custom_pic_upload']);

returns null.

How do I make the file itself upload?

Answer 1

Your form needs the attribute enctype, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form.

multipart/form-data: The value used for an element with the type attribute set to "file".

<form action="picture.php" method="POST" class="pic_form" enctype="multipart/form-data">
<span class="picture_box">
<input type="file" accept="image/*" name="pic_upload" class="picture_upload_input" />
<p class="upload_info">Only file types of the extensions gif, jpg, png and svg are allowed. The maximum file size is 15mb. If your file is larger than 15mb, it will not upload.</p>
</span>
<input type="hidden" name="uid" value="<?php echo $_SESSION['userid']; ?>" />
<input type="submit" name="upload_button" value="Upload" class="upload_button" />
</form>
<script type='text/javascript'> 
$('.upload_button').click(function(){ 
    var upload_ver_val = $('.picture_upload_input').val(); 
    if (upload_ver_val == '') { 
        alert("Please upload an image!");
        return false;
    } else {
        var ext = $('.picture_upload_input').val().split('.').pop().toLowerCase(); 
        if($.inArray(ext, ['gif','png','jpg','jpeg','svg']) == -1) {
            alert('Only file types of the extensions; gif, jpg, png and svg are allowed!');
            return false;
        } else { 
            $('.prof_pic_form').submit(); 
        } 
    } 
});
</script>

Other threads on the topic and tutorial.

What does enctype='multipart/form-data' mean?
http://www.tizag.com/phpT/fileupload.php

Also the name of the PHP value will be the name attribute, not the class, so look for it with pic_upload.