Updating Image Using HTML5 FileReader Dynamically

[tetrahydra]

Hello,

I have tried to have a button to trigger a 'file' selection process. From there, a function will read and update a div in the modal. But I can't achieve it. I'm not sure why.

Here is my code.

Can someone please point me my mistake?

<div class="fade" id="PhotoUpload">   

        <div id="image-holder">BYZ</div>

    <div style="width: 0px; height: 0px; overflow: hidden;">
        <input type="file" class="file" id="catphoto" name="catphoto" />
    </div>

</div>

<script>

$(document).ready(function() {  

    $('.dialog_upload_catalog').on('click', function (event) {

        event.preventDefault(); 
        event.stopPropagation(); 

        var display_message = $('<div></div>');
        var form = $('#PhotoUpload').html();

        display_message.append(form);

        /* =  =  =  =  =  =  =  =  =  =  =  =  =  =  =  =  =  =  =  =  =  =  =  =  =  =  =  =  =  =  =  = */

        BootstrapDialog.show({
            type      : BootstrapDialog.TYPE_INFO,

            title     : 'Upload Photo',

            message   : function(dialogRef){
                return display_message;
            },

            draggable : true,

            buttons: 
            [

            {
                label: 'Choose File',
                action: function(dialogItself){

                    $('#catphoto').trigger('click', dialogItself); 

                }
            },

            {
                label: 'Close',
                action: function(dialogItself){
                    dialogItself.close();
                }
            }

            ]

        });

    });

});

$('#catphoto').change(function(event, dg2) {

    if (typeof (FileReader) != "undefined") {

        var image_holder = $(dg2).find('#image-holder');
        var reader = new FileReader();
        reader.onload = function (e) {
            $("<img />", {
                "src": e.target.result,
                "class": "thumb-image"
            }).appendTo(image_holder);

        }
        $(image_holder).show();
        reader.readAsDataURL($(this)[0].files[0]);

    } else {
        alert("This browser does not support FileReader.");
    }

});

[nakupanda]

Did you see the file upload window after pressing the trigger button?

[tetrahydra]

The file select works fine. But, I guess that it can't access to BootstrapDialog DOM.

So, I had a work around yesterday. Instead of accessing BootstrapDialog DOM, I use

$(document).find('image-holder')

But would be great if there is a way to dynamically update text, upload file, input form using a quicker method.

[nakupanda]

Please create a jsfiddle by forking this http://jsfiddle.net/o5k0eaws/1/

[tetrahydra]

I have updated the fiddle, otherwise these are the codes

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.5/css/bootstrap-dialog.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.5/js/bootstrap-dialog.min.js"></script>

<div class="fade" id="PhotoUpload">

<img id="upload_photo_src_randomID" src="" width="100%" height="100%" border=0 style="vertical-align:center; display: none;" />

</div>

<div style="width: 0px; height: 0px; overflow: hidden;">
  <input type="file" class="file" id="catphoto" name="catphoto" />
</div>

Javascript

var randomID = Math.random().toString(36).substring(7);

var display_message = $('<div></div>');
var form = $('#PhotoUpload').html();
form = form.replace("_randomID", randomID);
display_message.append(form);

BootstrapDialog.show({
  title: 'Example',
  message: function(dialogRef) {

    return display_message;

  },
  buttons: [{
    label: 'Choose Photo',
    action: function(dialogItself) {

      $('#catphoto').trigger('click');

    }
  }, {
    label: 'Close',
    action: function(dialog) {
      dialog.close();
    }
  }]
});

$('#catphoto').change(function() {

  var url = window.URL || window.webkitURL;
  var chosen = this.files[0];
  var image = new Image();

  image.onerror = function() {
    alert('Not a valid file type:\n' + chosen.type);
    return false;
  };

  width = this.width;
  height = this.height;

  image.src = url.createObjectURL(chosen);

  readURL(this, width, height);

});

function readURL(input, width, height) {

  if (input.files && input.files[0]) {

    var reader = new FileReader();

    reader.onload = function(e) {

      $('#upload_photo_src' + randomID).attr('src', e.target.result).fadeIn('slow');

    }

    $('#upload_photo_src' + randomID).show();

    reader.readAsDataURL(input.files[0]);

  }

}

[nakupanda]

I assume your major concern was to interact with the dialog content, so here is an example http://jsfiddle.net/xkhohgo3/2/

In the example all things are inside the dialog, code lines reduced and it also looks more clear and neat.

[nakupanda]

Here is another example shows how to interact with dialog message http://jsfiddle.net/31nojmay/1/

I haven't implemented it exactly like you have shown, I was just trying to show it's easy to do such update to the dialog message, it can be done in many ways.