Append jquery object to formData()

Question

I'm currently developing a back office for some website, and I've come across some problems with file and information insert into databases. First I cannot upload a file and information in the same form without having to declare a variable for every other input, and second cannot append the declared object, like I always do, to the upload file form.

I've tried appending as and object but some of the inputs get undefined indexes.

This is the code i tried, to append an object to formData():

$(document).ready(function() {
 $('#addinfo-form').submit(function(e) {
  var info = {
   'name':$('#name').val(),
   'email':$('#email').val(),
   'country':$('#country :selected').val()
  }
  var file = $('#file').prop('files')[0];
  var new_info = new formData();
  new_info.append('info', info);
  new_info.append('file', file;
  $.ajax({
   type:'POST',
   url:'add-info.php',
   data:new_info,
   dataType:'json',
   processData:false,
   contentType:false,
   encode:true,
  }
  .done(function(data) {
  })
  .fail(function(data) {
  });
  e.preventDefault();
 });
});

Expected outcome should send info to php file via json to then be processed and inserted in the database.

to send file see https://stackoverflow.com/a/57660844/2776343 — Manzolo, Aug 27 '19 at 19:13
responseText: "
\nNotice: Undefined index: location in C:\\wamp64\\www\\dfrango\\administrator\\assets\\functions\\gallery\\add-gallery.php on line 10
\n{\"success\":false,\"errors\":{\"name\":\"Por favor preencha os campos obrigat\\u00f3rios.\"}}" — andrejmonteiro, Aug 27 '19 at 19:21
but i do, is the select element that is f*cking my code... is there other way to get the selected option? — andrejmonteiro, Aug 27 '19 at 19:28
$_POST['name'], $_POST['email'] and $_POST['country'], for now, while im trying to figure this out. — andrejmonteiro, Aug 27 '19 at 19:28

Manzolo · Accepted Answer · 2019-08-27T20:59:37.780

1

Try this:

var info = {
    'name': $('#name').val(),
    'email': $('#email').val(),
    'country': $('#country').val()
};

var file = $('#file').prop('files')[0];
var new_info = new FormData();
new_info.append("file", file, file.name);
new_info.append("info", JSON.stringify(info));

$.ajax({
type:'POST',
        url:'add-info.php',
        data:new_info,
        dataType:'json',
        processData:false,
        contentType:false,
        encode:true,
 /*....*/

in your add-info.php

if (isset($_POST['info'])) {
    $info = json_decode($_POST['info'], true);
    echo $info["name"];
    echo $info["email"];
    echo $info["country"];
}

edited Aug 27 '19 at 20:59

answered Aug 27 '19 at 19:38

Manzolo

1,909
12
13

that kinda defeats the purpose of the object, I know that if i define every variable like that it does work, that's why i'm trying with an object – andrejmonteiro Aug 27 '19 at 19:40
@andrejmonteiro1996 Is that what you wanted? – Manzolo Aug 27 '19 at 21:01
i guess so, it works, let me apply it to the rest of the code, thank you <3 – andrejmonteiro Aug 27 '19 at 22:44
You're welcome @andrejmonteiro1996! Are you talking about file upload? – Manzolo Aug 28 '19 at 06:34
works perfectly, i can now upload files with info, to add to the database – andrejmonteiro Aug 28 '19 at 15:51

score 0 · Answer 2 · answered Aug 21 '20 at 07:33

Alternatively, you could use Object.entries() such that your code now becomes...

$(document).ready(function() {
 $('#addinfo-form').submit(function(e) {
  var file = $('#file').prop('files')[0];
  var info = {
   'name':$('#name').val(),
   'email':$('#email').val(),
   'country':$('#country :selected').val(),
   'file': file
  }
  var new_info = new formData();
  Object.entries(info).forEach(([key, value]) => {
    new_info.append(key, value);
  });
  $.ajax({
   type:'POST',
   url:'add-info.php',
   data:new_info,
   dataType:'json',
   processData:false,
   contentType:false,
   encode:true,
  }
  .done(function(data) {
  })
  .fail(function(data) {
  });
  e.preventDefault();
 });
});

You first grab the file, add it as a property to your info object and parse it to formData.

I use the same method to insert big queries onto a database – andrejmonteiro Aug 22 '20 at 15:38 — andrejmonteiro, Aug 22 '20 at 15:38

Append jquery object to formData()

2 Answers2