Meteor-files: Check image dimensions on before upload

[gustavohr]

Hello everyone, I am a newbie in meteor and programming and I am seeking for help because I am trying to check the dimensions of the image before it is uploaded by the client. I would like to know if there is a way to check it as it is possible to check the size with file.size. I have been struggleing with it for a week with no success. I would be really glad if someone can help me. Thanks in advance!

[dr-dimitru]

Have you tried canvas?

[gustavohr]

Sorry I am really novice in programming can you please develop that a bit more? how can I use canvas to get the width and height of an image? Thanks again

[dr-dimitru]

Check out this thread: http://stackoverflow.com/questions/5173796/html5-how-to-get-image-dimension

[gustavohr]

Thanks for your help, I am trying to understand how that function works, but with no success... where and when should I pass it? its input variable is the file on the onBeforeUpload function?

[dr-dimitru]

Use independently. Before calling .instert() method

[gustavohr]

Thank you very much man! I have no words to thank you! That is what I needed!

[dr-dimitru]

Glad it helped.

Please, support this project by:

• Star on GitHub
• Star on Atmosphere
• Share on Facebook and Twitter
• Donate via PayPal

[gustavohr]

Hey sorry to bother you again... I have a question: I have managed to get the dimensions but when I try to stop the uploading of the image from the onBeforeUpload it gives me an internal server error, and if try to stop it just before inserting it continues the event and instert it. I have tried also to call a function from the onBeforeUpload but it calls the function after inserting and not before. Thanks in advance

[gustavohr]

Here is what I am trying to do

this.Images = new Meteor.Files({
    debug: true,
    collectionName: 'Images',
    allowClientCode: false, // Disallow remove files from Client
    onBeforeUpload: function (file) {

        // Allow upload files under 10MB, and only in png/jpg/jpeg formats
        if (checkImage(this.file) && file.size <= 10485760 && /png|jpg|jpeg/i.test(file.extension)) {

            return true;
        } else {
            return 'Please upload image, with size equal or less than 10MB';
        }
    }
});

function createReader(file, whenReady) {
    var reader = new FileReader();
    reader.onload = function(evt) {
        var image = new Image();
        image.onload = function(evt) {
            var width = this.width;
            var height = this.height;
            if (whenReady) whenReady(width, height);
        };
        image.src = evt.target.result; 
    };
    reader.readAsDataURL(file);
}
function checkImage(file){
    createReader(file, function(w, h) {
        if(w != 390 && h != 200){
            return false;
        }               
    });
}

[dr-dimitru]

You're trying to use asynchronous function synchronously

Do not pass it to onBeforeUpload - as it is server and client hook (and on server end it won't work)

Pass image to checkImage
and there in callback trigger .insert() method

gives me an internal server error

What error?

[gustavohr]

I have tried to call it on the event #fileInput before it calls inserts but it continues straight to upload the image...

Template.uploadForm.events({
    'change #fileInput': function (e, template) {   
        createReader(e.currentTarget.files[0], function(w, h) {         
            if(w != 390 && h != 200){
                return false;
            }               
        })
        if (e.currentTarget.files && e.currentTarget.files[0]) {
            // We upload only one file, in case 
            // there was multiple files selected
            var file = e.currentTarget.files[0];

            if (file) {

                var uploadInstance = Images.insert({
                    file: file,
                    streams: 'dynamic',
                    chunkSize: 'dynamic'
                }, false);
                uploadInstance.on('start', function() {
                    template.currentUpload.set(this);
                });
                uploadInstance.on('end', function(error, fileObj) {
                    if (error) {
                        alert('Error during upload: ' + error.reason);
                    } else {
                        template.currentUpload.set(this);
                        Session.set("imgId", fileObj._id);
                        alert('Carga realizada con éxito');
                        return true;

                    }
                    template.currentUpload.set(false);
                });
                uploadInstance.start();
            }
        }
    }
});
function createReader(file, whenReady) {
    var reader = new FileReader();
    reader.onload = function(evt) {
        var image = new Image();
        image.onload = function(evt) {
            var width = this.width;
            var height = this.height;
            if (whenReady) whenReady(width, height);
        };
        image.src = evt.target.result; 
    };
    reader.readAsDataURL(file); 
}

[gustavohr]

Done! the only thing that I had to do was to grab all inside the if statament sorry for your time! Thanks for your help!