issue including wp_enqueue_media - WordPress - php

Question

I am building a custom interface that is utilizing WordPress functions and a specific area I am trying to utilize is the media section of WordPress. I am first including the core files of WordPress:
$location = $_SERVER['DOCUMENT_ROOT'] . "/wordpress";
include($location.'/wp-config.php');
include($location.'/wp-load.php');
include($location.'/wp-includes/pluggable.php');
global $wpdb;
if( !isset($wpdb) )
{
include($location.'/wp-config.php');
include($location.'/wp-includes/wp-db.php');
}
Than within my media file I am using: wp_enqueue_media() to allow me to access the media viewer for when a user is uploading media from their account.
My JS script I am using to run the media request is as follows:
$('.add-media').on('click', function( event ){
var file_frame;
var wp_media_post_id = wp.media.model.settings.post.id; // Store the old id
event.preventDefault();
// If the media frame already exists, reopen it.
if ( file_frame ) {
file_frame.open();
return;
}
// Create the media frame.
file_frame = wp.media.frames.file_frame = wp.media({
title: jQuery( this ).data( 'uploader_title' ),
button: {
text: jQuery( this ).data( 'uploader_button_text' ),
},
multiple: true // Set to true to allow multiple files to be selected
});
// When an image is selected, run a callback.
file_frame.on( 'select', function() {
var selection = file_frame.state().get('selection');
selection.map( function( attachment ) {
attachment = attachment.toJSON();
// Do something with attachment.id and/or attachment.url here
$(".load-attachments").append('<div class="singleImg"><img src="'+attachment.url+'" width="100px" height="100px"/><input type="hidden" class="fileURL load-single-attachment" value="'+attachment.id+'"/><span class="removeImg remove"> X </span></div>');
$(".removeImg").bind('click', function(){
$(this).parent().remove();
});
});
});
// Finally, open the modal
file_frame.open();
});
The issue here is, when running the add-media event, wp is undefined. Now I am not sure as to why this is. Any thoughts or suggestions?

Answer 1

After looking through documentation, I couldn't really figure out why this was happening. But I found the solution. Some final files are called when using wp_footer(). And without this, none of your JavaScript files will run.
So In the future if your developing an application and want to use WordPress core functionalities, make sure to include wp_footer() at the end of your application to make sure you won't run into wp not being defined in js.