0

I actually want to upload an image to a server. To achieve this, i want the user just paste the image into chrome (the image is a print screen in fact), and then i post the stream to a php page, convert the stream as an image, and then upload it.

How can i achieve this web application ?

Today i have develop some differents parts : I used this script, and i create the Upload.php page which gets the post variable and try to Create and image.

The problem i have, is that when i post the data, i only get a blob. I would like to get a base64 stream.

Can you help me ? Thanks in advance.

Etienne Arthur
  • 680
  • 1
  • 9
  • 17

2 Answers2

1

I'm not sure why you are specifically looking for a "base 64 stream". If you are sending the Blob to your server via ajax, as far as your server is concerned, it's a file. Treat it no different than any other upload server-side. A Blob is a File without a name property. That's perhaps a bit overly-simplistic, but my point is that, again, this is really nothing more than a file as far as your server knows.

Assuming you are sending a multipart-encoded request, I'd like to point out that most user agents will set the filename property of the item's Content-Disposition header in the request to "blob" when the item you are uploading is a Blob instead of a file. It is possible to change this value in some browsers via the 3rd argument in FormData's append method, but I wouldn't rely on this just yet.

Also note that, if you are interested in a library that handles all of this already, I maintain, Fine Uploader which natively supports uploading images via paste in Chrome.

Ray Nicholus
  • 19,538
  • 14
  • 59
  • 82
0

To answer this old question: Posting an image from clipboard with chrome is pretty much the same as posting a dropped file - except that the image/blob doesn't have the properties "name" and "lastModified".

var entry = items[i].webkitGetAsEntry();
if (!entry) entry = items[i].getAsFile(); 

if (entry instanceof Blob) /** CHROME pastet Bilder als Blob **/
{
    entry.isFile = true;
    entry.lastModifiedDate = new Date();
    entry.name = ""+new Date().getTime()+"."+entry.type.split('/')[1];
}

if (entry.isFile)
{
//handle dropped file
}
fiffy
  • 840
  • 9
  • 16