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

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

• javascript
• jquery
• filereader
• sweetalert

• developer.mozilla/en-US/docs/Web/API/FileReader/… – Teemu Commented Aug 8, 2017 at 15:58

3 Answers 3

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);

<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>

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.">links</a> ' +
    'and other HTML tags',
});

you can put anything in the html tag of course.