Skip to content

Instantly share code, notes, and snippets.

@itzikbenh
Created Aug 1, 2017
Embed
What would you like to do?
WordPress - Insert file into tinymce in the frontend via the REST API
let $body = $('body');
let $error_field = $('.file-error');
function hasExtension(file_name, exts) {
return (new RegExp('(' + exts.join('|').replace(/\./g, '\\.') + ')$', "i")).test(file_name);
}
function fileSizeInMB(file_size) {
return (file_size / (1024*1024)).toFixed(2);
}
function uploadFile(file) {
let form = new FormData();
form.append('image', file);
$.ajax({
url: theme_data.site_url + 'wp-json/add-image/v1/images',
method: 'POST',
beforeSend: function(xhr) {
xhr.setRequestHeader( 'X-WP-Nonce', theme_data.nonce );
},
data: form,
processData: false,
contentType:false
}).done(function(data){
console.log("data is: ", data);
tinymce.get('pr_description').insertContent('<img src="'+data+'"/>');
}).fail(function(data){
let error = JSON.parse(data.responseText);
$error_field.text(error.message)
});
}
$body.on('change', '.file-input', function(e){
e.preventDefault();
$error_field.text('');
if(e.type === 'change') {
let file = this.files[0];
if (hasExtension(file.name, ['png', 'jpg', 'jpeg', 'gif'])) {
if (fileSizeInMB(file.size) > 5) {
$error_field.text('File size is too big. it must 5MB or less.')
} else {
uploadFile(file);
}
} else {
$error_field.text('Unallowed extension. Only png/jpeg/jpg/gif are allowed.')
}
}
});
<div class="form-group">
<label>Content*</label> <br>
<button type="button" class="button insert-media-button">
<span class="wp-media-buttons-icon"></span>
Add Media
<input type="file" class="file-input" name="attachment">
</button>
<span class="file-error"></span>
<?php
$settings = [
'quicktags' => false,
'media_buttons' => false,
'editor_height' => 220
];
$pr_description = old( 'pr_description' );
wp_editor( $pr_description, "pr_description", $settings );
?>
</div>
<?php
function theme_js() {
wp_localize_script(
'theme_js',
'theme_data',
[
'nonce' => wp_create_nonce( 'wp_rest' ),
'site_url' => network_site_url( '/' ),
]
);
}
add_action( 'wp_enqueue_scripts', 'theme_js' );
function ath_upload_file( WP_REST_Request $request ) {
if ( ! is_user_logged_in() ) {
return new WP_Error( 'nonce_error', 'Sorry, members only.', [ 'status' => 422 ] );
}
//Validate nonce
if( ! wp_verify_nonce( $_SERVER['HTTP_X_WP_NONCE'], 'wp_rest' ) ) {
$errors['nonce'] = 'Something went wrong.';
return new WP_Error( 'nonce_error', $errors, ['status' => 422] );
}
//At this point you might want to do some validation.
//You must also protect your uploads folder from PHP injection.
//Read about using .htaccess to protect uploads folder.
require_once( ABSPATH . 'wp-admin/includes/image.php' );
require_once( ABSPATH . 'wp-admin/includes/file.php' );
require_once( ABSPATH . 'wp-admin/includes/media.php' );
$attachment_id = media_handle_upload('image', 0);
return wp_get_attachment_url( $attachment_id );
}
register_rest_route('add-image/v1', '/images/', array(
'methods' => 'POST',
'callback' => 'ath_upload_file'
));
.insert-media-button {
position: relative;
[type="file"] {
cursor: pointer !important;
position: absolute;
opacity: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%;
margin: 0;
padding: 0;
filter: alpha(opacity=1);
font-size: 100px;
}
}
.file-error {
color: #FF3860;
margin-left: 10px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment