James James - 7 months ago 15
Javascript Question

Issue uploading file via PHP and Jquery

I'm trying to follow this answer to upload a file via Ajax and PHP using Jquery, but it isn't working.

This is (part of) my HTML form (I'm using bootstrap):

<form role="form" enctype="multipart/form-data" id="edit-company" method="POST">
<div class="form-group">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-12 form-group">
<label for="field-name-company">Name:</label> <input id="field-name-company" name="nameCompany" class="form-control" type="text"/>
</div>
</div>
<div class="row">
<div class="col-md-12 form-group">
<label for="field-street-social-emp">Street</label> <input id="field-street-social-emp" name="streetCompany" class="form-control" type="text"/>
</div>
</div>
<div class="col-md-12 form-group">
<div class="row">
<label for="foto-empresa">Foto/Logo:</label>
<div class="form-group">
<input type="file" name="fotoEmpresa"/>
</div>
<button class="btn btn-success pull-right" type="submit" value="Confirm" id="submit-edit-company"><span class="glyphicon glyphicon-ok"></span> Update</button>
</div>
</div>
</div>
</div>
</div>
</form>


This is my jquery snippet:

$('#submit-edit-company').click(function(e) {
e.preventDefault();

var formToSubmit = $(this).parents('form#edit-company');
var dataToSend = formToSubmit.serialize();
var fileInput = formToSubmit.find('input[type="file"]')[0];
var fileData = fileInput.attr('files')[0];
console.log(fileData);

$.ajax({
url: 'app/editCompanyService',
data: dataToSend,
type: 'POST',
dataType: 'JSON',
contentType: false,
cache: false,
processData:false,
beforeSend: function () {},
success: function (return) {},
error: function(jqXHR, textStatus, errorThrown) {
console.log("Error... " + textStatus + " " + errorThrown);
}


When I'm debugging the javascript and monitoring
fileInput
, I can see the file like
Files: FilesList[1] 0: File...
, but the script just stops and don't show anything in the console, even errors.

The
$_FILES
var in PHP is just empty. (All configurations pointed in this post already checked).

Also tried
fileInput.prop('files')[0];
and
new FormData(formToSubmit)
, but I'm having the same problem.

What I'm doing wrong?

Answer

Although is not the same problem, the answer for this SO POST (linked in the question comments by @u_mulder) solves my problem.

Here is the functional code:

$('#submit-edit-company').click(function(e) {
        e.preventDefault();

        var formToSubmit = $(this).parents('form#edit-company');
        var dataToSend = new FormData(formToSubmit[0]);
        var fileInput = formToSubmit.find('input[type="file"]')[0];
        var fileData = fileInput.attr('files')[0];
        console.log(fileData);

        $.ajax({
            url: 'app/editCompanyService',
            data: dataToSend,
            type: 'POST',
            dataType: 'JSON',
            contentType: false,
            cache: false,
            processData:false,
            beforeSend: function () {},
            success: function (return) {},
            error: function(jqXHR, textStatus, errorThrown) {
                console.log("Error... " + textStatus + "        " + errorThrown);
            }