Ajax File Upload upload.php not Getting Called

Question

I'm new to jQuery/Ajax and I am trying to upload a file like so:

var fd = new FormData();
fd.append('file', file);

$.ajax({
  xhr: function() {
    var xhrobj = $.ajaxSettings.xhr();
    if (xhrobj.upload) {
      xhrobj.upload.addEventListener('progress', function(e) {
        var percent = 0;

        if (e.lengthComputable) {
          percent = Math.floor(e.loaded / e.total * 100);
        }

        progressDiv.find('progress').val(percent);
        progressDiv.find('b').html(percent + '%');
      });
    }
  },
  type: 'POST',
  url: 'upload.php',
  data: fd,
  success: function(data) {
    progressDiv.find('progress').val(100);
    progressDiv.find('b').html('100%');

    alert(data);
  },
  error: function() {
    alert('Error uploading!');
  }
});

My upload.php file looks like this:

<?php
file_put_contents('log.txt', "LOG\n");
file_put_contents('log.txt', implode(', ', $_FILES) . "\n", FILE_APPEND);
$target = 'upload/' . basename($_FILES['file']['name']);
if (move_uploaded_file($_FILES['file']['tmp_name'], $target)) {
  file_put_contents('log.txt', "SUCCESS\n", FILE_APPEND);
} else {
  file_put_contents('log.txt', "FAILURE\n", FILE_APPEND);
}
?>

The problem is that the progress bars are remaining at 0 and the no alert ever appears. Also nothing is being written to the log file, meaning that upload.php is not even being called.

What am I doing wrong?

EDIT:

After searching for a while I stumbled across this nifty little question: Submitting a file with jQuery.ajax gives TypeError

So adding contentType: false and processData: false seems to have done something. Now I get the alert "Error uploading", but I still don't think upload.php is being called as nothing is being written to log. Commenting out the xhr stuff after making those changes allows the upload to complete. Now the question becomes what is wrong with the xhr stuff?

Log is a file stored locally at the same path as `upload.php`. If I access the `upload.php` directly by typing in the URL it writes normally. — carloabelli, Aug 31 '14 at 19:47

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

0

What is 'log'?

file_put_contents('log', "LOG\n");

I bet if you looked at your webserver error log the PHP script would be found to be choking on trying to write to 'log'.

EDIT

Here's an existing question that appears to show correctly how to do what you're trying to do. If you're still not getting the result you expect, I would still suspect there's something wrong with your file paths. Full error reporting should clarify the issue

update progress bar using ajax request seconds

edited May 23 '17 at 12:27

Community

1
1

answered Aug 31 '14 at 19:47

Fo.

3,752
7
28
44

Log is a file stored locally at the same path as `upload.php`. If I access the `upload.php` directly by typing in the URL it writes normally so I do not think that this is the case. – carloabelli Aug 31 '14 at 19:47
What's your Apache error log saying? Also your console isn't showing any JS errors I assume? – Fo. Aug 31 '14 at 19:51
Console is only showing the warning: `Use of getUserData() or setUserData() is deprecated. Use WeakMap or element.dataset instead.` which I don't think is related. Apache error log the last line is the only thing which looks remotely related: `'/Users/carloabelli/Sites/booth/upload.php' not found or unable to stat, referer: http://localhost/~carloabelli/booth/`, but might be from before when I didn't yet have `upload.php` and was just testing the progress bar creation. – carloabelli Aug 31 '14 at 19:55
Are you able to post to the script without the xhr progress bar stuff? – Fo. Aug 31 '14 at 20:24

Ajax File Upload upload.php not Getting Called

1 Answers1