CODEWITHSUNDEEP
javascriptjqueryyii2
Izzy
Izzy

Reputation: 307

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 one of the buttons is pressed a modal is called with all the uploaded images and an option to upload more. The images in the gallery are wrapped in li tags with the class gallery-item, with the attribute data-key containing the image ID.

Javascript

show_file_manager();

function show_file_manager() {
  $('.showModalButton').click(function() {
    // opens modal
    var input_id = $(this).attr("input_id");
    var preview_class = "preview_" + $(this).attr("input_id");
    // input_id gets the hiddeninput id, preview class is meant to display the selected images.
    select_gallery_item(input_id, preview_class);
    //the input_id and preview_class are passed to the next function
  });
}

function select_gallery_item(input_id, preview_class) {
  $('.gallery-item').click(function() {
    // gallery-item is the class name of the li containting an image
    var file_id = $(this).attr('data-key');
    // file_id is the image id
    var src = $(this).children('img').attr('src');
    // src gets the value from the images src to use in the preview class
    console.log(file_id);
    if (file_id) {
      $("#add-to-input").click(function() {
        // this button passes the image id to the hiddeninput with the correct input id(site-logo_media-id, site-favicon_media-id) and the images src to the preview class(preview_site-logo_media-id, preview_site-favicon_media-id)
        $('#' + input_id).val(file_id);
        $("." + preview_class).attr("src", src);
      });
    }
  });
}

The problems:

I hope I was able to convey the problem, any help wil be greatly appreciated. What I am doing wrong? How can I make it better? Thanks in advance.

Upvotes: 3

Views: 297

Answers (1)

Aleksi
Aleksi

Reputation: 131

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.

Upvotes: 1

Related Questions