I would like to replace the WordPress Media Library Uploader within the admin section to use Filepond.
Server Documentation is here
plugin.php
add_action( 'wp_enqueue_scripts', function() {
// Styles
wp_enqueue_style( 'filepond', '.css', array(), '0.0.1', false );
wp_enqueue_style( 'filepond-plugin-image-preview', '.css', array(), '0.0.1', false );
// Scripts
wp_enqueue_script('jquery', '.3.1/jquery.js', array(), '0.0.1', false);
wp_enqueue_script('filepond-plugin-image-preview', '.js', array(), '0.0.1', false);
wp_enqueue_script('filepond', '.js', array(), '0.0.1', false);
wp_register_script( 'rest-uploader', plugins_url( '/assets/js/script.js', __FILE__ ) );
$js_vars = [
'endpoint' => esc_url_raw( rest_url( '/wp/v2/media/' ) ),
'nonce' => wp_create_nonce( 'wp_rest' ),
];
wp_localize_script( 'rest-uploader', 'RestVars', $js_vars );
} );
add_shortcode( 'uploader', function() {
wp_enqueue_script( 'rest-uploader' );
ob_start();
?>
<input type="file">
<?php
$content = ob_get_contents();
ob_end_clean();
return $content;
} );
script.js
FilePond.registerPlugin(
FilePondPluginImagePreview
// FilePondPluginImageExifOrientation,
// FilePondPluginFileValidateSize
);
FilePond.create(
document.querySelector('input[type="file"]'),
{
labelIdle: `Drag & Drop your picture or <span class="filepond--label-action">Browse</span>`,
imagePreviewHeight: 500,
}
);
FilePond.create(
document.querySelector('input')
);
FilePond.setOptions({
server: {
process:(fieldName, file, metadata, load, error, progress, abort) => {
// fieldName is the name of the input field
// file is the actual file object to send
const formData = new FormData();
formData.append(fieldName, file, file.name);
const request = new XMLHttpRequest();
request.open('POST', RestVars.endpoint);
// Should call the progress method to update the progress to 100% before calling load
// Setting computable to false switches the loading indicator to infinite mode
request.upload.onprogress = (e) => {
progress(e.lengthComputable, e.loaded, e.total);
};
jQuery.ajax( {
processData: false,
contentType: false,
data: formData
});
request.ondata = function ( xhr ) {
xhr.setRequestHeader( 'X-WP-Nonce', RestVars.nonce );
}
// Should call the load method when done and pass the returned server file id
// this server file id is then used later on when reverting or restoring a file
// so your server knows which file to return without exposing that info to the client
request.onload = function() {
if (request.status >= 200 && request.status < 300) {
// the load method accepts either a string (id) or an object
load(request.responseText);
}
else {
// Can call the error method if something is wrong, should exit after
error('oh no');
}
};
request.send(formData);
// Should expose an abort method so the request can be cancelled
return {
abort: () => {
// This function is entered if the user has tapped the cancel button
request.abort();
// Let FilePond know the request has been cancelled
abort();
}
};
}
}
});
This is what I currently have.
I currently get a 401 Unauthorised error uploading a media file.
/wp-json/wp/v2/media/:1 Failed to load resource: the server responded with a status of 401 (Unauthorized)
I'm looking to bring it into the admin area to replace the media uploader, as it currenlty is a shortcode.
Any help would be much appreciated.
Jake.