Reputation: 2296
I'm implementing a drag and drop image uploader with ajax call, I saw a tutorial on this and implemented like this, with this code I can save the image in .jpg format only! (or any one format that I specify in the code)
uploaded image saved in php://input folder before and we need to grab that image from that temp folder to save that in the server,
but they didn't tell anything to change image format as per the image type,
now I want to upload the image in the original format, how can I collect image information while it is uploading?
here is the code
<?php
$str =file_get_contents('php://input');
$filename = md5(time()).'.jpg';
$path = 'upload/'.$filename;
file_put_contents($path,$str);
echo $path;
here is some JS for taking the image and sending ajax request:
$(function(){
//select the drop container
var obj = $('.drop');
// dragover event listener
obj.on('dragover',function(e){
e.stopPropagation();
e.preventDefault();
$(this).css('border',"2px solid #16a085");
});
//drop event listener
obj.on('drop',function(e){
e.stopPropagation();
e.preventDefault();
$(this).css('border',"2px dotted #bdc3c7");
//get the files
var files = e.originalEvent.dataTransfer.files;
var file =files[0];
//console.log(file);
//upload data using the xhr object
upload(file);
});
function upload(file){
//create xhr object
xhr = new XMLHttpRequest();
//initiate request
xhr.open('post','drop.php',true);
//set headers
xhr.setRequestHeader('Content-Type',"multipart/form-data");
xhr.setRequestHeader('X-File-Name',file.fileName);
xhr.setRequestHeader('X-File-Size',file.fileSize);
xhr.setRequestHeader('X-File-Type',file.fileType);
//send the file
xhr.send(file);
}
});
Upvotes: 0
Views: 1256
Reputation: 2296
Finally, I fixed this problem.
there was no problem with PHP to catch headers, as Magnus Eriksson said $_SERVER['HTTP_X_FILE_TYPE'] works fine, but problem was while sending ajax header we set header type and size wrong.
i logged file data and find type and size but i set header as fileType and fileSize
changed the code and here is the code before and after :
BEFORE: AJAX request:
//set headers
xhr.setRequestHeader('Content-Type',"multipart/form-data");
xhr.setRequestHeader('X-File-Name',file.fileName);
xhr.setRequestHeader('X-File-Size',file.fileSize);
xhr.setRequestHeader('X-File-Type',file.fileType);
and PHP:
$str =file_get_contents('php://input');
$filename = md5(time()).'.jpg';
$path = 'upload/'.$filename;
file_put_contents($path,$str);
echo $path;
AFTER: AJAX request:
//set headers
xhr.setRequestHeader('Content-Type',"multipart/form-data");
xhr.setRequestHeader('X-File-Name',file.fileName);
xhr.setRequestHeader('X-File-Size',file.size);
xhr.setRequestHeader('X-File-Type',file.type);
and PHP:
$str =file_get_contents('php://input');
$ext = $_SERVER['HTTP_X_FILE_TYPE'];
$e = explode("/",$ext);
$ext = $e[1];
$filename = md5(time()).'.'.$ext;
$path = 'upload/'.$filename;
file_put_contents($path,$str);
echo $path;
this code is working fine :)
Upvotes: 1