upload image using javascript and xajax to MySql Blob - xajax

Question

I want to upload images to database, but I dont know how to receive this file.
//html
<input type="text" id="txtName">
<input type="file" id="image" onchange="sendImage()">
//Javascript
function sendImage()
{
var name = $('#txtName').val();
var image = $('#image').val(); //is this the way to send the image?
xajax_SaveImage(name, image);
}
//xajax
//with string I dont have problems for receive, but how receive I the image?
function SaveImage($name, $image)
{
//How here I convert the image to binary for to save in Mysql
}

Answer 1

You can do this: base64 is the image data, upload that data to database
File.prototype.convertToBase64 = function(callback){
var reader = new FileReader();
reader.onload = function(e) {
callback(e.target.result)
};
reader.onerror = function(e) {
callback(null, e);
};
reader.readAsDataURL(this);
};
$("#image").on('change',function(){
var selectedFile = this.files[0];
if (!selectedFile.name.match(/.(jpg|jpeg|png|gif)$/i)) {
}
else {
selectedFile.convertToBase64(function(base64){
//base64 is the base64 value of the image, use this to send to database...
})
}
});
Code snippet example:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="image">
<script>
File.prototype.convertToBase64 = function(callback){
var reader = new FileReader();
reader.onload = function(e) {
callback(e.target.result)
};
reader.onerror = function(e) {
callback(null, e);
};
reader.readAsDataURL(this);
};
$("#image").on('change',function(){
var selectedFile = this.files[0];
if (!selectedFile.name.match(/.(jpg|jpeg|png|gif)$/i)) {
}
else {
selectedFile.convertToBase64(function(base64){
console.log(base64);
})
}
});
</script>

Answer 2

In your template (smarty)
<div id="imageplaceholder" class="left shadow"><p>Place<br />Image<br />here.<br />(drag&drop)</p></div>
<div id="image">
<div id="imageborder" class="left shadow">{if $persondata.imagesize gt 0}<img src="getimage.php?h={$smarty.session.verify}&id={$persondata.id}" />{/if}</div>
</div><div id="imagetools" class="left">
<div id="imagehelp" class="imagetool help radius3 shadow"></div>
<div id="imagenew" class="imagetool new radius3 shadow"></div>
<div id="imagezoomin" class="imagetool zoomin radius3 shadow"></div>
<div id="imagezoomout" class="imagetool zoomout radius3 shadow"></div>
<div id="imageok" class="imagetool ok radius3 shadow"></div>
</div>
js part uses filedrop.
FileDrop JavaScript classes | by Proger_XP https://github.com/ProgerXP/FileDrop
$('#imageplaceholder').filedrop({
// The name of the $_FILES entry:
paramname:'pic',
url: '/img_file.php', //this is the PHP file used for processing
allowedfiletypes: ['image/jpeg','image/png','image/gif'],
uploadFinished:function(i,file,response){
// remove placeholder
// add Image
// $.data(file).addClass('done');
// response is the JSON object that img_file.php returns
$('#imageplaceholder').hide();
loadImage(file);
$('#image').show();
$('#imagetools .help').show();
$('#imagetools .zoomin').show();
$('#imagetools .zoomout').show();
$('#imagetools .ok').show();
$('#imagetools .ok').click(function(){
var img = $('#imageborder').find('img');
var offset = img.offset();
var pos = $('#imageborder').position();
offset.top = pos.top - offset.top;
offset.left = pos.left - offset.left;
var name = $('#imageborder').attr('name');
var scale = $('#imageborder').attr('scale');
var id = $('input[name=user_id]').val();
var hash = $('#hash').val();
var ret = xajax_settings_action({ xjxfun: 'settings_action' }, { parameters: ['saveimage',hash,id,name,offset,scale] }, { mode: 'synchronous' });
if(ret != 0)
{
$('#imagetools .help').hide();
$('#imagetools .zoomin').hide();
$('#imagetools .zoomout').hide();
$('#imagetools .ok').hide();
$('#imagetools .cancel').removeClass('cancel').addClass('new');
}
});
},
rename: function(name) {
// name in string format
// must return alternate name as string
var date = new Date();
// get file type
var typ = name.split('.',2);
// buffer name for save response
$('#imageborder').attr('name',date.getTime() + "." + typ[1]);
return date.getTime() + "." + typ[1];
},
// Called before each upload is started
beforeEach: function(file){
if(!file.type.match(/^image\//)){
jAlert('Only images are allowed!');
// Returning false will cause the
// file to be rejected
return false;
}
},
});
img_file.php
<?php
// Set the directory where files will be saved
$upload_dir = '/tmp/';
$allowed_ext = array('jpg','jpeg','png','gif');
if(strtolower($_SERVER['REQUEST_METHOD']) != 'post'){
exit_status('Error! Wrong HTTP method!');
}
if(array_key_exists('pic',$_FILES) && $_FILES['pic']['error'] == 0 ){
$pic = $_FILES['pic'];
if(!in_array(get_extension($pic['name']),$allowed_ext)){
exit_status('Only '.implode(',',$allowed_ext).' files are allowed!');
}
// Move the uploaded file from the temporary
// directory to the uploads folder:
if( move_uploaded_file($pic['tmp_name'], $upload_dir.$pic['name']) ){
exit_status('File was uploaded successfuly!');
}
}
exit_status('Something went wrong with your upload!');
// Helper functions
function exit_status($str){
echo json_encode(array('status'=>$str));
exit;
}
function get_extension($file_name){
$ext = explode('.', $file_name);
$ext = array_pop($ext);
return strtolower($ext);
}
?>
I use simpleimage.php from Simon Jarvis to scale and crop the image.
private function save_FileDB($id,$name,$pos,$scale)
{
$upload_dir = "/tmp/";
$response = new xajaxResponse();
$userid = $_SESSION['userid'];
$binFile = $upload_dir.$name;
if (isset($binFile) && $binFile != "none") {
$simage = new SimpleImage();
$simage->load($binFile);
$simage->scale($scale*100);
$simage->crop($pos[left],$pos[top],175,200);
$simage->save($binFile);
$binFile_size = filesize($binFile);
$ext = explode('.', $name);
$ext = strtolower( array_pop($ext) );
switch($ext){
case 'jpg': $binFile_type = 'image/jpeg'; break;
case 'png': $binFile_type = 'image/png'; break;
case 'gif': $binFile_type = 'image/gif'; break;
}
$data = addslashes(fread(fopen($binFile, "r"), $binFile_size ));
$qs = "update persondata set image='$data', imagetype='$binFile_type', imagesize='$binFile_size' where id=$id";
$ret = $this->exec_query($qs);
unlink($binFile);
$response->setReturnValue("1");
return $response;
}
$response->setReturnValue("0");
return $response;
}