Accept a pasted image + auto post image + retrieve image in behind code in ASP.NET

Question

0.00/5 (No votes)

See more:

Hi,
What I am trying to do is, when a user pastes an image into my Div, I need the code to automatically post the image back to the server where the code behind can retrieve it. If anyone can help me out it will be GREATLY appreciated!
Thanks
-Doug

What I have tried:

I have spent a few hours on this and have only succeeded in getting the client side code to trigger the Document's onpaste event and capture the data from the clipboard.

The inline code...
<div id="DivPastedImage" contenteditable="true" style="height: 200px; width: 200px; " >
</div>

The Javascript...
document.onpaste = (evt) => {
const dT = evt.clipboardData || window.clipboardData;
const file = dT.files[0];

alert("How do I get the file posted to the code behind?");
}

Posted 10-Jul-21 17:39pm

DougsSoftware

Updated 11-Jul-21 23:54pm

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Accepted Answer · 2021-07-11T23:54:00

Use a FormData object to send the file via an AJAX request to the server.
Using FormData Objects - Web APIs | MDN[^]
Using Fetch - Web APIs | MDN[^]

JavaScript

document.onpaste = async (evt) => {
    const dT = evt.clipboardData || window.clipboardData;
    const formData = new FormData();
    for (let i = 0; i < dT.files.length; i++) {
        formData.append("PastedFile", dT.files[i]);
    }
    
    const response = await fetch("path/to/controller/action", {
        method: "POST",
        body: formData
    });
    
    if (!response.ok) {
        // Display error message...
    } else {
        const result = await response.json();
        ...
    }
};