We Keep Coding

Only accept photos smaller than 1920x1080

How do I only accept photos (from the file explorer) smaller that 1920x1080. Otherwise, my entire webpage get flooded with one image. Here is my code for importing the photos:
Html:
<input type="file" id="file" accept="image/png, img/jpeg">
Javascript:
function Read(){
var file = document.getElementById("file").files[0];
var reader = new FileReader();
reader.onload = function(e) {
var image = document.createElement("img");
// the result image data
image.src = e.target.result;
document.body.appendChild(image);
}
reader.readAsDataURL(file);
}

You can use Canvas to resize bigger images.
<input type="file" id="file" accept="image/png, img/jpeg" #change="selectFile">
selectFile: function (list)
{
const self = this, limitWidth = 1920, limitHeight = 1080, len = list.length;
let i, item, cnt = len;
events.$emit('show_spinner');
for(i=0;i<len;i++)
if(list[i].size)
{
item = list[i];
const reader = new FileReader(), img = new Image(), canvas = document.createElement('canvas');
reader.onload = function (e)
{
img.v_name = this.v_name;
img.v_size = this.v_size;
img.src = e.target.result;
};
reader.onerror = function ()
{
events.$emit('hide_spinner');
};
img.onerror = function ()
{
events.$emit('hide_spinner');
};
img.onload = function ()
{
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
// preserve aspect ratio
if(canvas.width > limitWidth)
{
canvas.width = limitWidth;
canvas.height = limitWidth * img.naturalHeight / img.naturalWidth;
}
if(canvas.height > limitHeight)
{
canvas.height = limitHeight;
canvas.width = limitHeight * img.naturalWidth / img.naturalHeight;
}
// implicit width and height in order to stretch the image to canvas
canvas.getContext("2d").drawImage(img, 0, 0, canvas.width, canvas.height);
self.fileArray.push(
{
name: this.v_name,
size: this.v_size,
src: canvas.toDataURL('image/jpeg', 0.8),
id: Date.now()
}
);
cnt--;
if(cnt==0) events.$emit('hide_spinner');
};
reader.v_name = item.name;
reader.v_size = item.size;
reader.readAsDataURL(item);
}
},

You don't need to check the image size. you can just use css for resizing the image so it doesn't fill up the page.
img {
width: 100%;
max-width: 300px;
/** height will be automatically calculated */
}
this way images won't be wider than 300 pixels and they won't fill up your entire page.

Compress Image In Javascript using Telerik AsyncUpload

I have created a javascript function that compresses the JPEG image. It is working fine for JPEG files. But even user can upload xls,doc,pdf etc as well. So its breaking for any other files except JPG/JPEG. User can also upload other types of files as well. Only the JPG/JPEG needs to be compressed.
Else part is working perfectly fine. Need to fix the If part.
function OnClientFileSelected(radAsyncUpload, args) {
var old_uploadFile = radAsyncUpload._uploadModule._uploadFile;
var fileName = args.get_fileName();
var fileExtention = fileName.substring(fileName.lastIndexOf('.') + 1, fileName.length);
if (fileExtention.toLowerCase() != 'jpg' && fileExtention.toLowerCase() != 'jpeg') {
radAsyncUpload._uploadModule._uploadFile = function (pair) {
var uploadFile = pair.file;
//return uploadFile;
var reader = new FileReader();
reader.readAsDataURL(uploadFile);
}
}
else {
radAsyncUpload._uploadModule._uploadFile = function (pair) {
var uploadFile = pair.file;
var img = document.createElement("img");
var canvas = document.createElement("canvas");
var reader = new FileReader();
reader.onload = function (e) {
img.src = e.target.result
img.onload = function () {
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var greaterDimension = 0;
var newPixelMultiplier = 1;
if (img.width > img.height)
greaterDimension = img.width;
else
greaterDimension = img.height;
if (greaterDimension > 1000) {
newPixelMultiplier = ((((greaterDimension - 1000) / 2) + 1000) / greaterDimension);
}
var MAX_WIDTH = img.width * newPixelMultiplier;
var MAX_HEIGHT = img.height * newPixelMultiplier;
var width = img.width;
var height = img.height;
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 ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height);
canvas.toBlob(function (blob) {
blob.lastModifiedDate = new Date();
blob.name = pair.file.name;
pair.file = blob;
old_uploadFile.call(this, pair)
}, 'image/jpeg', 0.6); //Set the Quality of Image...
}
}
reader.readAsDataURL(uploadFile);
}
}
}

