Upload image to server ( JQuery library + FormData)

Question

I have read all the solutions already in here, but I'm not spotting the issue in my code.

HTML:

<div id='image-uploader-view'>
    <input type='text' id='rename' name='rename'/>
    <input id='fileupload' type='file' name='file'/>
    <a class='btn btn-primary''>UPLOAD FILE</>
</div>

JS:

    $('#image-uploader-view').on('click','a.btn',function(){
        var fileDOM = $(this).closest('#image-uploader-view').find('#fileupload'),
            renameDom = $(this).closest('#image-uploader-view').find('input#rename');

        if(fileDOM){
            var fileObject = $(fileDOM).get(0).files[0];

            var formData = new FormData();
                formData.append('file', fileObject, renameDom.val());

            $.ajax({
                url: '/php/uploads/index.php',
                type: 'POST',
                dataType: 'json',
                data: formData,
                cache: false,
                contentType: false,
                processData: false, 
                success: function(data, textStatus, jqXHR){
                    console.log(data);
                },
                error:function(jqXHR, textStatus, errorThrown){
                    console.log('ERRORS: ' + textStatus);
                }
            })
        }

After clicking input button to upload file, I chose an image and it shows the name on the screen. Then, I try to submit the File image.

From the console, checking the request I'm doing I'm getting:

Request Payload
------WebKitFormBoundarynLOjMcIkFf7jCcRs
Content-Disposition: form-data; name="file"; filename=""
Content-Type: image/png


------WebKitFormBoundarynLOjMcIkFf7jCcRs--

There is no filename... Why? I get back as a response the following object from the success callback:

{
   file: Object
   error: 4
   name: ""
   size: 0
   tmp_name: ""
   type: ""
   __proto__: Object
   __proto__: Object
}

What am I doing wrong?

Answer 1

I found the issue... It was related with what I'm doing in the formData.append.

The FormData accepts the following parameters:

void append(DOMString name, File value, optional DOMString filename);
void append(DOMString name, Blob value, optional DOMString filename);
void append(DOMString name, DOMString value);

I was testing the code without any filename, or better said, with a filename equal to the empty string "". Nothing was uploaded in this case. As soon as I realized about that(removing the third parameter) I was sending data to the server.