Resize images before uploading it to the server
21 Dec 202223 minutes to read
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.
@{
var asyncSettings = new Syncfusion.EJ2.Inputs.UploaderAsyncSettings { SaveUrl = "https://services.syncfusion.com/aspnet/production/api/FileUploader/Save", RemoveUrl = "https://services.syncfusion.com/aspnet/production/api/FileUploader/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>#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;
}NOTE
You can also explore ASP.NET Core File Upload feature tour page for its groundbreaking features. You can also explore our ASP.NET Core File Upload example to understand how to browse the files which you want to upload to the server.