How to save data url into file on PHP

I have a simple script below written on PHP that will save the data url in a file. The example below will save the file on PDF and PNG file. You will notice here that the only difference are the file type and the file name which should comply with the file type you are saving. From the script below, you should be able to figure out how to save the other file types.

This is for saving an image file "PNG", you can also try "JPEG" and other image files.

<?php

$base_url = 'http://www.example.com/';
$file_type = 'image/png';
$file_base = $_POST['dataurl'];
$file_name = "file-".time().".png";

$file_base = str_replace('data:'.$file_type.';base64,', '', $file_base);
$file_base = str_replace('[removed]', '', $file_base);

file_put_contents(getcwd()."/files/$file_name", base64_decode($file_base));
echo $base_url."files/$file_name";

?>

The script below is for saving an application data "PDF" file.

<?php

$base_url = 'http://www.example.com/';
$file_type = 'application/pdf';
$file_base = $_POST['dataurl'];
$file_name = "file-".time().".pdf";

$file_base = str_replace('data:'.$file_type.';base64,', '', $file_base);
$file_base = str_replace('[removed]', '', $file_base);

file_put_contents(getcwd()."/files/$file_name", base64_decode($file_base));
echo $base_url."files/$file_name";

?>

Hope this will help a lot with your development. Happy coding guys!!

How to create multiple row carousel on FlexSlider

I am using flexslider on one of the page I'm working on but got in to problem when the carousel would need to be in two(2) rows. The problem is that there's no available option on flexslider to do it. So, what I did is to do a work around on my own. Please see below of what I did.

First, I set the basic carousel config on flexslider, this is the carousel in one(1) row. Please take note that you need to load the flexslider plugin on your page, you can download it here - http://www.woothemes.com/flexslider/.

$(window).load(function() {
    var itemCnt = 5; // this will be the number of columns per row
    var iWidth = parseFloat($('.flexslider').width() / itemCnt);
    $('.flexslider').flexslider({
        animation: "slide",
        slideshowSpeed: 1000,
        animationSpeed: 300,
        animationLoop: false,
        directionNav: false,
        slideshow: false,
        touch: true,
        itemWidth: iWidth,
        minItems: itemCnt,
        maxItems: itemCnt
    });
});

Next, is to create a function that will create 2 rows from the basic 1 row slider carousel and this will be called on start function of the slider.

function make2Rows(iWidth) {
    var iHeight = parseFloat($('.flexslider .slides > li').height());
    $('.alliance-list .slides > li').css('width', iWidth+'px');
    $('.alliance-list .slides > li:nth-child(even)').css('margin', iHeight+'px 0px 0px -'+iWidth+'px');
}

$(window).load(function() {
    var itemCnt = 5; // this will be the number of columns per row
    var iWidth = parseFloat($('.flexslider').width() / itemCnt);
    $('.flexslider').flexslider({
        animation: "slide",
        slideshowSpeed: 1000,
        animationSpeed: 300,
        animationLoop: false,
        directionNav: false,
        slideshow: false,
        touch: true,
        itemWidth: iWidth,
        minItems: itemCnt,
        maxItems: itemCnt,
        start: make2Rows(iWidth)
    });
});

That's it and hope this would help anyone who are using flexslider as carousel.