fix WordPress api failed upload test error

Question

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");

        },

Uploads usually _are_ on in the PHP configuration, otherwise f.e. in your WP media library, you would not be able to upload any images either. The problem likely rather lies in your AJAX upload part. — CBroe, Apr 21 '20 at 10:39
Thank you. Maybe it's in the form object part. I copied from a tutorial. Do you know how I can test to see where the error is? — , Apr 21 '20 at 10:43
It should basically work this way, see also https://stackoverflow.com/a/24939229/1427878 Specifying the Content-Type yourself might be dangerous here, because that also needs to contain the boundary value for the multipart data as part of the header value. I don’t find `enctype` documented anywhere, but try and remove it, I don’t know if that influences what that header gets set to. — CBroe, Apr 21 '20 at 10:59
Great that's working now for mp4. I commented out enc type ad content type and added xhr.setRequestHeader("content-Disposition", "attachment; filename=small.mp4"); }, — , Apr 21 '20 at 12:00
For jpg I tried both jpg and jpeg and get filetype note permitted for security reasons. I tried to put the token details in the beforesend xhr function but I am missing a bracket somewhere. — , Apr 21 '20 at 12:14
This should not need manually adding of any `Content-Disposition` or `Content-Type` headers, using `FormData` should take care of most of the necessary stuff internally already. And “filetype note permitted for security reasons” sounds rather like a server-side issue / setting on the receving end? — CBroe, Apr 21 '20 at 12:41
Thank you very much for your help. I removed the token details and followed this article to add define('ALLOW_UNFILTERED_UPLOADS', true); in the wp-config file https://kinsta.com/knowledgebase/sorry-this-file-type-is-not-permitted-for-security-reasons/. It now works (though that's strange that I had to do that as jpg is a permitted file type). — , Apr 21 '20 at 13:40

score 0 · Accepted Answer · answered Apr 23 '20 at 08:50

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");

        },

fix WordPress api failed upload test error

1 Answers1