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");
},
Advertisement
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");
},