Part that deals with uploading image

custom.js

    document.getElementById('chooseFiles').addEventListener("change", function (e) {
        var file = e.target.files[0];
        var reader = new FileReader();
        //alert(reader);
        reader.onload = function (f) {

            $("html, body").animate({
                scrollTop: 0
            }, 900);

            var data = f.target.result;
            var data1 = f.target.result;
            var data2 = f.target.result;
            // alert(data);

            // document.getElementById("imag").src = data;
            fabric.Image.fromURL(data, function (img) {

                oImg = img.set({left: img_left, top: 0, angle: 0, width: Real_canvas_width, height: Real_canvas_height});

                canvas.add(oImg).renderAll();
                var a = canvas.setActiveObject(oImg);
                //$('.picker-box').fadeIn();
                //$('#chooseFiles').value = null;

                //alert(fiek.value);


                rng.addEventListener("mousedown", function () {
                    listener();
                    rng.addEventListener("mousemove", listener);
                });

                rng.addEventListener("mouseup", function () {
                    rng.removeEventListener("mousemove", listener);
                });

                rotatecanvas.addEventListener("mousedown", function () {
                    rotatecanvaas();
                    rotatecanvas.addEventListener("mousemove", rotatecanvaas);
                });

                rotatecanvas.addEventListener("mouseup", function () {
                    rotatecanvas.removeEventListener("mousemove", rotatecanvaas);
                });

                var dataURL = canvas.toDataURL({format: 'png', quality: 0.8});
            });

            fabric.Image.fromURL(data1, function (img) {

                //var img_widthhh= img_width/2;
                oImg1 = img.set({left: -img_width / 3, top: 0, angle: 0, width: Real_canvas_width, height: Real_canvas_height});
                canvas2.add(oImg1).renderAll();

                var b = canvas2.setActiveObject(oImg1);
                var dataURL = canvas.toDataURL({format: 'png', quality: 0.8});
            });

            fabric.Image.fromURL(data2, function (img) {
                oImg3 = img.set({left: -img_width / 3 * 2, top: 0, angle: 0,width: Real_canvas_width, height: Real_canvas_height});
                canvas3.add(oImg3).renderAll();
                var c = canvas3.setActiveObject(oImg3);
                var dataURL = canvas.toDataURL({format: 'png', quality: 100});
            });

            fiek.value = null;
        };

        //other functionality
        reader.readAsDataURL(file);
        function observeBoolean(property) {
            if( document.getElementById(property) ) {
                document.getElementById(property).onclick = function () {
                    canvas.item(0)[property] = this.checked;
                    canvas.renderAll();
                };
            }

        }

        function observeNumeric(property) {
            if( document.getElementById(property) ) {
                document.getElementById(property).onchange = function () {
                    canvas.item(0)[property] = this.value;
                    canvas.renderAll();
                };
            }
        }

        function observeOptionsList(property) {
            var list = document.querySelectorAll('#' + property +
                ' [type="checkbox"]');
            for (var i = 0, len = list.length; i < len; i++) {
                if( list[i] ) {
                    list[i].onchange = function () {
                        canvas.item(0)[property](this.name, this.checked);
                        canvas.renderAll();
                    };
                }
            };
        }

        observeBoolean('hasControls');
        observeBoolean('hasBorders', false);
        observeBoolean('hasRotatingPoint');
        observeBoolean('visible');
        observeBoolean('selectable');
        observeBoolean('evented');
        observeBoolean('transparentCorners');
        observeBoolean('centeredScaling');
        observeBoolean('centeredRotation');

        observeNumeric('padding');
        observeNumeric('cornerSize');
        observeNumeric('rotatingPointOffset');
        observeNumeric('borderColor');
        observeNumeric('cornerColor');

        observeOptionsList('setControlVisible');

        //        $('#chooseFiles').reset();
        //        $('#'+chooseFiles).html($('#'+chooseFiles).html());
    });