jQuery upload PDF with FormData?

Question

I am attempting to upload a file through jQuery to my remote server, but I can't seem to get it working.

The user needs to be able to upload a pdf file, which will then be processed by the server and saved to the root folder.

jQuery

$('form').submit(function (e) {
    var fd = new FormData();
    fd.append('file', $('#file')[0].files[0]);
    $.ajax({
        cache: false,
        beforeSend: function (xhr) {
            xhr.setRequestHeader("Cache-Control", "no-cache");
            xhr.setRequestHeader("pragma", "no-cache");
        },
        url: 'http://www.codekraken.com/testing/pointify/test.php?callback=?',
        data: fd,
        dataType: "json",
        processData: false,
        contentType: false,
        type: 'POST',
        success: function (data) {
            console.log(data);
        },
        error: function (data) {
            console.log(data);
        }
    });
    e.preventDefault();
});

PHP

<?php
header('content-type: application/json; charset=utf-8');

$name = $_FILES["fd"]["name"];
echo ($_GET['callback'] . '('.json_encode($name).')');
?>

HTML

<form>
    <input type="file" id="file" name="file">
    <input type="submit">
</form>

When I submit a file, such as input.pdf and then press submit, I get the response (null). I would expect to get the name of the file, input.pdf, which means I am missing a crucial step in this process.

Are you testing with a browser that supports that type of upload? (Anything but IE < 10) — user400654
– user400654, Commented Feb 7, 2013 at 23:00
The HTML is being run from localhost however, if that matters... — Charlie
– Charlie, Commented Feb 7, 2013 at 23:01
do you get null, or do you get an object that contains a responseText property that is null. If it's just null, that means you're getting to the success callback. At that point, i'd do more debugging on the php side. — user400654
– user400654, Commented Feb 7, 2013 at 23:01
I think having callback=? in the url makes a jsonp request. Which is a GET not a POST, you would want to make a POST when uploading files. — Musa
– Musa, Commented Feb 7, 2013 at 23:01

allenhwkim · Accepted Answer · 2013-02-07 23:19:49Z

2

I guess this

$name = $_FILES["fd"]["name"];

should be

$name = $_FILES["file"]["name"];

answered Feb 7, 2013 at 23:19

allenhwkim

27.8k18 gold badges93 silver badges128 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Charlie Over a year ago

This might be a problem, but it's not the problem. Apparently JSONP is only for getting, not posting

Charlie · Accepted Answer · 2013-02-07 23:53:45Z

I just want to make this visible, so I'm answering the major problem of the question.

JSONP is only for requests, so POST wouldn't work with it. Subsequently, you can use CORS to solve the problem.

I found a site that lists many types of servers that you can enable CORS on, which I would suggest looking into.

For my case, I used the following header in my PHP code:

header("Access-Control-Allow-Origin: *");

That opens up that page to all requests, but it still wasn't working with my jQuery AJAX code. To remedy this, I had to remove the part of my code that set headers, which apparently isn't allowed when making these requests. So, I deleted this part:

beforeSend: function (xhr) {
            xhr.setRequestHeader("Cache-Control", "no-cache");
            xhr.setRequestHeader("pragma", "no-cache");
        },

Collectives™ on Stack Overflow

jQuery upload PDF with FormData?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related