fix WordPress api failed upload test error

I have created a form which uses ajax to post data to WordPress media using WordPress API. I am receiving the error specified file failed upload test. I’m using the JWT auth plugin for authentication.

ADD A MEDIA FORM


    <form name="addmediaform" id="addmediaform" style="display: none" method="POST" enctype="multipart/form-data">
    <div class="main-column">
    <div class="media-quick-add">
     <h3>Add media</h3>

      <input type="text" id="title" name="title" placeholder="Title">
       <input type="file" name="files" value=”” aria-required=”true” required multiple=”false” />

         <button  id="quick-add-button" class="success button">Create Post</button>

CREATE MEDIA FUNCTION

    var title = document.querySelector('#title').value;

     $("#quick-add-button").click(function (event) {

            //stop submit the form, we will post it manually.
            event.preventDefault();

            // Get form
            var form = $('#addmediaform')[0];

            // Create an FormData object 
            var data = new FormData(form);


            // disabled the submit button
            $("#quick-add-button").prop("disabled", true);

          $.ajax({
            url: 'http://example.com/wordpress/wp-json/wp/v2/media',
    method: 'POST',
     enctype: 'multipart/form-data',
             headers: { "Authorization": 'Bearer ' + sessionStorage.getItem('newToken') }, 
    data: data,
         processData: false,
                contentType: false,
                cache: false,
                timeout: 600000,
           success: function(data) {
      $("#result").text(data);
                    console.log("SUCCESS : ", data);
                    $("#quick-add-button").prop("disabled", false);        
          $LOGIN.fadeToggle();
            $LOGOUT.toggle();
             $POST.fadeToggle()     
        },
         error: function (e) {

                    $("#result").text(e.responseJSON.message);
                    console.log("ERROR : ", e);
                    $("#quick-add-button").prop("disabled", false);
    }
    });
     });

I could not find a php.ini file on the hosted directory so created a blank file and set file_uploads = on but that didn’t work. I looked in the file wp-admin/includes/file.php but don’t know if anything needs changing. I have checked and there is no other file with the same name in the WordPress media.

UPDATED

Following the user’s advice I commented out enc type and content type and added the last line of the xhr for mp4 and this worked. I amended it with the last two entries for jpg and got a security error. I am trying to add the token details to xhr is this correct and how should it be formatted as I think I have a bracket missing somewhere

method: 'POST',
// enctype: 'multipart/form-data',
        headers: { "Authorization": 'Bearer ' + sessionStorage.getItem('newToken') }, 
data: data,
dataType: 'json',
     processData: false,
          //  contentType: false,
          beforeSend: function (xhr) {
             xhr.setRequestHeader("Authorization": 'Bearer ' + sessionStorage.getItem('newToken'));
              xhr.setRequestHeader('Content-Type', 'image/jpeg');
              xhr.setRequestHeader("content-Disposition", "attachment; filename=small.jpeg");

        },

Answer

in WordPress add define(‘ALLOW_UNFILTERED_UPLOADS’, true); in the wp-config file. Then change ajax to include xhr function:

method: 'POST',
        headers: { "Authorization": 'Bearer ' + sessionStorage.getItem('newToken') }, 
data: data,
dataType: 'json',
     processData: false,
                   beforeSend: function (xhr) {
                           xhr.setRequestHeader('Content-Type', 'image/jpg');
              xhr.setRequestHeader("content-Disposition", "attachment; filename=small.jpg");

        },

Advertisement

Answer