I use filepond to send a single image on my server, process it, and get the processed data back.
When I use the filepond button to remove the current displayed image and add a new one, I find out that it is actually only removed from the display, since the result of the fetch method gives me as many results as I had uploaded images previously.
How can I completely delete the images on the filepond remove item button?
// register the plugins with FilePond
FilePond.registerPlugin(
FilePondPluginImagePreview,
FilePondPluginImageResize,
FilePondPluginImageTransform,
FilePondPluginFileEncode
);
const inputElement = document.querySelector('input[type="file"]');
const pond = FilePond.create(inputElement, {
// add onaddfile callback
onaddfile: (err, fileItem) => {
const im64 = fileItem.getFileEncodeBase64String();
if (document.getElementById('fetchUserDataBtn')) {
document.getElementById('fetchUserDataBtn').addEventListener('click', fetchUserData);
function fetchUserData() {
fetch('http://127.0.0.1:8000/classify/api/', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: im64,
dataType: 'json',
})
.then(result => result.json())
.then(data => {
console.log(data);
})
}
}
}
});<!DOCTYPE html>
<html lang="en">
<head>
<title>FilePond from CDN</title>
<!-- Filepond stylesheet -->
<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">
</head>
<body>
<!-- We'll transform this input into a pond -->
<input type="file">
</body>
<!-- Load FilePond library -->
<!-- Add plugin scripts -->
<script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js"></script>
<script src="https://unpkg.com/filepond-plugin-image-resize/dist/filepond-plugin-image-resize.js"></script>
<script src="https://unpkg.com/filepond-plugin-image-transform/dist/filepond-plugin-image-transform.js"></script>
<script src="https://unpkg.com/filepond-plugin-file-encode/dist/filepond-plugin-file-encode.js"></script>
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>
<button id="fetchUserDataBtn">Fetch User Data</button>
</html>