Posting Null File Input in Dataform Via Ajax

    This was actually quite annoying and was needed since the api I was given by another developer won't change it so had to go around him to achieve this. To be clear I was posting a form and inside it was a file input with some other input text values. The file input needed to always be included even if it was null...Don't ask me why.

Common Errors 
These errors can be corrected from my notes.
  1. Unexpected end of input response from wp_handle_upload
  2. Unexpected end of input


  • Create File Object
  • var f = new File([""], "filename.txt", {type: "text/plain", lastModified: date})
  • Append file to form object
    form.append("blob",blob, filename);
  • aFormData = new FormData($("form").get(0));
  • Just check the length of files property, which is a FileList
    if( document.getElementById("uploadFile").files.length == 0 ){
        console.log("no files selected");
var form = $('#data');
var formData = new FormData(form);
formData.append('image', $('#frontImg')[0].files[0]);
formData.append("example", $('#amount').val());
    type: 'POST',    
    url: '/api/Image',
    data: formData,
    contentType: false,
    processData: false,    
    complete: function(response) {
    error: function() {
  • All listed under Mozilla Docs
    • Web/API/FormData/append
    • Web/API/FormData/Using_FormData_Objects

Popular posts from this blog

UI-Bootstrap Collapsible Sticky Footer

Editing Blogger Post on Github, Rough Draft

HTML5 Audio doesn't Autoplay for Chrome on Android