Search results

Resize images before uploading it to the server

You can customize the dimension of the images before uploading it to the server. By using selected event, you can get the selected file information as type of an object. From the obtained image file information, create a new canvas and render an image with the custom dimensions. Refer the corresponding code snippet as follows.

tagHelper
pre-resize.cs
index.css
@{
    var asyncSettings = new Syncfusion.EJ2.Inputs.UploaderAsyncSettings { SaveUrl = "https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save", RemoveUrl = "https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove" };
}
<div id='dropArea'>
    <span id='drop' class="droparea"> Drop files here or <a href="" id='browse'><u>Browse</u></a> </span>
    <ejs-uploader id="UploadFiles" allowedExtensions="image/*" removing="onFileRemove" dropArea="#dropArea" asyncSettings="@asyncSettings" selected="onFileSelect" success="onUploadSuccess" failure="onUploadFailed" progress="onFileUpload"></ejs-uploader>
</div>

<script>
    var uploadObj;
    window.onload = function () {
        uploadObj = document.getElementById("UploadFiles").ej2_instances[0];
    }
    function onFileRemove(args) {
        args.postRawFile = false;
    }
    var dropElement = document.getElementsByClassName('control-fluid')[0];
    var filesDetails = [];
    document.getElementById('browse').onclick = function () {
        document.getElementsByClassName('e-file-select-wrap')[0].querySelector('button').click();
        return false;
    };
    var parentElement; var proxy; var progressbarContainer; var newImage;
    function onFileSelect(args) {
        args.cancel = true;
        proxy = this;
        if (ej.base.isNullOrUndefined(document.getElementById('dropArea').querySelector('.upload-list-root'))) {
            parentElement = ej.base.createElement('div', { className: 'upload-list-root' });
            parentElement.appendChild(ej.base.createElement('ul', { className: 'ul-element' }));
            document.getElementById('dropArea').appendChild(parentElement);
        }
        for (var i = 0; i < args.filesData.length; i++) {
            formSelectedData(args.filesData[i], this);    // create the LI element for each file Data
        }
        this.filesData = this.filesData.concat(args.filesData);
        var file = args.filesData[0].rawFile;
        var width;
        var height;
        var img = document.createElement("img");
        var reader = new FileReader();
        reader.onload = function (e) { img.src = e.target.result; };
        reader.readAsDataURL(file);
        var imgs = new Image();
        img.onload = function () {
            width = this.width;
            height = this.height;
            onNewImg(height, width, img, args.filesData[0]);
        };
        imgs.src = img.src;
    }

    // to create canvas and update our custom dimensions
    function onNewImg(height, width, img, file) {
        var canvas = document.createElement("canvas");
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0);
        var MAX_WIDTH = 1000;
        var MAX_HEIGHT = 600;
        if (width > height) {
            if (width > MAX_WIDTH) {
                height *= MAX_WIDTH / width;
                width = MAX_WIDTH;
            }
        }
        else {
            if (height > MAX_HEIGHT) {
                width *= MAX_HEIGHT / height;
                height = MAX_HEIGHT;
            }
        }
        canvas.width = width;
        canvas.height = height;
        var ctx1 = canvas.getContext("2d");
        ctx1.drawImage(img, 0, 0, width, height);
        newImage = canvas.toDataURL("image/png");
        var blobBin = atob(newImage.split(',')[1]);
        var array = [];
        for (var i = 0; i < blobBin.length; i++) {
            array.push(blobBin.charCodeAt(i));
        }
        var newBlob = new Blob([new Uint8Array(array)], { type: 'image/png' });
        var newFile = createFile(newBlob, file);
        uploadObj.upload(newFile, true);
    }
    // To create File object to upload
    function createFile(image, file) {
        var newFile = {
            name: file.name,
            rawFile: image,
            size: image.size,
            type: file.type,
            validationMessage: '',
            statusCode: '1',
            status: 'Ready to Upload'
        };
        return newFile;
    }

    function formSelectedData(selectedFiles, proxy) {
        var liEle = ej.base.createElement('li', { className: 'file-lists', attrs: { 'data-file-name': selectedFiles.name } });
        liEle.appendChild(ej.base.createElement('span', { className: 'file-name ', innerHTML: selectedFiles.name }));
        liEle.appendChild(ej.base.createElement('span', { className: 'file-size ', innerHTML: proxy.bytesToSize(selectedFiles.size) }));
        if (selectedFiles.status === proxy.localizedTexts('readyToUploadMessage')) {
            progressbarContainer = ej.base.createElement('span', { className: 'progress-bar-container' });
            progressbarContainer.appendChild(ej.base.createElement('progress', { className: 'progress', attrs: { value: '0', max: '100' } }));
            liEle.appendChild(progressbarContainer);
        }
        else {
            liEle.querySelector('.file-name').classList.add('upload-fails');
        }
        var closeIconContainer = ej.base.createElement('span', { className: 'e-icons close-icon-container' });
        ej.base.EventHandler.add(closeIconContainer, 'click', removeFiles, proxy);
        liEle.appendChild(closeIconContainer);
        document.querySelector('.ul-element').appendChild(liEle);
        proxy.fileList.push(liEle);
    }
    function onFileUpload(args) {
        var li = document.getElementById('dropArea').querySelector('[data-file-name="' + args.file.name + '"]');
        ej.base.EventHandler.remove(li.querySelector('.close-icon-container'), 'click', removeFiles);
        var progressValue = Math.round((args.e.loaded / args.e.total) * 100);
        if (!isNaN(progressValue)) {
            li.getElementsByTagName('progress')[0].value = progressValue;   // Updating the progress bar value
        }
    }
    function onUploadSuccess(args) {
        var _this = this;
        var spinnerElement = document.getElementById('dropArea');
        var li = document.getElementById('dropArea').querySelector('[data-file-name="' + args.file.name + '"]');
        if (!ej.base.isNullOrUndefined(li.querySelector('.progress-bar-container'))) {
            ej.base.detach(li.querySelector('.progress-bar-container'));
        }
        if (args.operation === 'upload') {
            li.querySelector('.file-name').classList.add('upload-success');
            li.querySelector('.close-icon-container').classList.add('delete-icon');
            (li.querySelector('.close-icon-container')).onclick = function () {
                generateSpinner(_this.uploadWrapper);
            };
            li.querySelector('.close-icon-container').onkeydown = function (e) {
                if (e.keyCode === 13) {
                    generateSpinner(e.target.closest('.e-upload'));
                }
            };
        }
        if (args.operation === 'remove') {
            this.filesData.splice(this.fileList.indexOf(li), 1);
            this.fileList.splice(this.fileList.indexOf(li), 1);
            ej.base.detach(li);
            ej.popups.hideSpinner(spinnerElement);
            ej.base.detach(spinnerElement.querySelector('.e-spinner-pane'));
        }
        ej.base.EventHandler.add(li.querySelector('.close-icon-container'), 'click', removeFiles, this);
        console.log("The selected file resized and uploaded successfully");
    }
    function generateSpinner(targetElement) {
        ej.popups.createSpinner({ target: targetElement, width: '25px' });
        ej.popups.showSpinner(targetElement);
    }
    function onUploadFailed(args) {
        var li = document.getElementById('dropArea').querySelector('[data-file-name="' + args.file.name + '"]');
        ej.base.EventHandler.add(li.querySelector('.close-icon-container'), 'click', removeFiles, this);
        li.querySelector('.file-name ').classList.add('upload-fails');
        if (args.operation === 'upload') {
            ej.base.detach(li.querySelector('.progress-bar-container'));
        }
    }
    function removeFiles(args) {
        var removeFile = this.filesData[this.fileList.indexOf(args.currentTarget.parentElement)];
        var statusCode = removeFile.statusCode;
        if (statusCode === '2') {
            this.remove(removeFile, true);
        } else {
            var li = args.currentTarget.parentElement;
            ej.base.detach(li);
        }
    }
</script>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers.Uploader
{
    public partial class UploaderController : Controller
    {
        public ActionResult Template()
        {
            return View();
        }
    }
}
#dropArea {
    min-height: 50px;
    padding-top: 15px;
    position: relative;
}

#drop {
    padding: 3% 30% 3%;
    display: inherit;
    border: 1px dashed #c3c3cc
}

.droparea {
    font-size: 13px;
}
.e-file-select-wrap {
    display: none;
}

.e-upload {
    float: none;
    border: none;
}

.ul-element {
    list-style: none;
    width: 100%;
    padding-left: 0;
}

.file-name {
    padding: 8px 6px 8px 0;
    font-size: 13px;
    width: 46%;
    display: inline-block;
    position: relative;
    top: 4px;
}

.file-size {
    padding: 4px;
    font-size: 13px;
    width: 18%;
    display: inline-block;
    position: relative;
}

.file-lists {
    border: 1px solid lightgray;
    padding: 0 6px 0 14px;
    margin-top: 15px;
    position: relative;
    background: rgba(0, 0, 0, 0.04);
}

.file-size, .file-name {
    font-family: "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

span.progress-bar-container {
    display: block;
    float: right;
    height: 20px;
    right: 13%;
    top: 14px;
    position: relative;
    width: 20%;
}

.progress {
    width: 100%;
    height: 15px;
    -webkit-appearance: none;
}

.close-icon-container {
    cursor: pointer;
    font-size: 11px;
    height: 24px;
    margin: 0 12px 0 22px;
    padding: 0;
    position: absolute;
    right: 0;
    width: 24px;
    top: 6px;
}

    .close-icon-container.e-icons::before {
        left: 7px;
        position: inherit;
        top: 7px;
        content: '\e932';
    }

    .close-icon-container.delete-icon::before {
        content: '\e94a';
    }

    .close-icon-container:hover {
        background-color: rgba(0, 0, 0, 0.12);
        border-color: transparent;
        border-radius: 50%;
        box-shadow: 0 0 0 transparent;
    }

.highcontrast .close-icon-container:hover {
    background-color: #ffd939;
    color: black;
}

.highcontrast .close-icon-container {
    color: #ffffff;
}

.upload-success {
    color: #2bc700;
}

.upload-fails {
    color: #f44336;
}

progress::-webkit-progress-bar {
    border: 1px solid lightgrey;
    background-color: #ffffff;
    border-radius: 2px;
}

#dropArea progress {
    border: 1px solid lightgrey;
    background-color: #ffffff;
    border-radius: 2px;
}

progress::-webkit-progress-value {
    border-radius: 2px;
    background-color: #ff4081;
}

progress::-moz-progress-bar {
    border-radius: 2px;
    background-color: #ff4081;
}

#dropArea span a {
    color: #ff4081;
}