You will have to create two different media modals that are fired depending on your click event. Here is some code from a recent project where I added these buttons to the tinyMCE visual editor:
jQuery(document).ready(function($){
$(document).on('click', '.mce-my_upload_button', upload_image_tinymce);
$(document).on('click', '.mce-my_upload_pdf_button', upload_pdf_tinymce);
function upload_image_tinymce(e) {
e.preventDefault();
var $input_field = $('.mce-my_input_image');
var custom_uploader = wp.media.frames.file_frame = wp.media({
title: 'Add Image',
button: {
text: 'Add Image'
},
library: {
type: 'image'
},
multiple: false
});
custom_uploader.on('select', function() {
var attachment = custom_uploader.state().get('selection').first().toJSON();
$input_field.val(attachment.sizes.medium.url);
});
custom_uploader.open();
}
function upload_pdf_tinymce(e) {
e.preventDefault();
var $input_field = $('.mce-my_input_pdf');
var custom_uploader = wp.media.frames.file_frame = wp.media({
title: 'Add PDF',
button: {
text: 'Add PDF'
},
library: {
type: 'application/pdf'
},
multiple: false
});
custom_uploader.on('select', function() {
var attachment = custom_uploader.state().get('selection').first().toJSON();
$input_field.val(attachment.url);
});
custom_uploader.open();
}});
Hope this helps!