Question

So I have a file object created from a drag and drop into an area from desktop. Now things all dandy, until I have to upload it via Ajax to a Django backend. I would like to utilize the nice Django utils such as request.FILES, etc.

Right now, I’m messing with some existing code here:

xhr.open("post", s.post, true);

            // Set appropriate headers
            xhr.setRequestHeader("content-type", "multipart/form-data");
            xhr.setRequestHeader("x-file-name", file.fileName);
            xhr.setRequestHeader("x-file-size", file.fileSize);
            xhr.setRequestHeader("x-file-type", file.
            xhr.send(file);

Try as I might, it doesn’t seem to be emulate a form with a file input submission. Is there something that I am missing?

Thanks!

Answer 1

You need to create a “FormData” object and then append the file to that as a parameter.

    var fd = new FormData();
    fd.append("theFile", yourFileObject);
    //
    // ... set up the xhr ...
    //
    xhr.send(fd);

Obviously this only works in HTML5 environments, but if you’re messing with the File stuff that’s probably something you’re dealing with.