Sencha 이미지 사이즈 변경 후 업로드하기

이미지 사이즈 변경 및 rotation 처리

function resizeImage(file, callback) {
	const reader = new FileReader();
	reader.onload = function(e) {
		const img = new Image();
		img.src = e.target.result;
		
		img.onload = function() {
			let width = img.width;
			let height = img.height;
			let orientation = -1;
			
			EXIF.getData(img, function() {
				const exifOrientation = EXIF.getTag(this, "Orientation");
				if(exifOrientation) {
					orientation = exifOrientation;
				}
				
				const maxWidth = 1024;
				const maxHeight = 768;

				
				if(width > maxWidth || height > maxHeight) {
					const aspectRatio = width / height;
					if(width > height) {
						width = maxWidth;
						height = Math.floor(width /aspectRation);
					} else {
						height = maxHeight;
						width = Math.floor(height * aspectRatio);
					}
				}
				
				const canvas = document.createElement('canvas');
				const ctx = canvas.getContext('2d');

				
				if(orientation === 6) { // 90° rotated
					canvas.width = height;
					canvas.height = width;
					ctx.rotate(90 * Math.PI / 180);
					ctx.translate(0, -height);
				} else if(orientation === 8) { // 270° rotated
					canvas.width = height;
					canvas.height = width;
					ctx.rotate(-90 * Math.PI / 180);
					ctx.translate(-width, 0);
				} else if (orientation === 3) { // 180° rotated
                    canvas.width = width;
                    canvas.height = height;
                    ctx.rotate(180 * Math.PI / 180);
                    ctx.translate(-width, -height);
                } else {
                    canvas.width = width;
                    canvas.height = height;
                }
                
                ctx.drawImage(img, 0, 0, width, height);
                canvas.toBlob((blob) => {
					const resizedFile = new File([blob], file.name, { type: file.type });
					callback(resizedFile);
				}, file.tyupe, 0.9);
			});
		};		
	};
	reader.readAsDataURL(file);
}

팝업 처리

function uploadPopup() {
	const popupImage = Ext.create('Ext.window.Window', {
		title: '업로드 팝업',
		width: 400,
		height: 300,
		floating: true,
		constrain: false,
		modal: false,
		layout: 'fit',
		items: {
			xtype: 'form',
			bodyPadding: 10,
			frame: true,
			items: [
				{
					xtype: 'textfield',
					name: 'id',
					readOnly: true,
					hidden: true,
					value: id,
				},
				{
					xtype: 'filefield',
					name: 'file',
					fieldLabel: 'File',
					labelWidth: 50,
					allowBlank: false,
					buttonText: 'Browse...',
				},
			],
			buttons: [
				{
					text: 'Upload',
					handler: function() {
						const form = this.up('form').getForm();
						const fileInput = form.findField('file').fileInputEl.dom.files[0];
						const idHidden = form.findField('id').getValue();
						
						resizeImage(fileInput, (resizedFile) => {
							if(form.isValid()) {
								const formData = new FormData();
								formData.append('file', resizedFile);
								formData.append('id', idHidden);
								formData.append('_csrf', document.getElementById('_csrf').innerText);
								
								Ext.getBody().mask('Uploading file...');
								popupImage.setLoading('Uploading file...');
								
								Ext.Ajax.request({
									url: '/test/insert',
									rawData: formData,
									headers: {
										'Content-Type': undefined
									},
									success: function(response) {
										Ext.getBody().unmask(); // Remove loading mask on success
										popupImage.setLoading(false); // Remove loading mask on success
										const result = Ext.decode(response.responseText);
										popupImage.close();
									},
									failure: function(response) {
										Ext.getBody().unmask(); // Remove loading mask on success
										popupImage.setLoading(false); // Remove loading mask on success
										const result = Ext.decode(response.responseText);
										console.log(result);
										Ext.Msg.alert('Failure', 'File upload failed.');
									}
								});
							} else {
								Ext.Msg.alert('Validation Error', 'Please select a file before uploading.');
							}
						});
					}
				}
			]
		}
	});
	
	popupImage.show();
}