0

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', 'https://unpkg.com/filepond/dist/filepond.css', array(), '0.0.1', false );

    wp_enqueue_style( 'filepond-plugin-image-preview', 'https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css', array(), '0.0.1', false );

    // Scripts

    wp_enqueue_script('jquery', 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js', array(), '0.0.1', false);

    wp_enqueue_script('filepond-plugin-image-preview', 'https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js', array(), '0.0.1', false);

    wp_enqueue_script('filepond', 'https://unpkg.com/filepond/dist/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.

WP Media Upload

Any help would be much appreciated.

Jake.

3
  • This is kind of broad, stick to 1 question per question and ask about sub-problems. Right now to answer this someone has to figure out the entire project, and they won't post anything if they only know part of the answer. Additionally, any answerer would need to have expert level knowledge of filepond, a library I've never heard of. So break it apart and ask multiple questions rather than bundling it all into the 1. e.g. you already have 2 questions bullet pointed and numbered, and the second one can be broken up even further
    – Tom J Nowell
    Feb 7, 2019 at 16:24
  • 1
    @TomJNowell Appreciate it, I've updated my question please, let me know if that is ok?
    – Henshall
    Feb 7, 2019 at 19:19
  • You have an XHTTPRequest with a jQuery request in the middle, which is weird. It sounds like you've figured out the filepond side of things, and the real problem you face is how to upload an image and create an attachment via the REST API. You can and should jettison all the filepond stuff in your question as it's a distraction and gets in the way, and focus on the actual problem ( which has nothing to do with filepond )
    – Tom J Nowell
    Feb 7, 2019 at 21:19

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.