Easy Image Uploader

2018-02-12 18:33:53 GMT
screenshot

How to


Easy image uploader is a new API that will make uploading files easier than before!

Let's learn how to set it up!


1. Go to the CKSoftwares dashboard then hit Add API, and click on the Add button, for the Easy Image Uploader.
2. After that, hit My APIs, then the Settings for Easy Image Uploader.
3. Update the origin domain textbox (the request from which the request comes from), e.g: https://cksoftwares.com
4. Copy the following code:



var id = "YOUR IMAGE UPLOAD ID";
$(document).ready(function (e) {
$("#uploadimage").on('submit',(function(e) {
e.preventDefault();
$("#message").empty();
$('#loading').show();
$.ajax({
url: "https://cksoftwares.com/handler/uploader/uploader.php?id="+id,
type: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData:false,
success: function(data)
{
$('#loading').hide();
$("#message").html(data);
}
});
}));

// Function to preview image after validation
$(function() {
$("#file").change(function() {
$("#message").empty();
var file = this.files[0];
var imagefile = file.type;
var match= ["image/jpeg","image/png","image/jpg"];
if(!((imagefile==match[0]) || (imagefile==match[1]) || (imagefile==match[2])))
{
$('#previewing').attr('src','noimage.png');
$("#message").html("

Please Select A valid Image File

"+"

Note

"+"Only jpeg, jpg and png Images type allowed"); return false; } else { var reader = new FileReader(); reader.onload = imageIsLoaded; reader.readAsDataURL(this.files[0]); } }); }); function imageIsLoaded(e) { $("#file").css("color","green"); $('#image_preview').css("display", "block"); $('#previewing').attr('src', e.target.result); $('#previewing').attr('width', '250px'); $('#previewing').attr('height', '230px'); }; });

5. Replace YOU IMAGE UPLOADER ID by the one procided in the settings area.
6. Sample form:




Ajax Image Upload





loading..


7. Customize the form like you want.
8. When the upload button is hit, the image will be sent to our servers, and validated. If the server finds that the image is valid, it will upload it into one of our CDNs, and will return it's url, so, the url returned it the path to your image.

Uploading images without page refresh has never been so easy!