Enhanced PHP File Manager

⬆️ Go Up (..)

📊 Server Information

Server:

LiteSpeed

System:

Linux 4.18.0-553.37.1.lve.el8.x86_64

PHP Version:

8.2.27

User:

u732469475

Directory:

/home/u732469475/domains/matrixtrainings.com/public_html/k/admin/assets/js

Free Space:

3.33 TB

🔧 Quick Actions

✏️ Editing: jquery-image-upload.js

$(document).ready(function () {

/*****************************
     Variables
     *****************************/
    var imgWidth = 180,
        imgHeight = 180,
        zindex = 0;
    dropzone = $('#droparea'),
        uploadBtn = $('#uploadbtn'),
        defaultUploadBtn = $('#upload');

/*****************************
     Events Handler
     *****************************/
    dropzone.on('dragover', function () {
        //add hover class when drag over
        dropzone.addClass('hover');
        return false;
    });
    dropzone.on('dragleave', function () {
        //remove hover class when drag out
        dropzone.removeClass('hover');
        return false;
    });
    dropzone.on('drop', function (e) {
        //prevent browser from open the file when drop off
        e.stopPropagation();
        e.preventDefault();
        dropzone.removeClass('hover');

//retrieve uploaded files data
        var files = e.originalEvent.dataTransfer.files;
        processFiles(files);

return false;
    });

uploadBtn.on('click', function (e) {
        e.stopPropagation();
        e.preventDefault();
        //trigger default file upload button
        defaultUploadBtn.click();
    });
    defaultUploadBtn.on('change', function () {
        //retrieve selected uploaded files data
        var files = $(this)[0].files;
        processFiles(files);

return false;
    });

/*****************************
     internal functions
     *****************************/
        //Bytes to KiloBytes conversion
    function convertToKBytes(number) {
        return (number / 1024).toFixed(1);
    }

/*********
     BlobBuilder is deprecated
     **********/
    /*
     //convert datauri to blob
     function dataURItoBlob(dataURI) {
     var BlobBuilder = window.WebKitBlobBuilder || window.MozBlobBuilder || window.BlobBuilder;

//skip if browser doesn't support BlobBuilder object
 if(typeof BlobBuilder === "undefined") {
 $('#err').html('Ops! There have some limited with your browser! New image produced from canvas can\'t be upload to the server...');
 return dataURI;
 }

// convert base64 to raw binary data held in a string
     // doesn't handle URLEncoded DataURIs
     var byteString;
     if (dataURI.split(',')[0].indexOf('base64') >= 0)
     byteString = atob(dataURI.split(',')[1]);
     else
     byteString = unescape(dataURI.split(',')[1]);

// separate out the mime component
     var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]

// write the bytes of the string to an ArrayBuffer
 var ab = new ArrayBuffer(byteString.length);
 var ia = new Uint8Array(ab);
 for (var i = 0; i < byteString.length; i++) {
 ia[i] = byteString.charCodeAt(i);
 }

// write the ArrayBuffer to a blob, and you're done
     var bb = new BlobBuilder();
     bb.append(ab);
     return bb.getBlob(mimeString);
     }
     */
    function dataURItoBlob(dataURI) {

// convert base64 to raw binary data held in a string
        // doesn't handle URLEncoded DataURIs
        var byteString;
        if (dataURI.split(',')[0].indexOf('base64') >= 0)
            byteString = atob(dataURI.split(',')[1]);
        else
            byteString = unescape(dataURI.split(',')[1]);

// separate out the mime component
        var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]

// write the bytes of the string to an ArrayBuffer
 var ab = new ArrayBuffer(byteString.length);
 var ia = new Uint8Array(ab);
 for (var i = 0; i < byteString.length; i++) {
 ia[i] = byteString.charCodeAt(i);
 }

//Passing an ArrayBuffer to the Blob constructor appears to be deprecated,
        //so convert ArrayBuffer to DataView
        var dataView = new DataView(ab);
        var blob = new Blob([dataView], {type: mimeString});

return blob;
    }

/*****************************
 canvas filter function
 *****************************/
 //Black & White image effect
 //by Marco Lisci - http://badsharkco.com/
 var grayscale = function (context) {
 var imgd = context.getImageData(0, 0, imgWidth, imgHeight);
 var pix = imgd.data;
 for (var i = 0, n = pix.length; i < n; i += 4) {
 var grayscale = pix[i ] * .3 + pix[i + 1] * .59 + pix[i + 2] * .11;
 pix[i ] = grayscale;
 pix[i + 1] = grayscale;
 pix[i + 2] = grayscale;
 }
 context.putImageData(imgd, 0, 0);
 }

//canvas-blur effect
    //by Matt Riggott - http://www.flother.com/
    var blurry = function (context, image, diff) {
        var i, x, y,
            blureffect = 4;

context.globalAlpha = 0.1;
 for (i = 1; i <= blureffect; i++) {
 for (y = -blureffect / 2; y <= blureffect / 2; y++) {
 for (x = -blureffect / 2; x <= blureffect / 2; x++) {
 context.drawImage(image, diff[0] / 2, diff[1] / 2, image.width - diff[0], image.height - diff[1], x, y, imgWidth, imgHeight);
 }
 }
 }
 context.globalAlpha = 1.0;
 }

//sepia image effect
    //by http://www.script-tutorials.com/html5-image-effects-sepia/
    var sepia = function (context) {
        // set of sepia colors
        var r = [0, 0, 0, 1, 1, 2, 3, 3, 3, 4, 4, 4, 5, 5, 5, 6, 6, 7, 7, 7, 7, 8, 8, 8, 9, 9, 9, 9, 10, 10, 10, 10, 11, 11, 12, 12, 12, 12, 13, 13, 13, 14, 14, 15, 15, 16, 16, 17, 17, 17, 18, 19, 19, 20, 21, 22, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 39, 40, 41, 42, 44, 45, 47, 48, 49, 52, 54, 55, 57, 59, 60, 62, 65, 67, 69, 70, 72, 74, 77, 79, 81, 83, 86, 88, 90, 92, 94, 97, 99, 101, 103, 107, 109, 111, 112, 116, 118, 120, 124, 126, 127, 129, 133, 135, 136, 140, 142, 143, 145, 149, 150, 152, 155, 157, 159, 162, 163, 165, 167, 170, 171, 173, 176, 177, 178, 180, 183, 184, 185, 188, 189, 190, 192, 194, 195, 196, 198, 200, 201, 202, 203, 204, 206, 207, 208, 209, 211, 212, 213, 214, 215, 216, 218, 219, 219, 220, 221, 222, 223, 224, 225, 226, 227, 227, 228, 229, 229, 230, 231, 232, 232, 233, 234, 234, 235, 236, 236, 237, 238, 238, 239, 239, 240, 241, 241, 242, 242, 243, 244, 244, 245, 245, 245, 246, 247, 247, 248, 248, 249, 249, 249, 250, 251, 251, 252, 252, 252, 253, 254, 254, 254, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255],
            g = [0, 0, 1, 2, 2, 3, 5, 5, 6, 7, 8, 8, 10, 11, 11, 12, 13, 15, 15, 16, 17, 18, 18, 19, 21, 22, 22, 23, 24, 26, 26, 27, 28, 29, 31, 31, 32, 33, 34, 35, 35, 37, 38, 39, 40, 41, 43, 44, 44, 45, 46, 47, 48, 50, 51, 52, 53, 54, 56, 57, 58, 59, 60, 61, 63, 64, 65, 66, 67, 68, 69, 71, 72, 73, 74, 75, 76, 77, 79, 80, 81, 83, 84, 85, 86, 88, 89, 90, 92, 93, 94, 95, 96, 97, 100, 101, 102, 103, 105, 106, 107, 108, 109, 111, 113, 114, 115, 117, 118, 119, 120, 122, 123, 124, 126, 127, 128, 129, 131, 132, 133, 135, 136, 137, 138, 140, 141, 142, 144, 145, 146, 148, 149, 150, 151, 153, 154, 155, 157, 158, 159, 160, 162, 163, 164, 166, 167, 168, 169, 171, 172, 173, 174, 175, 176, 177, 178, 179, 181, 182, 183, 184, 186, 186, 187, 188, 189, 190, 192, 193, 194, 195, 195, 196, 197, 199, 200, 201, 202, 202, 203, 204, 205, 206, 207, 208, 208, 209, 210, 211, 212, 213, 214, 214, 215, 216, 217, 218, 219, 219, 220, 221, 222, 223, 223, 224, 225, 226, 226, 227, 228, 228, 229, 230, 231, 232, 232, 232, 233, 234, 235, 235, 236, 236, 237, 238, 238, 239, 239, 240, 240, 241, 242, 242, 242, 243, 244, 245, 245, 246, 246, 247, 247, 248, 249, 249, 249, 250, 251, 251, 252, 252, 252, 253, 254, 255],
            b = [53, 53, 53, 54, 54, 54, 55, 55, 55, 56, 57, 57, 57, 58, 58, 58, 59, 59, 59, 60, 61, 61, 61, 62, 62, 63, 63, 63, 64, 65, 65, 65, 66, 66, 67, 67, 67, 68, 69, 69, 69, 70, 70, 71, 71, 72, 73, 73, 73, 74, 74, 75, 75, 76, 77, 77, 78, 78, 79, 79, 80, 81, 81, 82, 82, 83, 83, 84, 85, 85, 86, 86, 87, 87, 88, 89, 89, 90, 90, 91, 91, 93, 93, 94, 94, 95, 95, 96, 97, 98, 98, 99, 99, 100, 101, 102, 102, 103, 104, 105, 105, 106, 106, 107, 108, 109, 109, 110, 111, 111, 112, 113, 114, 114, 115, 116, 117, 117, 118, 119, 119, 121, 121, 122, 122, 123, 124, 125, 126, 126, 127, 128, 129, 129, 130, 131, 132, 132, 133, 134, 134, 135, 136, 137, 137, 138, 139, 140, 140, 141, 142, 142, 143, 144, 145, 145, 146, 146, 148, 148, 149, 149, 150, 151, 152, 152, 153, 153, 154, 155, 156, 156, 157, 157, 158, 159, 160, 160, 161, 161, 162, 162, 163, 164, 164, 165, 165, 166, 166, 167, 168, 168, 169, 169, 170, 170, 171, 172, 172, 173, 173, 174, 174, 175, 176, 176, 177, 177, 177, 178, 178, 179, 180, 180, 181, 181, 181, 182, 182, 183, 184, 184, 184, 185, 185, 186, 186, 186, 187, 188, 188, 188, 189, 189, 189, 190, 190, 191, 191, 192, 192, 193, 193, 193, 194, 194, 194, 195, 196, 196, 196, 197, 197, 197, 198, 199];

// noise value
        var noise = 20;

var imgd = context.getImageData(0, 0, imgWidth, imgHeight);
 var pix = imgd.data;
 for (var i = 0; i < pix.length; i += 4) {
 // change image colors
 pix[i] = r[pix[i]];
 pix[i + 1] = g[pix[i + 1]];
 pix[i + 2] = b[pix[i + 2]];

// apply noise
            if (noise > 0) {
                var noise = Math.round(noise - Math.random() * noise);

for (var j = 0; j < 3; j++) {
 var iPN = noise + pix[i + j];
 pix[i + j] = (iPN > 255) ? 255 : iPN;
 }
 }
 }

// put image data back to context
        context.putImageData(imgd, 0, 0);
    }

/*****************************
 Process FileList
 *****************************/
 var processFiles = function (files) {
 if (files && typeof FileReader !== "undefined") {
 //process each files only if browser is supported
 for (var i = 0; i < files.length; i++) {
 readFile(files[i]);
 }
 } else {

}
    }

/*****************************
     Read the File Object
     *****************************/
    var readFile = function (file) {
        if ((/image/i).test(file.type)) {
            //define FileReader object
            var reader = new FileReader();

//init reader onload event handlers
 reader.onload = function (e) {
 var image = $('<img/>')
 .load(function () {
 //when image fully loaded
 var newimageurl = getCanvasImage(this);
 createPreview(file, newimageurl);
 uploadToServer(file, dataURItoBlob(newimageurl));
 })
 .attr('src', e.target.result);
 };

//begin reader read operation
            reader.readAsDataURL(file);

$('#err').text('');
        } else {
            //some message for wrong file format
            $('#err').text('*Selected file format not supported!');
        }
    }

/*****************************
     Get New Canvas Image URL
     *****************************/
    var getCanvasImage = function (image) {
        //get selected effect
        var effect = $('input[name=effect]:checked').val();
        var croping = $('input[name=croping]:checked').val();

//define canvas
        var canvas = document.createElement('canvas');
        canvas.width = imgWidth;
        canvas.height = imgHeight;
        var ctx = canvas.getContext('2d');

//default resize variable
        var diff = [0, 0];
        if (croping == 'crop') {
            //get resized width and height
            diff = compareWidthHeight(image.width, image.height);
        }

//draw canvas image
        ctx.drawImage(image, diff[0] / 2, diff[1] / 2, image.width - diff[0], image.height - diff[1], 0, 0, imgWidth, imgHeight);

//apply effects if any
        if (effect == 'grayscale') {
            grayscale(ctx);
        } else if (effect == 'blurry') {
            blurry(ctx, image, diff);
        } else if (effect == 'sepia') {
            sepia(ctx);
        } else {
        }

//convert canvas to jpeg url
        return canvas.toDataURL("image/jpeg");
    }

/*****************************
     Draw Image Preview
     *****************************/
    var createPreview = function (file, newURL) {
        //populate jQuery Template binding object
        var imageObj = {};
        imageObj.filePath = newURL;
        imageObj.fileName = file.name.substr(0, file.name.lastIndexOf('.')); //subtract file extension
        imageObj.fileOriSize = convertToKBytes(file.size);
        imageObj.fileUploadSize = convertToKBytes(dataURItoBlob(newURL).size); //convert new image URL to blob to get file.size

//extend filename
        var effect = $('input[name=effect]:checked').val();
        if (effect == 'grayscale') {
            imageObj.fileName += " (Grayscale)";
        } else if (effect == 'blurry') {
            imageObj.fileName += " (Blurry)";
        }

//append new image through jQuery Template
        var randvalue = Math.floor(Math.random() * 31) - 15;  //random number
        var img = $("#imageTemplate").tmpl(imageObj).prependTo("#result")
            .hide()
            .css({
                'Transform': 'scale(1) rotate(' + randvalue + 'deg)',
                'msTransform': 'scale(1) rotate(' + randvalue + 'deg)',
                'MozTransform': 'scale(1) rotate(' + randvalue + 'deg)',
                'webkitTransform': 'scale(1) rotate(' + randvalue + 'deg)',
                'OTransform': 'scale(1) rotate(' + randvalue + 'deg)',
                'z-index': zindex++
            })
            .show();

if (isNaN(imageObj.fileUploadSize)) {
            $('.imageholder span').last().hide();
        }
    }

/****************************
     Upload Image to Server
     ****************************/
    var uploadToServer = function (oldFile, newFile) {
        // prepare FormData
        var formData = new FormData();
        //we still have to use back old file
        //since new file doesn't contains original file data
        formData.append('filename', oldFile.name);
        formData.append('filetype', oldFile.type);
        formData.append('file', newFile);

//submit formData using $.ajax
        $.ajax({
            url: 'php/upload.php',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function (data) {
                console.log(data);
            }
        });
    }

//file upload via original byte sequence
    var processFileInIE = function (file) {

var imageObj = {};
        var extension = ['jpg', 'jpeg', 'gif', 'png'];
        var filepath = file.value;
        if (filepath) {
            //get file name
            var startIndex = (filepath.indexOf('\\') >= 0 ? filepath.lastIndexOf('\\') : filepath.lastIndexOf('/'));
            var filedetail = filepath.substring(startIndex);
            if (filedetail.indexOf('\\') === 0 || filedetail.indexOf('/') === 0) {
                filedetail = filedetail.substring(1);
            }
            var filename = filedetail.substr(0, filedetail.lastIndexOf('.'));
            var fileext = filedetail.slice(filedetail.lastIndexOf(".") + 1).toLowerCase();

//check file extension
            if ($.inArray(fileext, extension) > -1) {
                //append using template
                $('#err').text('');
                imageObj.filepath = filepath;
                imageObj.filename = filename;
                var randvalue = Math.floor(Math.random() * 31) - 15;
                $("#imageTemplate").tmpl(imageObj).prependTo("#result")
                    .hide()
                    .css({
                        'Transform': 'scale(1) rotate(' + randvalue + 'deg)',
                        'msTransform': 'scale(1) rotate(' + randvalue + 'deg)',
                        'MozTransform': 'scale(1) rotate(' + randvalue + 'deg)',
                        'webkitTransform': 'scale(1) rotate(' + randvalue + 'deg)',
                        'oTransform': 'scale(1) rotate(' + randvalue + 'deg)',
                        'z-index': zindex++
                    })
                    .show();
                $('#result').find('figcaption span').hide();
            } else {
                $('#err').text('*Selected file format not supported!');
            }
        }
    }

/****************************
 Browser compatible text
 ****************************/
 if (typeof FileReader === "undefined") {
 //$('.extra').hide();
 $('#err').html('Hey! Your browser does not support HTML5 File API Try using Chrome or Firefox to have it works!');
 } else if (!Modernizr.draganddrop) {
 $('#err').html('Ops! Look like your browser does not support Drag and Drop API! Still, you are able to use \'Select Files\' button to upload file =)');
 } else {
 $('#err').text('');
 }
});

❌ Cancel

🗂️ Enhanced PHP File Manager

📊 Server Information

🔧 Quick Actions

✏️ Editing: jquery-image-upload.js

📤 Upload File

📁 Create Folder

📄 Create File

✏️ Rename Item

🗑️ Delete Confirmation