Uncaught TypeError: Cannot read property '0' of undefined

Question

I've been getting this weird error and I just can't figure it out

Here is my current code:

function addBackground() {
   var penguin_id = getPenguinID();
   var file = $('#image_form')[0].files[0];
   console.log('Image Getting Uploaded');
   var formData = new FormData();
   formData.append('file', file);
    $.ajax({
        url: "custBG.php",
        type: "POST",
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
        mimeType: 'multipart/form-data'
    }).done(function(data) {
        if (data.status == 0) {
                console.log('Image Has Been Uploaded');
                addBGItem(70000 + penguin_id);
        } else {
            console.log(data.message);
        }
    });
}

Here is the form

<form id="image_form">
<div class="left">
<img id="img-uploaded" src="http://dummyimage.com/210x210/dbdbdb/7e7f80.png" alt="your image" />
</div>
<div class="right">
<input type="file" name="imageToUpload" accept=".png,.jpeg,.jpg,.gif" onchange="validate_image()">
<span class="btn btn-large btn-alpha" onclick="addBackground()">Upload Image</span>
</span>
</div>
</form>

I'm not sure what's up but can anyone help me out with the problem.

It does: line 2 (inline-fe9e22321d.js: 2), which I assume is var file = $('#image_form')[0].files[0]; due to the nature of the error. Mind posting what's in #image_form in your DOM? — Carlos Vergara
– Carlos Vergara, Commented Jun 18, 2016 at 1:31

saimOneFcs · Accepted Answer · 2017-10-25 08:31:29Z

6

Instead of $('#image_form')[0].files[0]; try with $('#image_form').prop('files')[0]; It worked for me.

answered Oct 25, 2017 at 8:31

saimOneFcs

3082 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Carlos Vergara · Accepted Answer · 2016-06-18 01:58:47Z

1

~~In jQuery, using an id selector (such as $('#image_form')) will only yield the first result, so the [0] next to it is unneeded.~~ (Forget that, an id selector will always yield a collection no matter how many items there are - Thanks Leo for bringing it up.) Moreover, it has no property files, which will yield yet another error.

What do you want to achieve here?

edited Jun 18, 2016 at 1:58

answered Jun 18, 2016 at 1:43

Carlos Vergara

3,6325 gold badges35 silver badges56 bronze badges

9 Comments

Zesty Over a year ago

I want it to retrieve the encoded json errors from custBG.php

Carlos Vergara Over a year ago

I mean, in the line that says var file = $('#image_form')[0].files[0];

nnnnnn Over a year ago

The <input type="files"> element should have a files property, but the <form> doesn't. So $("#image_form input[type='file']")[0].files[0] should "work" in the sense of fixing that particular line of code.

Zesty Over a year ago

Oh it should get the file which has been uploaded

Abhishek Over a year ago

Perhaps this SO post will help you understand how to query for files.

|

kirinthos · Accepted Answer · 2016-06-18 01:47:51Z

0

your problem lies in the files[0] I believe. perhaps you are trying to get the value in the input field? you're acquiring a jquery set of the firm, on which the files property is undefined. $("#image_form").find("input").val() should give you the input box value, though there may be a more appropriate way when dealing with forms

answered Jun 18, 2016 at 1:47

kirinthos

4522 silver badges9 bronze badges

2 Comments

Zesty Over a year ago

which is this line console.log(data.message);

Zesty Over a year ago

Never-mind I fixed it; the problem was that it didn't have the dataType which is Json

Collectives™ on Stack Overflow

Uncaught TypeError: Cannot read property '0' of undefined

3 Answers 3

Comments

9 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

9 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related