file upload with formData returns undefined file array

Question

im getting undefined from print_r($_POST), it's posting on the same php page.

Array ( [file] => undefined )

Edited - added part where it calls the upload_banner function

HTML

<form enctype="multipart/form-data" id="banner_form" class="form-horizontal" role="form" action="">
  <input type="hidden" name="MAX_FILE_SIZE" value="2000000">
  <input id="file" name="file" type="file" class="filestyle" accept="image/jpeg,image/gif,image/png">
</form>

JS

$('#submit_btn').click(function(e){
    e.preventDefault();

    var date = document.getElementById('datepicker').value;
    var title = document.getElementById('title').value;
    var content = document.getElementsByClassName('note-editable')[0];

    if(date == "" || title == "") {
      alert("Please fill in the required fields");
      return false;
    }
    else {

        var cfm = confirm("Confirm Submit Changes?");
        if(cfm === true)
        {

          var editarea = content.innerHTML;

          $.post ("functions/add_upcoming.php",{date: date,title: title,sm_content: editarea},
            function(data) {
          });

          upload_banner();
        }
        else
        {
          return false;
        }
      }
  });




function upload_banner() {
    var form_data = new FormData($('#banner_form')[0]);
    form_data.append('file', $('input[type=file]')[0].files[0]);

      $.ajax({
        url: "upcomingevents.php?p=73",
        contentType: false,
        processData: false,
        dataType: 'json',
        data: form_data, 
        type: 'post',
        success: function(data) { },
        contentType: false,
        processData: false
    });
}

json as datatype cause im returning arrays from php side, did not post additional code cause im already getting issue at the file upload part

PHP

if(isset($_POST['file'])) {
  print_r($_POST);
  exit();
}

am i doing anything wrong here?

Where is upload_banner called? What is purpose of form_data.append('file', $('input[type=file]')[0].files[0]);? Why do you set dataType to "json"? — guest271314
– guest271314, Commented Dec 29, 2016 at 22:39
We need to see where this upload_banner function is being called. — James Nixon
– James Nixon, Commented Dec 29, 2016 at 22:40

Fevly Pallar · Accepted Answer · 2016-12-30 00:41:14Z

1

The FormData is set up incorrectly, should be :

var form_data = new FormData( );
form_data.append('file', $('input[type=file]')[0].files[0]);

Are you sure the url refered by the ajax is correct?

Why is there query param (?p=73) as you're doing post and not get.

Finaly, try to print the response through

success: function(data) { alert(JSON.stringify(data))},

edited Dec 30, 2016 at 0:41

answered Dec 30, 2016 at 0:23

Fevly Pallar

3,1092 gold badges17 silver badges20 bronze badges

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

4 Comments

user5184664 Over a year ago

im still getting undefined for file after changing the response to json

user5184664 Over a year ago

it responded with {"file":"undefined"}

user5184664 Over a year ago

i do have the type defined in the input tag if u look behind if it after its name

Fevly Pallar Over a year ago

How about try this var form_data = new FormData( ); then form_data.append('file', $('input[type=file]')[0].files[0]);

James Nixon · Accepted Answer · 2016-12-29 23:10:32Z

0

You're function isn't even being called considering you don't have the submit button for the handler to run. It should be like:

<form enctype="multipart/form-data" id="banner_form" class="form-horizontal" role="form" action="">
  <input type="hidden" name="MAX_FILE_SIZE" value="2000000">
  <input id="file" name="file" type="file" class="filestyle" accept="image/jpeg,image/gif,image/png">
  <input type="submit" id="submit_btn"/>
</form>

Also you have a syntax error in your JS, there is no need for the second set of }); to close the click handler.

JSFiddle: https://jsfiddle.net/sggf82am/2/

answered Dec 29, 2016 at 23:10

James Nixon

3271 gold badge4 silver badges14 bronze badges

2 Comments

user5184664 Over a year ago

sorry for the confusion, yes i did removed the extra closing of the handler. i have 2 forms are being submitted 1) first on click of submit_btn, it'll submit the first form 2) once first form are done it will call the second function upload_banner to submit the second form which is the image upload i have another file which has exactly the same code that was able to submit both without issues, the only difference is that the other page submits to other php file insteadof itself

user5184664 Over a year ago

not sure why but seems that it's not able to get the second form.. did changes to var form_data = new FormData($('#banner_form')); and that works

Collectives™ on Stack Overflow

file upload with formData returns undefined file array

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related