File upload with jQuery plugin – Simple Upload

We use Simple Upload jQuery plugin to upload the file using the plugin. Here is full code sample example with the plugin.

How to install plugin in your project

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="/js/simpleUpload.min.js"></script>

How to use plugin:

First, bind the plugin to your HTML file element.

$('input[type=file]').change(function(){

            $(this).simpleUpload("YOUR_BACKEND_URL", {

                allowedExts: ["jpg", "jpeg", "jpe", "jif", "jfif", "jfi", "png", "gif"],
                allowedTypes: ["image/pjpeg", "image/jpeg", "image/png", "image/x-png", "image/gif", "image/x-gif"],
                maxFileSize: 10000000, //10MB in bytes

                start: function(file){
                    //upload started
                    this.block = $('<div class="block"></div>');
                    this.progressBar = $('<div class="progressBar"></div>');
                    this.cancelButton = $('<div class="cancelButton">x</div>');
                    var that = this;

                    this.cancelButton.click(function(){
                        that.upload.cancel();
                        //now, the cancel callback will be called
                    });

                    this.block.append(this.progressBar).append(this.cancelButton);
                    $('#uploads').append(this.block);

                },
                progress: function(progress){
                    //received progress
                    this.progressBar.width(progress + "%");
                },
                success: function(data){
                    //upload successful
                    this.progressBar.remove();
                    this.cancelButton.remove();
                    this.block.remove();
                    var data = JSON.parse(data);
                    if (data.status == 'success') {
                        var htm = '';
                        htm += '<div class="col-md-3 mg-t-30 ui-state-default" id="image_'+data.imageId +'" data-id="'+data.imageId +'">'+
                                    '<div class="card">'+
                                        '<img class="img-fluid" src="'+ SITE_URL +''+data.path +'" alt="Image">'+
                                        '<div class="card-body">'+
                                            '<p class="card-text" data-id="'+data.imageId +'">'+data.originalName +'</p>'+
                                            '<label>'+
                                                '<a href="javascript:void(0)" class="edit_name btn-sm" data-id="'+data.imageId +'" data-name="'+data.originalName +'"><i class="fa fa-edit"></i></a>'+
                                                '<a href="javascript:void(0)" class="delete_image btn-sm" data-id="'+data.imageId +'"><i class="fa fa-close"></i></a>'+
                                                '<a href="javascript:void(0)" class="copy btn-sm" data-copy-link="'+ SITE_URL +'/project/'+data.unique_key +'" data-container="body" data-popover-color="primary" data-placement="top" title="COPIED"  onclick="copyText(this)"><i class="fa fa-link"></i></a>'+
                                            '</label>'+
                                        '</div>'+
                                    '</div>'+
                                '</div>';
                        $('#images').append(htm);
                        bindPopover();

                    } else {
                        //our application returned an error
                        var error = data.msg;
                        var errorDiv = $('<div class="error"></div>').text(error);
                        this.block.append(errorDiv);
                    }
                },
                error: function(error){
                    //upload failed
                    this.progressBar.remove();
                    this.cancelButton.remove();
                    var error = error.message;
                    var errorDiv = $('<div class="error"></div>').text(error);
                    this.block.append(errorDiv);
                    var block = this.block;
                    setTimeout(function(){
                        block.remove();
                    },1000);
                },
                cancel: function(){
                    //upload cancelled
                    this.block.fadeOut(400, function(){
                        $(this).remove();
                    });
                }
            });

        });

Here are some properties of the plugin which we can use with simple upload.

allowedExts:  [“jpg”, “jpeg”, “jpe”, “jif”, “jfif”, “jfi”, “png”, “gif”],

allowedTypes: [“image/pjpeg”, “image/jpeg”, “image/png”, “image/x-png”, “image/gif”, “image/x-gif”],

maxFileSize: 10000000, //10MB in bytes

start: function(){},

progress: function(){},

success: function(){},

error: function(){},

cancel: function(){},

and read more here