2

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.

Zesty
  • 273
  • 2
  • 6
  • 19

3 Answers3

6

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

saimOneFcs
  • 198
  • 1
  • 11
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?

Carlos Vergara
  • 3,592
  • 4
  • 31
  • 56
  • I want it to retrieve the encoded json errors from custBG.php – Zesty Jun 18 '16 at 01:45
  • I mean, in the line that says `var file = $('#image_form')[0].files[0];` – Carlos Vergara Jun 18 '16 at 01:46
  • 3
    The `` element should have a `files` property, but the `
    ` doesn't. So `$("#image_form input[type='file']")[0].files[0]` should "work" in the sense of fixing that particular line of code.
     – nnnnnn Jun 18 '16 at 01:48
  • Oh it should get the file which has been uploaded – Zesty Jun 18 '16 at 01:48
  • Perhaps [this SO post](http://stackoverflow.com/questions/12281775/get-data-from-file-input-in-jquery) will help you understand how to query for files. – Abhishek Jun 18 '16 at 01:50
  • @nnnnnn are you sure it works like that, out of the box? I've been reading it's not as simple. – Carlos Vergara Jun 18 '16 at 01:51
  • @Abhishek may have it right with that post. Shall we mark this as duplicate? – Carlos Vergara Jun 18 '16 at 01:52
  • Wrong. `$(selector)` will always return an array-like **jQuery wrapped collection**, no matter how many matched elements, or what type the selector is. For example `$('#app')` will return something like `[div#app, context: document, selector: "#app"]`. – Leo Jun 18 '16 at 01:53
  • My bad, I overread the docs do say $() with an id selector returns a **collection** of zero or one elements. Will edit my answer properly. – Carlos Vergara Jun 18 '16 at 01:56
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

kirinthos
  • 452
  • 2
  • 9