CODEWITHSUNDEEP
phpjqueryajaxdrag-and-dropimage-uploading
rakcode
rakcode

Reputation: 2296

php://input Uplaod image with image type

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

Answers (1)

rakcode
rakcode

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

Related Questions