search

pqina / filepond-plugin-image-preview

🖼 Show a preview for images dropped on FilePond
https://pqina.nl/filepond
MIT License
47 stars 27 forks source link

Image preview wont show when using addFile with a blob #16

Closed nilsegger closed 5 years ago

nilsegger commented 5 years ago

When I add an image as a blob, the image preview wont show. I don't know what I'm doing wrong and I haven't been able to find any solution which worked.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
    <link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css" rel="stylesheet">

    <script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js"></script>
    <script src="https://unpkg.com/filepond/dist/filepond.js"></script>

</head>
<body>

    <input type="file">

    <script>
        FilePond.registerPlugin(FilePondPluginImagePreview);

        const inputElement = document.querySelector('input[type="file"]');
        const pond = FilePond.create(inputElement);

        function loadImage() {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {

                    let blob = new Blob([this.responseText]);

                    let file = new File([blob], 'Image', {type: 'image/jpeg'});
                    pond.addFile(file);

                }
            };
            xhttp.open("GET", "https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500", true);
            xhttp.send();
        }
        loadImage();
    </script>
</body>
</html>
nilsegger commented 5 years ago

I was able to work out my issue. I am using Dart for my website, there I was fetching the image as an array of ints, I had to type square brackets around my array to get it working. I am yet unable to get my example to work... Maybe my Dart Solution will be of some help:

var imageData = List<int>;
var profilePicture = new File([imageData], 'image name', {'type': 'image/png'});
filePond.addFile(profilePicture);