How to generate a thumbnail image after adding an image inside an input type="file" in a form and submitting them both on the same form
I have a form which allows the user to upload a picture. After the user has submitted the form, I'd like to generate on the front-end a thumbnail for each picture and then store it on server.
For security reason it's not possible to alter the value of a file input field, so how could I send to server some thumbnails images generated on the front-end in js?
Is it possible on front-end to generate a thumbnail from the image set in the input file field before form submit? And then submitting both at same time?
I found This simpler yet powerful tutorial. It simply creates an img element and, using the fileReader object, assigns its source attribute as the value of the form input
function previewFile() {
var preview = document.querySelector('img');
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();
reader.onloadend = function () {
preview.src = reader.result;
}
if (file) {
reader.readAsDataURL(file);
} else {
preview.src = "";
}
}<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">After a better search online I found the answer to my question.
It is possible to combine canvas together with the File API.
Try to upload any picture in the demo below and see that a new generated thumbnail will appear on the right side of the form.
DEMO: http://jsfiddle.net/a_incarnati/fua75hpv/
function handleImage(e){
var reader = new FileReader();
reader.onload = function(event){
var img = new Image();
img.onload = function(){
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img,0,0);
}
img.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);
}
A good answer has been given by DerekR to this question:
How to upload image into HTML5 canvas
Building on top of what Allesandro wrote to something more pragmatic.
The function takes a file from the File API and tries to fit it in the boundBox while preserving the aspect ratio. Nothing is drawn, but instead you get back a Promise that spits the dataUrl generated.
// Creates a thumbnail fitted insize the boundBox (w x h)
generateThumbnail(file, boundBox){
if (!boundBox || boundBox.length != 2){
throw "You need to give the boundBox"
}
var scaleRatio = Math.min(...boundBox) / Math.max(file.width, file.height)
var reader = new FileReader();
var canvas = document.createElement("canvas")
var ctx = canvas.getContext('2d');
return new Promise((resolve, reject) => {
reader.onload = function(event){
var img = new Image();
img.onload = function(){
var scaleRatio = Math.min(...boundBox) / Math.max(img.width, img.height)
let w = img.width*scaleRatio
let h = img.height*scaleRatio
canvas.width = w;
canvas.height = h;
ctx.drawImage(img, 0, 0, w, h);
return resolve(canvas.toDataURL(file.type))
}
img.src = event.target.result;
}
reader.readAsDataURL(file);
})
}
It can be used like below
generateThumbnail(file, [300, 300]).then(function(dataUrl){
console.log(dataUrl)
})
TL;DR: See the JSFiddle
As I wanted to upload images via an API and show a preview of the image (two things that actually lended themselves well to each other), I came up with this:
(function(angular) {
angular
.module('app')
.directive('inputFilePreview', [function() {
var canvas, mapToModel, elementScope;
/**
* To be fired when the image has been loaded
*/
var imageOnLoad = function(){
canvas.width = this.width;
canvas.height = this.height;
canvas.getContext("2d").drawImage(this,0,0);
};
/**
* To be fired when the FileReader has loaded
* @param loadEvent {{}}
*/
var readerOnLoad = function(loadEvent){
var img = new Image();
img.onload = imageOnLoad;
img.src = loadEvent.target.result;
if(mapToModel) {
setModelValue(elementScope, mapToModel, img.src);
}
};
/**
* This allows us to set the value of a model in the scope of the element (or global scope if the
* model is an object)
* @param scope {{}}
* @param modelReference {string}
* @param value {*}
*/
var setModelValue = function(scope, modelReference, value) {
// If the model reference refers to the propery of an object (eg. "object.property")
if(~modelReference.indexOf('.')) {
var parts = modelReference.split('.', 2);
// Only set the value if that object already exists
if(scope.hasOwnProperty(parts[0])) {
scope[parts[0]][parts[1]] = value;
return;
}
}
scope[modelReference] = value;
};
/**
* The logic for our directive
* @param scope {{}}
* @param element {{}}
* @param attributes {{}}
*/
var link = function(scope, element, attributes) {
elementScope = scope;
canvas = document.getElementById(attributes.inputFilePreview);
if(attributes.hasOwnProperty('mapToModel')) {
mapToModel = attributes.mapToModel;
}
element.on('change', function(changeEvent) {
var reader = new FileReader();
reader.onload = readerOnLoad;
reader.readAsDataURL(changeEvent.target.files[0]);
});
};
return {
restrict: 'A',
link: link
};
}]);
})(angular);
The two elements needed for the preview to work are:
<canvas id="image-preview"></canvas>
<input type="file" data-input-file-preview="image-preview" data-map-to-model="image.file" />
Snippet Follows:
(function (angular) {
angular.module('app', [])
.directive('inputFilePreview', [function () {
var canvas, mapToModel, elementScope;
/**
* To be fired when the image has been loaded
*/
var imageOnLoad = function () {
canvas.width = this.width;
canvas.height = this.height;
canvas.getContext("2d").drawImage(this, 0, 0);
};
/**
* To be fired when the FileReader has loaded
* @param loadEvent {{}}
*/
var readerOnLoad = function (loadEvent) {
var img = new Image();
img.onload = imageOnLoad;
img.src = loadEvent.target.result;
if (mapToModel) {
setModelValue(elementScope, mapToModel, img.src);
}
};
/**
* This allows us to set the value of a model in the scope of the element (or global scope if the
* model is an object)
* @param scope {{}}
* @param modelReference {string}
* @param value {*}
*/
var setModelValue = function (scope, modelReference, value) {
// If the model reference refers to the propery of an object (eg. "object.property")
if (~modelReference.indexOf('.')) {
var parts = modelReference.split('.', 2);
// Only set the value if that object already exists
if (scope.hasOwnProperty(parts[0])) {
scope[parts[0]][parts[1]] = value;
return;
}
}
scope[modelReference] = value;
};
/**
* The logic for our directive
* @param scope {{}}
* @param element {{}}
* @param attributes {{}}
*/
var link = function (scope, element, attributes) {
elementScope = scope;
canvas = document.getElementById(attributes.inputFilePreview);
if (attributes.hasOwnProperty('mapToModel')) {
mapToModel = attributes.mapToModel;
}
element.on('change', function (changeEvent) {
var reader = new FileReader();
reader.onload = readerOnLoad;
reader.readAsDataURL(changeEvent.target.files[0]);
});
};
return {
restrict: 'A',
link: link
};
}])
.controller('UploadImageController', [
'$scope',
function ($scope) {
$scope.image = {
title: 'Test title'
};
$scope.send = function (data) {
$scope.sentData = JSON.stringify(data, null, 2);
return false;
};
}]);
})(angular);canvas {
max-height: 300px;
max-width: 300px;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form data-ng-app="app" data-ng-controller="UploadImageController">
<input data-ng-model="image.title" />
<br />
<canvas id="image-preview"></canvas>
<br />
<input type="file" data-input-file-preview="image-preview" data-map-to-model="image.file" />
<br />
<input type="submit" data-ng-click="send(image)" />
<pre>{{sentData}}</pre>
</form>