Loading

Need to send image data from img element in FormData using Javascript

Need to send image data from img element in FormData using Javascript

Kumar Ravishankar

4y3.1kJavaScript

< img class="main" src="assets/images/Group 18.jpg" id="use_current">

I am trying to create FormData to send in xhr request but I am facing issue when appending Image data from img tag.

I tried someting like

const aForm = new FormData();

aForm .append("pipe", "pipeName");

aForm .append("pipetype", "pipetypeName");

const blob = new Blob(["localhostimagepath"], { type: "multipart/form-data" });

aForm .append("webmasterfile", blob);

xhr.send(aForm );

But getting error regardinf image data , like invalid image FIle .This needs to be sent as BINARY.

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Rajesh Gami4y ago
Accepted answer
Hello Kumar

Try a code like below
fetch(img.src)
    .then(res => res.blob())
    .then(blob => {
        const file = new File([blob], "capture.png", {
            type: 'image/png'
        });
        var fd = new FormData();
        fd.append("image", file);
        $.ajax({
            type: "POST",
            enctype: 'multipart/form-data',
            url: "/api/file/upload",
            data: fd,
            processData: false,
            contentType: false,
            cache: false,
            success: (data) => {
                alert("yes");
            },
            error: function(xhr, status, error) {
                alert(xhr.responseText);
            }
        });
    });
OR

Check below links

https://coderwall.com/p/cjinag/upload-a-image-using-ajax-and-formdata

https://www.freecodecamp.org/news/formdata-explained/