0

I wrote a webshop where the admin can live edit (modify) the data of the shopitems without the use of a form (like price and description) with the "contenteditable=true" attribute. If the admin wants to upload more images to the shopitem, I needed to use an html form so I've used this html code for it:

<form action=?page=shop&mode=edit method="post" enctype="multipart/form-data">
<input type=file name=img[] accept=".jpg, .JPG, .jpeg, .JPEG, .png, .PNG" multiple=multiple>
</form>

Now I can extract all the html text data from html with jQuery and pass it as js vars to php using ajax, for that I use dataType: 'text'. But I have no idea how I can pass the array of uploaded images simultaneously, for that I need to use "formData" regarding to this post: Send array of files using AJAX

In that answer there are these two booleans set to false: contentType: false, processData: false with contradicts to the text data I'm also sending. Maybe that's why it is not working? Maybe because the "img" var is an array? I'm really lost here, anyone any idea?

This is my ajax code:

$.ajax({
    type: "POST",
    dataType: 'text',
    url: "?page=shop&mode=edit", 
    data: { uid:item, name:title, price:netto, desc:description, img:img },
    error: function(phpfeedback) { console.log('error: '+phpfeedback); },
    success: function(phpfeedback) { console.log('success: '+phpfeedback); location.reload();  }
});

Edit:

//make new formData object and automaticly include the uploaded images
var formData = new FormData($('form#modimgs')[0]);
//add the text vars to the formData object
formData.append({ uid:item, name:title, price:netto, desc:description });

//send with ajax
    $.ajax({
    type: "POST",
    dataType: 'json',
    url: "?page=shop&mode=edit", 
    data: formData,
    error: function(phpfeedback) { console.log('error: '+phpfeedback); },
    success: function(phpfeedback) { console.log('success: '+phpfeedback); location.reload();  }
});
Kleajmp
  • 167
  • 1
  • 9
  • just use new FormData($('#yourformid')[0]); and it will include other inputs. and if you want to send something out of the form, then you can also add your data to manually – Ahmed Sunny May 12 '20 at 00:37
  • @Ahmed so you mean make a new formData object var from the upload form and then manually add my text vars with formData.append to the formData var? I will do an edit in my existing code so you can see... – Kleajmp May 13 '20 at 16:43
  • The $.ajax() is returning: "error: [object Object]" is there a way to see the ajax error info? In the console there is no error. – Kleajmp May 13 '20 at 17:48
  • 1
    check in your serverside,PHP code, by var_dump $_FILES and $_POST. and you also need contentType: false, processData: false – Ahmed Sunny May 13 '20 at 20:20

0 Answers0