Send data to the server as a File

Question

I received an image in the form of a Bitmap from the clipboard and need to send it to the server as a file. How do I implement this without saving it as a file on the user's computer?

Answer 1

Since you haven't mentioned the tech stack, I'll answer this from a general theoretical perspective.

You should turn the clipboard data into a byte stream and send it over an HTTP multipart/form-data request to the server.

Answer 2

You can convert the Bitmap image to a Blob object and send it to the server. I'm assuming you are using pure Javascript, so I've done using Fetch. You can use Axios also for the same, for eg:

async function sendImageToServer(imageBitmap) {
  const blob = await new Promise(resolve => imageBitmap.blob(resolve));
  const formData = new FormData();
  formData.append('image', blob, 'image.jpg');
  const response = await fetch('/upload', {
    method: 'POST',
    body: formData,
  });
  const result = await response.json();
  return result;
}

Answer 3

You can convert the Bitmap to a byte array and send that as the payload in your server request using Python.

• Get the image from clipboard like this

  from PIL import ImageGrab
  image = ImageGrab.grabclipboard()
  

• Convert image to byte array

  import io
  byte_array = io.BytesIO()
  image.save(byte_array, format='PNG')
  byte_array.seek(0)
  

• Send response

  import requests
  response = requests.post(<url>, files={'image': byte_array})
  print(response.status_code, response.text)