File upload with jQuery plugin – Simple Upload

January 10, 2021January 3, 2021 Harinder Singh

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>

1 2	<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();
                    });
                }
            });

        });

$('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>';

$('#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

Was this post helpful?

Let us know if you liked the post. That’s the only way we can improve.

Yes1

No0

Post Views: 574