Question

I have an HTML form field that is going to take the url for an image of mine. I have (in a different section of my site) a media library where users can opload and organize their images.
Now I want to be able to open this media library either in a new window (easier for me, but don’t know how I would then populate the form field in the mother window with a script from a new window, method not allowed?) or by reading the media library into a div (more troublesome since I’d have to rewrite much of the media library navigation to not refresh the page but only that div).

I have never done this so I was thinking maybe someone seasoned could give me a hint and start me off in the right direction.

Answer 1

I ended up using jQuery modal dialogue with an Iframe inside, and upon click of an image the input field gets populated and the dialogue is closed.

Some sample code if it can be an inspiration to anyone…

Here is my input box with a browse button

<input type='text' name='data_1' id='data_1' size='30' value='' /> <input type='button' value='Bläddra' onclick="openMediaLibrary('data_1');" />

This is somewhere on the form page (hidden by default)

<div id="mediaLibrary" title="Mediabiblioteket">
    <iframe width="1050px" height="600px" src="{{ path('Media') }}" /></iframe>
</div>

Here is a sample of an image in the mediaLibrary

<a href="javascript:selectImage('{{ entity.webPath }}')"><img src="{{ entity.webPath | apply_filter('my_thumb') }}" class="media_archive_image" /></a>

Here are my functions for initializing, opening and closing the mediaLibrary

$(document).ready(function() {
        $( "#mediaLibrary" ).dialog({
        height: 700,
        width:1100,
        modal: true,
        autoOpen: false,
        position: { my: "center", at: "center" },
    });
};

function openMediaLibrary(passedField) {
    //Set the variable that keeps track of which field to pass back the image url to
    window.imageInputField = passedField
    //open the mediaLibrary
    $( "#mediaLibrary" ).dialog( "open" );
}   

function closeMediaLibrary() {
    $( "#mediaLibrary" ).dialog( "close" );
}   

And finally the functions for assigning the image and closing the mediaLibrary

function selectImage(image) {

    if (parent.window.imageInputField) {
        //set image to the input field
        parent.window.document.getElementById(parent.window.imageInputField).value = image;

        //Close the dialogue box
        parent.window.closeMediaLibrary();

    }
    else {
        //do nothing for now, perhaps show image in fullsize in lightbox here?
    }
}