Question

Before starting, note that I have to update a website that is not mine, so I can’t redo the whole logic. If I were to do this I would do it differently.

I have a cakephp application with a form with a lot of fields. In this form you can browse for a file and save it asynchronously. Here is how it’s done:

<input type="file" name="data[FileUpload][file]" id="myFileToUpload">
<a id="pickFile" href="#">Upload&nbsp;Now</a>

<script type="text/javascript">
    $('#pickFile').click(function (e) {
        e.preventDefault();
        $.post(
            "/admin/FileUploads/saveFromFlash/<?php e($session->id()) ?>", {
            data: $("#myFileToUpload").val()
        }, function (data) {
            $("#returnedContentFromAjax").html(JSON.stringify(data));
        },
            "json");
    });
</script>

The function called mainly does this:

$this->FileUpload->save($this->data)

but this always returns false and “No upload passed”. Here is the line creating the error message:

if (!isset($this->data['FileUpload']['file'])) {
        $this->setUploadError('No upload passed');
    return false;
}

I have no clue how to send this “$this->data[‘FileUpload’][‘file’]” via ajax… I guess this is the key problem since I don’t know what object to pass here:

{ data:$("#myFileToUpload").val() },

I’ve been on it all evening, any help would be greatly appreciated

Answer 1

In summary: javascript can’t access the contents of a file selected for upload.

This article deals with getting an “ajax effect” for your file uploads: Is it possible to use Ajax to do file upload?