Topic: Upload image

Hello
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
//Ok, with string I dont have problems, but how receive I the image?

function SaveImage($name, $image)
{
   //How here I convert the image to binary for to save in Mysql
}

Re: Upload image

Hi,

Images and the like are usually handled with the file tag in html. I am currently working on a small project that involves images and I have not come up with a way to get thee image file directly using xajax. If I come up with a solution, I'll post it...

Thinking about maybe drag and drop...

Ed

If you ever stop learning you may as well dig a hole, crawl in and pull the top over yourself.

Re: Upload image

I was trying to upload the image directly in the server, in a field type BLOB(mysql), but I changed the way, now I am saving just
the path, and the image in a folder, and it works very good.

Regards.

Re: Upload image

I have doing a lot of looking since yesterday and now have a way to upload files using xajax.
The key is the FileReader object. I am surprised there has not been more about this...

<!doctype html>
<html>
<!--
    This is a sample of obtaining the file contents and it's name from
    file tag in html. These can then be used to send the file to xajax.
    
    
-->
<head>
</head>
<body>
<input type="file" class="fileuploader" style="display: none; accept="image/*"">  
<button class="fileuploader-btn">Upload</button><br>
<div id="imgdisplay"></div>
<div id="imgfilename"></div>
<button id="sendbtn" onclick="shipTheFile()" style="display: none;">Send the File</button>
<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
<script>
var filecontent;    //The base64 of the file's contents
var fname;          //The name of the uploaded file    
//This is how you capture the file using the Fileeader object
jQuery(document).ready(function($){

    // Click button to activate hidden file input
    $('.fileuploader-btn').on('click', function(){
        clearTheScreen();
        $('.fileuploader').click(); //Causes the file dialog to show
    });

    // Input change function
    $('.fileuploader').change(function(){

        // Create new FileReader
        var reader = new FileReader();
        // Onload Function to run after file loaded fully
        reader.onload = function(file){
           
            // Base64 Encoded Image Loaded
            fileContent = file.target.result;
            
            fname = file.name;
            $('#imgfilename').html('File Name: '+fname);

            // Output on Page
            $('#imgdisplay').html('<img src="' + fileContent + '">');
            $('#sendbtn').show();
        }
        reader.onabort = function(){}; //Do nothing when user cancels the load

        // Get the selected Item from Dialog
        reader.readAsDataURL(this.files[0]);
        var theFile = this.files[0];
        fname = theFile.name;

        
    });

});

function clearTheScreen()
{
    $('#imgdisplay').html('');
    $('#imgfilename').html('');
    
}

//This is how you get the file uploaded to the server
function shipTheFile()
{
    alert('Sending the file to Xajax on the server...');
    clearTheScreen();
    $('#sendbtn').hide();
    var args = {'fName':fname, 'fContent':filecontent};
    var stringy = JSON.stringify(args);
    xajax_saveTheImage(args);
}
</script>  

</body> 
</html>

When the items reach the server the file content must be decoded from base 64 using something like this:

    //Base64 conversion lifted from
    //http://stackoverflow.com/questions/15153776/convert-base64-string-to-an-image-file
    function base64_to_jpeg($base64_string) 
    {
        // split the string on commas
        // $data[ 0 ] == "data:image/png;base64"
        // $data[ 1 ] == <actual base64 string>
        $data = explode( ',', $base64_string );
        $image = base64_decode( $data[ 1 ] );
        return $image;
    }
    
     //Receive the file info from the browser and
     //save it as a file
     function saveTheImage($data)
    {
        $resp= new xajaxResponse();
        $args = json_decode($data);
        $fName = 'assets/images/'.$args->fName;
        $image = base64_to_jpeg($args->fileContents);
        if(!file_put_contents($fName,$image))
        {
            $resp->alert('Failed to save the image...');
        }
        else
        {
            $resp->alert('Image saved...');
        }
        return $resp;
     }

This may need some tweeking but so far it is working in my current project.

Ed

If you ever stop learning you may as well dig a hole, crawl in and pull the top over yourself.