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?