It seems that the code for the resizing is from the following KB article: Preview uploaded image with RadAsyncUpload.
If that is the case, I can suggest that you that you keep the code as it is, or use it in the OnClientLoad event of the AsyncUpload control, as in your case it will be overridden on every file that is being selected.
Regarding your question in point, I can suggest you try to call the old_uploadFile as follows:
if (/*is not image condition here*/) {
old_uploadFile.call(radAsyncUpload, pair);
}
If the code from the KB is used, then it should be similar to this:
asyncupload._uploadModule._uploadFile = function (pair) {
var uploadFile = pair.file;
if (/*is not image condition here*/) {
old_uploadFile.call(this, pair);
return;
}
// rest of code for resizing images here
}

Javascript FormData() File Upload to S3 works in Chrome but not in Safari

Working on a web app, I have image files going directly to the S3 bucket from the browser. This works well in Chrome, but in Safari there are no errors, but the code ends up uploading an empty file to the S3 bucket. Everything basically looks like it works in Safari, the S3 server even returns a 204 successful http response, and the file looks like it is in the bucket (but has a size of 0 bytes).
I debugging, and the blobData has size 55747 in Chrome but only size 47560 in Safari for the same image. Also, I have found what looks slightly different is in the networking section dev tools:
Chrome - working (204 response has positive size ~ 534B):
Safari - not working with empty file ( size column shows just a dash line )
Here is the JS upload code:
function uploadFile(data_url, s3Data, url, filename, id, thumbnail_url){
var xhr = new XMLHttpRequest();
xhr.open("POST", s3Data.url);
var postData = new FormData();
for(key in s3Data.fields){
postData.append(key, s3Data.fields[key]);
}
var blobData = dataURItoBlob(data_url);
postData.append('file', new File([blobData], filename));
xhr.onreadystatechange = function() {
if(xhr.readyState === 4){
if(xhr.status === 200 || xhr.status === 204){
setTimeout(function(){
$('#photo_container').append('<div id="image_container_'+id+'" class="hover-card mdl-cell--3-col-desktop mdl-cell--2-col-tablet mdl-cell--2-col-phone mdl-shadow--2dp"></div>');
$('.star-image').unbind('click').click( star_image_click );
$('.close-image').unbind('click').click(remove_image_click);
loading_files -= 1;
if ( loading_files == 0 ) {
$('#photo_load_spinner').removeClass('is-active');
$('#photo_load_text').text("");
}else{
$('#photo_load_text').text(loading_files+" files loading. Please wait.");
}
}, 1000);
}else{
alert("Could not upload file. "+xhr.responseText);
}
}
};
xhr.send(postData);
}
function dataURItoBlob(dataURI) {
var binary = atob(dataURI.split(',')[1]);
var array = [];
for(var i = 0; i < binary.length; i++) {
array.push(binary.charCodeAt(i));
}
return new Blob([new Uint8Array(array)], {type: 'image/png'});
}
I am kind of at a loss as to what to look for next. Any help would be greatly appreciated. Thanks!
EDIT
Just figure I should give a little more information. The data_url is generated from a canvas element which I use to resize the image in the browser, although I have confirmed that the canvas shows the image correctly in safari before upload. Here is that code:
function ResizeFile(raw_file) {
var reader = new FileReader();
reader.onload = function(e) {
var img = document.createElement("img");
img.onload = function() {
var canvas = document.createElement('canvas');
var ctx = canvas.getContext("2d");
//ctx.drawImage(img, 0, 0);
var MAX = 1200;
var width = img.width;
var height = img.height;
if (width > height) {
if (width > MAX) {
height *= MAX / width;
width = MAX;
}
} else {
if (height > MAX) {
width *= MAX / height;
height = MAX;
}
}
canvas.width = width;
canvas.height = height;
ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, width, height);
var dataurl = canvas.toDataURL("image/png");
getSignedRequest(dataurl);
}
img.src = e.target.result;
}
reader.readAsDataURL(raw_file);
}

We could resize image file and upload to server. Tested on Chrome and Safari, both works fine.
fileChange() {
var fileInputTag = document.getElementById("myFile");
if ('files' in fileInputTag) {
if (fileInputTag.files.length > 0) {
var file = fileInputTag.files[0];
var type = 'image/jpeg',
maxWidth = 800,
maxHeight = 600,
quality = 0.5,
ratio = 1,
canvas = document.createElement('canvas'),
context = canvas['getContext']('2d'),
canvasCopy = document.createElement('canvas'),
copyContext = canvasCopy.getContext('2d'),
img = new Image();
img.onload = function () {
if (img.width > maxWidth) {
ratio = maxWidth / img.width;
} else if (img.height > maxHeight) {
ratio = maxHeight / img.height;
}
canvasCopy.width = img.width;
canvasCopy.height = img.height;
copyContext.drawImage(img, 0, 0);
canvas.width = img.width * ratio;
canvas.height = img.height * ratio;
context.drawImage(canvasCopy, 0, 0, canvasCopy.width, canvasCopy.height, 0, 0, canvas.width, canvas.height);
canvas.toBlob((blob) => {
blob['name'] = file.name.split('.')[0] + '.jpeg';
var formData:FormData = new FormData();
formData.append('uploadFile', blob, blob.name);
// do upload here
}, type, quality);
};
img.src = URL.createObjectURL(file);
}
}
}
Add this to index.html or execute it before above script execution
if (!HTMLCanvasElement.prototype.toBlob) {
Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
value: function (callback, type, quality) {
var binStr = atob( this.toDataURL(type, quality).split(',')[1] ),
len = binStr.length,
arr = new Uint8Array(len);
for (var i = 0; i < len; i++ ) {
arr[i] = binStr.charCodeAt(i);
}
callback( new Blob( [arr], {type: type || 'image/png'} ) );
}
});
}

