plugin development - Replace the WordPress Media Library Uploader

admin2025-06-03  3

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.

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1748934138a314947.html

最新回复(0)