I'm building a community site where users can post short blogs similar to Twitter.

I've created a widget that has the ability for the user to make a post, regardless of where they are on the site (So long as the Widget is used on that page).

In addition, I have a button that loads the media library for users to add images to their post.

It seemed to be working.. at least if I'm simply selecting an image from the library. However, if I'm trying to upload an image, regardless of user level, I'm getting an error, but no error code (Just says dismiss error). In addition, it also logs the user out.

Thinking it was because of user roles (Although for now I have everyone set to Author for debugging reasons anyway), I added this code...

    function allow_contributor_uploads() {
        $contributor = get_role('contributor');
        $contributor->add_cap('upload_files');
        }

    if ( current_user_can('contributor'))
        add_action('init', 'allow_contributor_uploads');

In addition, while trying to fix the error, someone suggested I include these files, which I added to my functions.php file

    require_once( ABSPATH.'/wp-admin/includes/image.php' );
    require_once( ABSPATH.'/wp-admin/includes/file.php' );
    require_once( ABSPATH.'/wp-admin/includes/media.php' );

I know my code for loading the library is working, as is getting the URL for the selected image... but just in case, I'm using this code to call wp.media()

( function( $) {
    $.wpMediaUploader = function( options ) {

        var settings = $.extend({

            target : '.al-uploader', // The class wrapping the textbox
            uploaderTitle : 'SELECT OR UPLOAD AN IMAGE', // The title of the media upload popup
            uploaderButton : 'SET IMAGE', // the text of the button in the media upload popup
            multiple : false, // Allow the user to select multiple images
            buttonText : '', // The text of the upload button
            buttonClass : '.al-upload', // the class of the upload button
            previewSize : '100px', // The preview image size
            modal : true, // is the upload button within a bootstrap modal ?
            buttonStyle : { // style the button
                border : 'none',
                background : 'none',                
                padding : '0',   
                float : 'right',
                display : 'block'  
            },

        }, options );


  //      $( settings.target ).append( '<a href="#" class="' + settings.buttonClass.replace('.','') + '">' + settings.buttonText + '</a>' );
       $( settings.target ).append('<div><br><img src="#" style="display: none; width: ' + settings.previewSize + '"/></div>')

        $( settings.buttonClass ).css( settings.buttonStyle );

        $('body').on('click', settings.buttonClass, function(e) {

            e.preventDefault();
            var selector = $(this).parent( settings.target );
            var al_media_uploader = wp.media({
                title: settings.uploaderTitle,
                button: {
                    text: settings.uploaderButton
                },
                multiple: settings.multiple
            })
            .on('select', function() {
                var attachment = al_media_uploader.state().get('selection').first().toJSON();
                $('.al-img-preview' ).attr('src', attachment.url);
                $('.al-img-input' ).attr('value', attachment.url);
                if( settings.modal ) {
                    $('.modal').css( 'overflowY', 'auto');
                }
            })
            .open();
        });


    }
})(jQuery);