File compress client side by Java script before upload to server | C# ASP.Net

File compress facility is available in javascript and it's good practice to compress files client-side, before uploading to the server because it saves the resource of the Server time and internet bandwidth and increases the user file upload experience. 

JIC is a free image file compress code that runs client-side. It’s a very simple code interface don’t need to make canvas manually it will do all the things. You will just have to call a function, and compression gets done, it's pretty simple. Just follow the steps given below. 

Step 1 : 

   Download JIC File and documentation. https://github.com/brunobar79/J-I-C

Step 2:  HTML 

<input type="file" class="upload"  id="thumb" accept="image/x-png,image/jpeg" />
<br />

<input type="button" value="Compress" onclick="compress()" />
<input type="button" value="Upload" onclick="Upload()" />

<img id="blah"  style="width:50%" />
<img id="imgthumb" style="display:none" />

<script src="JIC.min.js"></script>

Step 3 : Java Script

function readThumb(evt)
{

    var file = evt.target.files[0];
    var reader = new FileReader();
    reader.onload = function (event) {

        var i = document.getElementById("blah");
        i.src = event.target.result;
        i.onload = function () {
            console.log("Image loaded");
        }        

    };
    reader.readAsDataURL(file);
    return false;

}

document.getElementById("thumb").addEventListener("change", readThumb, false);

 var target_img = document.getElementById("imgthumb");

function compress()
{

    var quality = 30;
    output_format = 'jpg';
    var source_img = document.getElementById("blah");
   
    target_img.src = jic.compress(source_img, quality, output_format).src;

}

function Upload()
{

    var successCallback = function (response) {
        alert("image uploaded successfully! :)");
        console.log(response);
    }

     var errorCallback = function (response) {
        alert("image Filed to upload! :)");
        console.log(response);

    }

    jic.upload(target_img, "/Supplier/SaveThumb?fid=" + $("#MaxID").val(), "file", "demo", successCallback, errorCallback);

}

Step 4 : Serverside code Controller

[HttpPost]

public JsonResult SaveThumb(string fid)
{
    if (Request.Files.Count > 0)
    {

        try
        {

            // fid is file name . In my case it is a number recid
            HttpFileCollectionBase files = Request.Files;
            HttpPostedFileBase file = files[0];
            string fname = fid + ".jpg";
            // Place your path here
            fname = Path.Combine(Server.MapPath("~/AppImage/thumb/"), fname);
            file.SaveAs(fname);
            return Json("1", JsonRequestBehavior.AllowGet);
        }
        catch (Exception ex)
        {
            return Json("Error occurred. Error details: " + ex.Message);
        }

    }
    else
    {
        return Json("No files selected.");
    }

}

Next Topic