Support » Plugin: Multi Image Upload » Images aren't saving

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter ch6x

    (@ch6x)

    It seems this is still an issue for me, but I decided to just add hidden inputs to remedy.

    I wanted to display the image rather than the input with file url. Amended mui_script.js line 31 to insert url into my hidden input and image tags, then added new tags to emptyRowTemplate.

    Before:

    window.original_send_to_editor = window.send_to_editor;
        window.send_to_editor = function(html){
            if (formfield) {
                fileurl = jQuery('img',html).attr('src');
    
                jQuery('#img-'+img_id).val(fileurl);
    
                tb_remove();
    
                jQuery('html').removeClass('Image');
    
            } else {
                window.original_send_to_editor(html);
            }
        };
    });
    
    function addRow(image_url){
        if(typeof(image_url)==='undefined') image_url = "";
        itemsCount+=1;
        var emptyRowTemplate = '<div id=row-'+itemsCount+'> <input style=\'width:70%\' id=img-'+itemsCount+' type=\'text\' name=\'miu_images['+itemsCount+']\' value=\''+image_url+'\' />'
        +'<input type=\'button\' href=\'#\' class=\'Image_button button\' id=\'Image_button-'+itemsCount+'\' value=\'Upload\'>'
        +'<input class="miu-remove button" type=\'button\' value=\'Remove\' id=\'remove-'+itemsCount+'\' /></div>';
        jQuery('#miu_images').append(emptyRowTemplate);
    }

    After:

    window.original_send_to_editor = window.send_to_editor;
        window.send_to_editor = function(html){
            if (formfield) {
                fileurl = jQuery('img',html).attr('src');
    
                jQuery('#img-'+img_id).attr('value', fileurl);
    
                jQuery('#imgupld-'+img_id).attr('src', fileurl);
    
                tb_remove();
    
                jQuery('html').removeClass('Image');
    
            } else {
                window.original_send_to_editor(html);
            }
        };
    });
    
    function addRow(image_url){
        if(typeof(image_url)==='undefined') image_url = "";
        itemsCount+=1;
        var emptyRowTemplate = '<div id=row-'+itemsCount+'><input id=img-'+itemsCount+' type=\'hidden\' name=\'miu_images['+itemsCount+']\' value=\''+image_url+'\' />'
        +'<img src=\''+image_url+'\' name=\'miu_images['+itemsCount+']\' style=\'width:25%; padding: 2%;\' id=imgupld-'+itemsCount+' />'
        +'<input type=\'button\' href=\'#\' class=\'Image_button button\' id=\'Image_button-'+itemsCount+'\' value=\'Upload New Image\' style=\'margin:2% 5px;\' >'
        +'<input class="miu-remove button" type=\'button\' value=\'Remove Image\' id=\'remove-'+itemsCount+'\' style=\'margin:2% 5px;\' /></div>';
        jQuery('#miu_images').append(emptyRowTemplate);
    }

    Works great now. FYI for anyone trying to accomplish the same thing here!

    @ ch6x your code works great !

    When one wants to add an image it first shows an image error because there is no image chosen yet. To avoid that, hide the img by css than display it only after upload :

    window.original_send_to_editor = window.send_to_editor;
        window.send_to_editor = function(html){
            if (formfield) {
                fileurl = jQuery('img',html).attr('src');
                jQuery('#img-'+img_id).attr('value', fileurl);
                jQuery('#imgupld-'+img_id).attr('src', fileurl);
                jQuery('#imgupld-'+itemsCount).css('display', 'block');
    
                tb_remove();
    
                jQuery('html').removeClass('Image');
    
            } else {
                window.original_send_to_editor(html);
            }
        };
    
    });
    
    function addRow(image_url){
        itemsCount+=1;
        var emptyRowTemplate = '<div id=row-'+itemsCount+' style=\'border-bottom:1px solid #EEEEEE; padding: 0 0 10px 0; margin: 0 0 10px 0;\'><input id=img-'+itemsCount+' type=\'hidden\' name=\'miu_images['+itemsCount+']\' value=\''+image_url+'\' />'
        +'<img src=\''+image_url+'\' name=\'miu_images['+itemsCount+']\' style=\'width:25%; padding: 2%; border: 1px solid #EEEEEE;\' id=imgupld-'+itemsCount+' />'
        +'<input type=\'button\' href=\'#\' class=\'Image_button button\' id=\'Image_button-'+itemsCount+'\' value=\'Upload New Image\' style=\'margin:2% 5px;\' >'
        +'<input class="miu-remove button" type=\'button\' value=\'Remove Image\' id=\'remove-'+itemsCount+'\' style=\'margin:2% 5px;\' /></div>';
        jQuery('#miu_images').append(emptyRowTemplate);
        console.log(image_url == undefined)
       if (image_url == undefined) jQuery('#imgupld-'+itemsCount).css('display', 'none');
    }

    remove the line ‘console.log(image_url == undefined)’ at the end of the function

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Images aren't saving’ is closed to new replies.