WordPress.org

Forums

[resolved] Help Implementing new Media Uploader (3 posts)

  1. dicegame
    Member
    Posted 2 years ago #

    Hi Guys,

    I currently am using the only Media Uploader with functions such as tb_show & window.send_to_editor = function(html) { } to obtain the html of the selected attachment so i can perform tasks with it. One of these tasks was to obtain the title of the attachment from the returned html. This however does not work in the 3.5 Beta 3.

    I am interested in getting the new media uploader to work on a custom meta box image uploader. Could someone point me in the correct direction? I have tried copying the featured image JS for the uploader however it is failing to work.

    Do you guys have any idea on how I could get it to work or possible refer me to some documentation for the new system?

    I am also looking to support both versions. So e.g. if WP version < 3.5 run the old media uploader else run new media uploader.

    Thanks in advance

  2. wWave
    Member
    Posted 2 years ago #

    Hi dicegame,

    I've been trying to do the same, I've been trying to do the same and managed to do it on custom meta boxes as long as the already is a wp_editor in place.

    The HTML
    <input type="text" id="my_key" name="my_key" value=""><input id="file_button" data-update="Select File" data-choose="Choose a File" type="button" value="Select" class="button">

    I'm calling the new Media Uploader using javascript:

    jQuery(document).ready(function(){
    			var targetfield="my_key";
    			jQuery("#file_button").click( function( event ) {
    			var jQueryel = jQuery(this);
    			event.preventDefault();
    
    			// If the media frame already exists, reopen it.
    			if ( typeof(custom_file_frame)!=="undefined" ) {
    				custom_file_frame.open();
    				return;
    			}
    
    			// Create the media frame.
    			custom_file_frame = wp.media.frames.customHeader = wp.media({
    				// Set the title of the modal.
    				title: jQueryel.data("choose"),
    
    				// Tell the modal to show only images. Ignore if want ALL
    				library: {
    					type: 'image'
    				},
    				// Customize the submit button.
    				button: {
    					// Set the text of the button.
    					text: jQueryel.data("update")
    				}
    			});
    
    			custom_file_frame.on( "select", function() {
    			// Grab the selected attachment.
    			var attachment = custom_file_frame.state().get("selection").first();
    
    			// Update value of the targetfield input with the attachment url.
    			jQuery("#"+targetfield).val(attachment.attributes.url);
    		});
    
    		custom_file_frame.open();
    	});
    });

    Hope this helps, I'm still trying to make it work when there is not a wp_editor in the page, but I'm getting errors of undefined elements.

    Any help to improve it will be hugely appreciated!!

  3. Igor Sazonov
    Member
    Posted 2 years ago #

    Hi, the problem is that
    custom_file_frame.on( "select", function()...
    dont creates dynamic HTML like live() or jQuery(document).on('on', '.selector', function() {});
    I've tried jQuery(document).on('on', custom_file_frame, function() {}); but dont works...
    any ideas?

Topic Closed

This topic has been closed to new replies.

About this Topic