I remember Safari having limited support for FormData objects, for example:
https://developer.mozilla.org/en-US/docs/Web/API/FormData/set
https://developer.mozilla.org/en-US/docs/Web/API/FormData/get

Preview resized Image in Iframe

I have created a image select and resize (Client side) and upload to server. What I am asking for help is with image preview in iframe(resized) but cannot figure out. I will be only using Chrome desktop for this application. Qusetion is please help me with displaying resized image within my iframe here are my scripts below
HTML
<input type="file" input id="input" onchange="ClientSideResize()" name="Image" value="%%%img%%%"/>
HTML iframe
<img src="" id="image">
<iframe name="my_iframe" src="" id="my_iframe" style="visibility: hidden;"></iframe>
SCRIPT
<script>
function ClientSideResize(){
var dataurl = null;
var uniq = 'id' + (new Date()).getTime();
var filesToUpload = document.getElementById('input').files;
var file = filesToUpload[0];
// Create an image
var img = document.createElement("img");
// Create a file reader
var reader = new FileReader();
// Set the image once loaded into file reader
reader.onload = function(e)
{
img.src = e.target.result;
img.onload = function () {
canvas = document.createElement("canvas");
ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var MAX_WIDTH = 200;
var MAX_HEIGHT = 400;
var width = img.width;
var height = img.height;
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 ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height);
dataurl = canvas.toDataURL("image/jpeg",100);
var blobBin = atob(dataurl.split(',')[1]);
var array = [];
for(var i = 0; i < blobBin.length; i++) {
array.push(blobBin.charCodeAt(i));
}
files = new Blob([new Uint8Array(array)], {type: 'image/jpg', name: "Sample"});
} // img.onload
}
// Load files into file reader
reader.readAsDataURL(file);
}
</script>

Giving you a few other tips along the way... filereader is not the preferred way. and the way you build your blob afterwards is no good, use canvas#toBlob directly instead.
function ClientSideResize () {
// var uniq = 'id' + Date.now() // never used
var filesToUpload = document.getElementById('input').files
var file = filesToUpload[0]
// Create an image
var img = new Image
img.onload = () => {
const MAX_WIDTH = 200
const MAX_HEIGHT = 400
var canvas = document.createElement('canvas')
var ctx = canvas.getContext('2d')
var width = img.width
var height = img.height
// figure out new width and hight while keeping proportionally
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
}
}
// set diminsion
canvas.width = width
canvas.height = height
// draw resized image
ctx.drawImage(img, 0, 0, width, height)
// get it as a blob
canvas.toBlob(blob => {
// Do something with blob
// let file = new File([blob], 'filename.png', {type: blob.type})
let iframe = document.querySelector('iframe')
iframe.contentWindow.postMessage(blob, '*')
}, 'image/jpeg', 100)
} // img.onload
img.src = URL.createObjectURL(file)
}
// on iframe
window.onmessage = event => {
console.log(event) // will contain your blob object
}

Get image dataUrl before file upload in Angularjs | ng-file-upload

I'm resizing the image before upload it to the server using HTML5 Canvas.
Also I use Angular's module ng-file-upload.
Stack on getting dataUrl of resized image. Console returns data:,
What could be the problem here?
HTML
<input type="file" ngf-select ng-model="files">
<img ngf-src="files[0]">
JS
$scope.upload = function (files) {
if (files && files.length==1) {
var file = files[0];
var img = document.createElement("img");
var canvas = document.createElement("canvas");
var reader = new FileReader();
reader.onload = function(e) {img.src = e.target.result};
reader.readAsDataURL(file);
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var MAX_WIDTH = 200;
var MAX_HEIGHT = 150;
var width = img.width;
var height = img.height;
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 ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height);
var dataurl = canvas.toDataURL("image/png");
console.log( dataurl );
...

He had the same problem and solve it with:
$scope.upload = function (files) {
if (files && files.length==1) {
var file = files[0];
var URL = window.URL || window.webkitURL;
var srcTmp = URL.createObjectURL(file);
var img = new Image();
img.onload = function() {
alert(this.width + 'x' + this.height);
}
img.src = srcTmp;