Home Ask Login Register

Developers Planet

Your answer is one click away!

Michael February 2016

Image upload manager

I am trying to build an image manager for my CMS based on the Wordpress media manager.The CMS is being developed in Yii2.

Right now I am able to upload and view all the uploaded images. What I wanted next was to be able to add custom buttons (Upload logo, upload header, etc) wich would allow the user to call the image manager in a modal. Then either upload or pick an image from the gallery and add the images ID to the hiddeninput field(Logo, header, etc). But I am having trouble in accomplishing this.

This is what I have so far:

I have two inputfields in one form, one for the logo and the other for a favicon

Logo hiddeninput: ID -> site-logo_media_id

img preview: class -> preview_site-logo_media_id

Button: ID -> logo-button, custom attribute input_id -> site-logo_media_id, class-> showModalButton

        <?= $form->field($model, 'logo_media_id')->hiddenInput(['maxlength' => true]) ?>
        <img class="preview_site-logo_media_id" src="" alt="">
        <?= Html::button('logo', ['title' => 'Upload Logo', 'id' => 'logo-button', 'input_id' => 'site-logo_media_id', 'class' => 'showModalButton btn btn-success']); ?>

favicon hiddeninput: ID -> site-favicon_media-id

img preview: class -> preview_site-favicon_media_id

Button: ID -> favicon-button, custom attribute input_id -> site-favicon_media_id, class-> showModalButton

        <?= $form->field($model, 'favicon_media_id')->hiddenInput(['maxlength' => true]) ?>
        <img class="preview_site-favicon_media_id" src="" alt="">
        <?= Html::button('favicon', ['title' => 'Upload Favicon', 'id' => 'favicon-button', 'input_id' => 'site-favicon_media_id', 'class' => 'showModalButton btn btn-success']); ?>

When on


Aleksi February 2016

The first problem is caused by select_gallery_item function. Every time you click the modal button an another click event gets binded to .gallery-item elements and also for #add-to-input element.

I guess you are trying to pass parameters to the click events?

If so check out this question Passing parameters to click() & bind() event in jquery?

I would guess the second problem is caused by the same reason. First you click to select image for logo and it gets binded for #add-to-input and when you change the favicon the first binded click event changes src and id for logo as well.

So try to separate nested click bindings.

Post Status

Asked in February 2016
Viewed 3,656 times
Voted 7
Answered 1 times


Leave an answer

Quote of the day: live life