I have approve function that I need to send value of image in blob format. After retrieving the picture value I want to convert it into the blob function and send the blob format into the approve function. User have option they can update their logo or just use the previous get picture logo. How do I do that ? Below is what I tried. But I got no luck with this code.
To retrieve the picture value, I used API and pass it into axios get to get the picture value. The picture value are pass as a url like this http://localhost/images/logo/0d63a696abc2d5e_20210915125851.jpeg.webp.
So I need to get this value and convert it into blob.
For demonstration purpose I declare it as photo.
var myImage;
var myBlob;
$(document).ready(function() {
getDetails();
$(".chooseLogo").click(function() {
$("#upload_logo").click();
});
$("#approve").click(function() {
var logoFilename = myBlob;
let formData = new FormData();
formData.append('logo', logoFilename);
for (var pair of formData.entries()) {
console.log(pair[0] + ', ' + pair[1]);
}
});
});
fetch('')
.then(res => res.blob()) // Gets the response and returns it as a blob
.then(blob => {
myBlob = blob;
});
const getDetails = () => {
//fetching data using axios get
//get logo picture
// for demonstration purpose i declare it as photo
let photo = 'http://hd.wallpaperswide.com/thumbs/beast_2-t2.jpg';
$("#logo").append(`<img id="logo_photoViewer" src="${photo}" width="100" height="100">`);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="text-center">
<div class="form-group" id="logo"></div>
<button type="button" class="btn btn-primary ml-4 chooseLogo">Choose logo</button>
<input type="file" id="upload_logo" oninput="logo_photoViewer.src=window.URL.createObjectURL(this.files[0])" hidden>
</div>
</div>
<br>
<button type="button" id="approve" name="approve" class="btn btn-success">Approve</button>I'm trying to achieve output like this in the console when user click on the approve button
logo, [object File]