How can I show an image in sweet alert that I want to upload?

Question

I have the following code not working. I want the image to appear in a swal (Sweet Alert) when the input is changed, but I don't know what's not working. I get the following error on console:

Failed to execute'readAsDataURL' on 'FileReader': parameter 1 is not type 'Blob'

INPUT

<input id="input" type="file" style="display:none;" onchange="muda()">

Script

<script>
            function muda(){
                var thefile = document.getElementById('input');
                var reader = new FileReader();
                    reader.onloadend = function(){
                        var imagem = reader.result;
                    }
                        if(thefile){
                            reader.readAsDataURL(thefile);
                        }
                swal({
                  title: "Esta é a imagem que pretende inserir?",
                  text: "<img src='"+imagem+"' style='width:150px;'>",
                  html:true,
                });
            }
        </script>

UPDATE

With adaneo response, I managed to read the file name adding .files[0]; but I don't know how to get the image path now, I tried to put a variable named image as you can see in the code but it turns undefined

https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL — Teemu, Aug 08 '17 at 15:58

adeneo · Accepted Answer · 2017-08-08T16:14:14.890

The argument you're passing in, thefile, is a DOM element, not a file.

You want to pass the file, not the entire element

var thefile = document.getElementById('input').files[0];

That selects the first (and only, as it doesn't have "multiple" set) file and passes it to the FileReader

reader.onloadend is asynchronous, you have to put your swal() function inside the callback

Here's another way to do this, without the inline javascript

document.getElementById('input').addEventListener('change', function() {
  var thefile = this.files[0];
  var reader  = new FileReader();
  reader.onload = function() {
    swal({
        title: "Esta é a imagem que pretende inserir?",
        text: "<img src='" + reader.result + "' style='width:150px;'>",
        html: true,
    });
  }
  reader.readAsDataURL(thefile);
}, false);

Thanks, it worked, now I have another problem, check the update — I_like_trains, Aug 08 '17 at 16:05
Well, `reader.onloadend` is **asynchronous**, you have to put your `swal()` function inside the callback — adeneo, Aug 08 '17 at 16:07

score 3 · Answer 2 · answered Sep 28 '18 at 08:19

<div onclick="imgClick(this)">
   <img src="image/img1.jpg" width="150px">

</div>

<script>
function imgClick(e){
    var src = $(e).find('img').attr('src');
    swal({
           title: "Hello World",
           text: "<img src='"+src+"' style='width:150px;'>",
           content:true,
        });
}

</script>

score 1 · Answer 3 · answered Dec 01 '18 at 16:38

along with @adeneo reply, I would like to add more about swal. As per the latest swal documentation, it should be as follows

swal({
  title: '<strong>HTML <u>example</u></strong>',
  type: 'info',
  html:
    'You can use <b>bold text</b>, ' +
    '<a href="//github.com">links</a> ' +
    'and other HTML tags',
});

you can put anything in the html tag of course.

How can I show an image in sweet alert that I want to upload?

3 Answers3