Assync Image Uploader

Getting Started

Assync Image Uploader (AIU) is a plugin to make asynchronous image uploads and show it on your page without refreshing the page. Mostly ajax-send-images plugins have scripts too heavy, or uses iFrames, which is not optimal. They are heavy and bugs your codes. IE 10 - needs to use them, unfortunately.

AIU already checks for the best option based on the user browser. If the user is running IE 9 or fewer, it'll create iFrames and make all the progress in the same way that modern browsers do, with AIU.

Need support IE 10 -? Wants to upload and show your image assynchrnously? Use AIU!

Markup

You only need a few things to watch on your HTML:

Give your input[type=file] the attribute name = "Photo"
Have an unique class or ID in your form (or any tag that wraps your input)
Have an unique class or ID in your img tag that'll show the uploaded image.
Have an unique class or ID in a pre-existent tag that displays your errors messages.

Check an example of a markup form using AIU standards and using twitter bootstrap classes

<form id="photo_form">
    <div class="form-group" id="upload-this">
        <label for="photo_input">Upload it!</label>
        <input type="file" name="Photo" id="photo_input" accept="image/*" >
        <p class="help-block">Max 1MB size. Accepted extensions: jpeg, jpg, gif, bmp and png</p>
    </div>
    <p class="photo_error alert alert-danger" hidden></p>
</form>
<div id="upload-show">
    <center>
        <img src="images/image.jpg" class="img-thumbnail" alt="Send your image!!" id="photo_preview" />
    </center>
</div>

Call

Calling AIU is easier than open a pickles jar.

$("YourFormSelector").AIU();

Yes, that's all.

Setup

There's some parameters that you can use to personalize how the plugin will work. All of these parameters have a default value and doesn't require for you to replace them.

To use AIU paremeters you just have to place them in AIU call as an object. If you are used with others jQuery Plugins, yeah, this one acts the same.

$('#YourFormSelector').AIU({
    'photo_preview' : '#photo_preview',
    'photo_error' : '.photo_error'
});

Here's an example

Parameters

Those are the avaibles options to you use on the AIU Call:

photo_preview: The selector where you'll show your uploaded image (the image tag)
photo_error: The selector where you'll show error messages.
img_loading_path: The 'loading' image path when you start the request
php_path: Your ajax PHP path/route
callback_success: A function to be called when everything went well
callback_fails: A function to be called when something went wrong

Callbacks

You can setup what's gonna happen after a successful request and after a failed one. You can do it with the parameters callback_success and callback_fails

To use them, you can create a new function on the plugin call

$('#YourFormSelector').AIU({
    'callback_success' : function(){
        $("body").hide(); // Yes, you can hide your whole page after an image upload!
    },
    'callback_fails' : function(){
        while(true){
            alert("YOU SUCK INTERNET!"); // Why don't you span alerts when something fails?
        }
    }
});

You can also set the name of a existing function, to make a plugin call cleanier and to make it easier for mantain the callbacks functions

function MySuperAwesomeSucessFunction(){
    console.log("POTATO RULES");
}
function MyOhGeezFunction(){
    alert("FML");
}
$('#YourFormSelector').AIU(
    {
        'callback_success' : 'MySuperAwesomeSuccessFunction',
        'callback_fails' : 'MyOhGeezFunction'
    }
);

Default Values

There are the Default Values for the parameters:

photo_preview: "#photo_preview"
photo_error: ".photo_error"
img_loading_path: "images/ajax-loader.gif"
php_path: "photo_controller.php"
callback_success: "MyOKCallbackFunction"
callback_fails: "MyGeezCallbackFunction"

Backend Setup

AIU will make an AJAX request to your PHP path. Set the route with the php_path parameter. In AIU there's already an example controller. If you need something more custom, check how to get the file on this controller.

However, you need to return a JSON to the plugin:

echo "{success:false, msg:'Someone threw a potato in my server, try again later!'}";

JSON error example

echo "{success:true, url:'/images/image_69690101.jpg'}";

JSON success example

Support and Contact

You can (and you really should) support to this plugin. Fork it on GitHub and improve this plugin.

Having trouble? Contact the developer! My email (ninja@gfviegas) is avaible and waiting for your contact! Good vibes!

AIU Upload (and show) images with one request! Even on Internet Explorer