Image preview wont show when using addFile with a blob
nilsegger opened this issue · comments
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>
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);