Wednesday, August 28, 2013

JQuery AJAX File Uploading

in this tutorial we are going to create a simple file uploader through AJAX.

HTML Script: 

First we create a simple HTML script that contains input file tag and a button as a trigger.
<!DOCTYPE html>
<html>




</html>

JS Script:

make sure you already included the JQuery file.

$("#id_of_file_tag").click(function(){
  var formdata = new FormData();
  var file = $("#certi")[0].files[0];
  formdata.append('certi',certi);
  $.ajax({
   url: "http://localhost/ajaxuploader.php",
   type: "POST",
   data: formdata,
   processData: false,
   contentType: false,
  });
 });

the highlighted lines are the key of JQuery ajax uploader.

FormData
FormData accomodates html's form entities. it is used by create new object of FormData class. after you created it you append all of html's form entites.

Files Attribute
files attribute is a attribute to get the html's file tag features on javascript. after you get the file you can post it through AJAX and receive on server side as $_FILE variable.

PHP Script:

here we'll get the uploaded file and process it. we receive the uploaded file, validate it and move it to desire directory using PHP's function.

<?php
 if(isset($_FILES['certi']) && $_FILES['certi']['error'] == 0){

  if(move_uploaded_file($_FILES['certi']['tmp_name'], 'uploads/'.$_FILES['certi']['name'])){
   echo '{"status":"success"}';
   exit;
  }
 }

?>



Enjoy!!

Thursday, January 31, 2013

Empty Cart Prestashop Bug on Google Chrome and Mobile Browsers

In web development using Prestashop, i found a bug that i wasn't able add an item to cart, thus the shopping cart was empty. The bug only appeared on Google Chrome and mobile browsers. I used Prestashop version 1.5

The issue was on the shop's URL. i put "www" prefix in front of Shop's URL . To fix this bug follow these steps.


1. Go to admin page > PreferencesSEO & URLs.



2. Remove "www" from "Shop domain" and "SSL domain" (in case it was enabled).




3. Save setting



Enjoy!