Add inline uploader to plugin option page

by

I would like to implement an inline file uploader to my plugin’s option page as introduced in new media grid view of the WP media library:

enter image description here

I imagine having this drag & drop uploader in the page and getting an JSON object of either errors or attachment data back in JS when used.

As far as I know there is a wp.media.view.UploaderInline class present in
wp-includes/js/media-views.js but I have no idea of how to implement that in combination with the given markup.

The only resources I found are on how to use the media modal (introduced in v3.5) to upload and add files to a page. But having the uploader inline would be much better for my case since I don’t want the media library to show up in the process.

Has anyone experience implementing this to get me on track?

Thx

3 s
3

Okay, here is what I came up with: It’s all about using the plupload library that comes shipped with WP.

1. Add a <div> to your plugin’s option page that later becomes the drag’n’drop area

    <div class="your-plugin-uploader multiple">
        <input id="your-plugin-uploader-button" type="button" value="<?php esc_attr_e( 'Select Files' ); ?>" class="your-plugin-uploader-button button">
        <span class="ajaxnonce" id="<?php echo wp_create_nonce( __FILE__ ); ?>"></span>
    </div>

2. Register your plugin JS and make sure you define plupload-all as a dependency for your script

    function se179618_admin_js() {
        wp_register_script( 'your-plugin', WP_PLUGIN_URL . '/your-plugin/js/your-plugin.js', array( 'jquery', 'plupload-all' ) );
    }
    add_action( 'admin_enqueue_scripts', 'se179618_admin_js' );

3. Write some plupload settings to the page’s <head>

    function se179618_admin_head() {
        $uploader_options = array(
            'runtimes'          => 'html5,silverlight,flash,html4',
            'browse_button'     => 'my-plugin-uploader-button', 
            'container'         => 'my-plugin-uploader', 
            'drop_element'      => 'my-plugin-uploader', 
            'file_data_name'    => 'async-upload', 
            'multiple_queues'   => true,
            'max_file_size'     => wp_max_upload_size() . 'b',
            'url'               => admin_url( 'admin-ajax.php' ),
            'flash_swf_url'     => includes_url( 'js/plupload/plupload.flash.swf' ),
            'silverlight_xap_url' => includes_url( 'js/plupload/plupload.silverlight.xap' ),
            'filters'           => array( 
               array( 
                  'title' => __( 'Allowed Files' ), 
                  'extensions' => '*'
               ) 
            ),
            'multipart'         => true,
            'urlstream_upload'  => true,
            'multi_selection'   => true, 
            'multipart_params' => array(
                '_ajax_nonce' => '',            
                'action'      => 'my-plugin-upload-action'          
            )
        );
    ?>
    <script type="text/javascript">
        var global_uploader_options=<?php echo json_encode( $uploader_options ); ?>;
    </script>
    <?php
    }
    add_action( 'admin_head', 'se179618_admin_head' );

4. Add the action called by the AJAX uploader

    function se179618_ajax_action() {
        // check ajax nonce
        check_ajax_referer( __FILE__ );

        if( current_user_can( 'upload_files' ) ) {
            $response = array();

            // handle file upload
            $id = media_handle_upload( 
               'async-upload',
               0, 
               array( 
                  'test_form' => true, 
                  'action' => 'my-plugin-upload-action' 
               )
            );

            // send the file' url as response
            if( is_wp_error( $id ) ) {
                $response['status'] = 'error';
                $response['error'] = $id->get_error_messages();
            } else {
                $response['status'] = 'success';

                $src = wp_get_attachment_image_src( $id, 'thumbnail' );
                $response['attachment'] = array();
                $response['attachment']['id'] = $id;
                $response['attachment']['src'] = $src[0];
            }

        }

        echo json_encode( $response );
        exit;
    }

    add_action( 'wp_ajax_my-plugin-upload-action', 'se179618_ajax_action' );

5. Initiate the uploader in your plugin’s JS

    jQuery( document ).ready( function() {

        if( jQuery( '.your-plugin-uploader' ).length > 0 ) {
            var options = false;
            var container = jQuery( '.your-plugin-uploader' );
            options = JSON.parse( JSON.stringify( global_uploader_options ) );
            options['multipart_params']['_ajax_nonce'] = container.find( '.ajaxnonce' ).attr( 'id' );

            if( container.hasClass( 'multiple' ) ) {
                  options['multi_selection'] = true;
             }

            var uploader = new plupload.Uploader( options );
            uploader.init();

            // EVENTS
            // init
            uploader.bind( 'Init', function( up ) {
                console.log( 'Init', up );
            } );

            // file added
            uploader.bind( 'FilesAdded', function( up, files ) {
                jQuery.each( files, function( i, file ) {
                    console.log( 'File Added', i, file );
                } );

               up.refresh();
               up.start();
            } );

            // upload progress
            uploader.bind( 'UploadProgress', function( up, file ) {
                console.log( 'Progress', up, file )
            } );

            // file uploaded
            uploader.bind( 'FileUploaded', function( up, file, response ) {
                response = jQuery.parseJSON( response.response );

                if( response['status'] == 'success' ) {
                    console.log( 'Success', up, file, response );
                } else {
                    console.log( 'Error', up, file, response );
                }

            } );
        }

    } );

Leave a Comment