WordPress - Insert file into tinymce in the frontend via the REST API

app.js

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.')
        }
    }
});

form.php

<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>

function.php

<?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'
));

media.scss

.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;
}