Question

24

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

rated 0 times [ 28] [ 4] / answers: 1 / hits: 25252 / 7 Years ago, tue, august 8, 2017, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

moriah

Add To Favorites

Follow

Total Points: 201

Total Questions: 100

Total Answers: 82

Location: Tuvalu

Member since Sun, Sep 4, 2022

2 Years ago

answered 7 Years ago kylanalis · Accepted Answer

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