I have javascript code that detects when an image is pasted into a contenteditable field:
document.onpaste = function(event){
var items=(event.clipboardData || event.originalEvent.clipboardData || event.dataTransfer).items;
for(i in items){
var item=items[i];
if(item.kind==='file' && ~item.type.indexOf("image")){ //is file and is image
event.preventDefault();
var blob=item.getAsFile();
console.log(item, blob);
var data=new FormData();
data.append('fname','imageFromClipboard'); //extension for file name??
data.append('newImage',blob);
sendImage(data); //just a $.POST request
}
}
}
And PHP code that receives the POST request for the image:
$image = $_FILES['newImage'];
$imageFileType = pathinfo($image["name"],PATHINFO_EXTENSION); // obviously doesn't work
$imageId = new ImageId();
$imageName = $imageId.".".$imageFileType;
// [... some checks on the file ...]
$targetFile = "../../images/uploads/{$imageName}";
if($imageOK && move_uploaded_file($image["tmp_name"],$targetFile)){
//[ do stuff ]
How do I get the file extension reliably from the blob? Should I do it with JS or PHP? Is it fine for all possible image file types to just split the MIME type ("image/png" for instance) at the slash and just use that as an extension?