Issue uploading file via PHP and Jquery

Question

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?

Possible duplicate of [How can I upload files asynchronously?](http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously) — u_mulder, Dec 06 '15 at 18:09
Are you sure the browser you're using supports what you're trying to do? — , Dec 06 '15 at 18:22
@u_mulder. I did not see this question. I'll try the proposed solution to see if the problem is the same. — James, Dec 06 '15 at 18:41
@Terminus. I think so. I'm using Firefox 42, and I'm not seeing any uncommon resource. Do you see? — James, Dec 06 '15 at 18:46
Just noticed: if you're doing this `formToSubmit.find('input[type="file"]')[0];` you get back a regular dom element reference yet you do `fileInput.attr('files')[0];` on the next line. .attr is a jQuery function. Do `$(fileInput).attr('files')[0];` — , Dec 06 '15 at 18:52
The question sent by @u_mulder does not looks like the same problem, but help me to solve the problem. With `var dataToSend = new FormData(formToSubmit[0]);` all works fine. ` — James, Dec 06 '15 at 20:53

score 0 · Accepted Answer · edited May 23 '17 at 12:16

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);
            }

Issue uploading file via PHP and Jquery

1 Answers1