Undefined offset PHP error using javascript ajax post method

Question

I have created and upload function using javascript I am sending input file data using javascript but for $_FILES it is not working or may be I am using incorrect way to do so please help me out with this concern

Php Code

$valid_exts = array('jpeg', 'jpg', 'png', 'gif');
    $max_file_size = 200 * 1024; #200kb
    $nw = $nh = 600; # image with # height

    if ($_SERVER['REQUEST_METHOD'] === 'POST') {
        if (isset($_FILES['image']) || isset($_POST['filename'])) {
            if (!$_FILES['image']['error']) {
                if(!isset($_FILES['image'])) {
                    $ext = strtolower(pathinfo($_POST['filename'], PATHINFO_EXTENSION));
                } else {
                    $ext = strtolower(pathinfo($_FILES['image']['name'], PATHINFO_EXTENSION));
                }

                if (in_array($ext, $valid_exts)) {
                    $style      = $_POST['style'];
                    $file_name  = uniqid() . '.' . $ext;
                    $path       = './uploads/' . uniqid() . '.' . $ext;
                    $size       = getimagesize($_FILES['image']['tmp_name']);

                    $x = (int) $_POST['x'];
                    $y = (int) $_POST['y'];
                    $w = (int) $_POST['w'] ? $_POST['w'] : $size[0];
                    $h = (int) $_POST['h'] ? $_POST['h'] : $size[1];

                    $data   = file_get_contents($_FILES['image']['tmp_name']);
                    $vImg   = imagecreatefromstring($data);
                    $dstImg = imagecreatetruecolor($nw, $nh);
                    imagecopyresampled($dstImg, $vImg, 0, 0, $x, $y, $nw, $nh, $w, $h);
                    imagejpeg($dstImg, $path);
                    imagedestroy($dstImg);

                    $query  = "UPDATE users SET profile_pic='$file_name', style='$style' WHERE uid = '".$_SESSION['uid']."'";
                    $insert = mysqli_query($connect, $query);

                    if($insert) {
                        $_SESSION["message"] = "Profile picture updated successfully";
                        header('Location: profile.php?uid='.$_SESSION['uid']);
                    } else {
                        $_SESSION["message"] = "There were some errors";
                        header('Location: profile.php?uid='.$_SESSION['uid'].'&edit=1');
                    }

            } else {
                echo 'unknown problem!';
            } 
        } else {
            echo 'file is too small or large';

        }
    } else {
        echo 'file not set';
    }   
        } else {
            echo 'bad request!';
        }

Here is my javascript code

function upload() {
var data = new XMLHttpRequest();
var url  = "includes/upload.php";

var file = document.getElementById("filename").value;
var image = document.getElementById("uploadImage").files[0];

var span = document.querySelector('#uploadPreview[style]'),
a = window.getComputedStyle(span, null).transform,
b = window.getComputedStyle(span, null).transformOrigin;
val = 'transform:'+a+';transform-origin:'+b+';backface-visibility: hidden;';

var vars = new FormData();
vars.append("style", val);
vars.append("image", image);
vars.append("filename", file);

data.open("POST", url, true);
data.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
data.onreadystatechange = function () {
    if(data.readyState == 4 && data.status == 200) {
        var return_data = data.responseText;
        document.getElementById("ms").innerHTML = return_data;
    }
}

data.send(vars);
}

Here is the html form

<form method="POST" enctype="multipart/form-data" style="text-align:center;">
            <input id="uploadImage" type="file" name="uploadImage" style="margin:auto;" />
            <input type="hidden" id="filename" name="filename" value="<?php if(!empty($data['profile_pic'])) { echo $data['profile_pic'];} ?>" />
            <button type="button" name="update_picture" class="btn_form" onclick="upload();">Update Picture</button>
        </form>

This is the error i am getting Notice: Undefined index: image

Possible duplicate of [Upload File With Ajax XmlHttpRequest](http://stackoverflow.com/questions/6211145/upload-file-with-ajax-xmlhttprequest) — jcubic, May 13 '16 at 12:29
Which offset is undefined? Which line number? @jcubic is most likely correct, though — MonkeyZeus, May 13 '16 at 12:30
so what would you recommend ? error on line 11 and also FORDATA at place of header reqyuest? — Mark Alan, May 13 '16 at 12:34
formData.append("thefile", file); thefile is id name ?? can you explain this to me ? — Mark Alan, May 13 '16 at 12:36
used FormData and still i am getting echo 'file not set'; isset(#_FILES['image']) is not set because so what should i do now — Mark Alan, May 13 '16 at 12:57
var vars = new FormData(); vars.append("style", val); vars.append("image", image); vars.append("filename", file); — Mark Alan, May 13 '16 at 12:58

score 0 · Answer 1 · answered May 13 '16 at 12:33

0

To send file using ajax you need to use formData:

var vars = new FormData();
vars.append("style", val);
vars.append("image", image);
vars.append("filename", file);
...
data.send(vars);

answered May 13 '16 at 12:33

jcubic

61,973
54
229
402

so at place of file name ? can you explain with the parameters – Mark Alan May 13 '16 at 12:39
@MarkAlan `FormData::append` method will append file object and string parameter. – jcubic May 13 '16 at 12:43
if (isset($_FILES['image'])) { this condition is getting false now you think i have to remove isset or any other issue – Mark Alan May 13 '16 at 12:48
but when i remove isset I got error Notice: Undefined index: image – Mark Alan May 13 '16 at 12:49
In which line you get this error, I've just test it and `isset($_FILE['image'])` return `true` – jcubic May 13 '16 at 13:02
its jumping down to else isset($_FILE['image']) is getting false let me update my code – Mark Alan May 13 '16 at 13:07
Try to add onsubmit="return false;" for the form, maybe you sending the form not calling ajax. – jcubic May 13 '16 at 13:11
like this right
– Mark Alan May 13 '16 at 13:13
is this okay var image = document.getElementById("uploadImage").value; – Mark Alan May 13 '16 at 13:16
You need to use `document.getElementById("uploadImage").files[0];` the same as before. – jcubic May 13 '16 at 13:29
still the same file not set – Mark Alan May 13 '16 at 13:37
if i change it to $_post then i face same i beleive there is javascript code error – Mark Alan May 13 '16 at 13:59
Are you sure you calling `document.getElementById("uploadImage").files[0];`? You didn't update your code. – jcubic May 13 '16 at 14:12
Are you sure you've selected the image by clicking on input? – jcubic May 13 '16 at 14:16
I've only tested `echo isset($_FILES['image']) ? 'true' : 'false';` – jcubic May 13 '16 at 14:26
false is the one i got by yours did you copy pasted along with my html – Mark Alan May 13 '16 at 14:28
Data is not sending via javascript – Mark Alan May 13 '16 at 14:31

Undefined offset PHP error using javascript ajax post method

1 Answers1