I’m using DropzoneJS to facilitate the upload of files (images) as part of a .net core application. I want to be able to send the dimensions (width and height) of the file to the .net controller. But I haven’t been able to figure out how to obtain the media file dimensions after the file has been resized.
Here is the js declaration:
product_media_dropzode_ctrl = new Dropzone("#product_form_ctrl", {
paramName: "file",
maxFilesize: 3,
maxFiles: 10,
acceptedFiles: ".jpeg,.jpg,.png,.gif",
autoProcessQueue: true,
uploadMultiple: false,
parallelUploads: 100,
resizeWidth: 1920,
resizeHeight: 1080,
resizeMimeType: 'image/jpeg',
resizeQuality: 1.0,
resizeMethod: 'crop',
accept: function (file, done) {
if (UploadedNumberFiles() > maxNumberOfMediaFile) {
done("The maximum number of files has been reached.");
}
else {
done();
}
},
init: function () {
this.on("thumbnail", function (file, dataUrl) {
**console.log("widthXheight:" + file.width + "X" + file.height);**
$('#product_width_hidden_ctrl').val(file.width);
$('#product_height_hidden_ctrl').val(file.height);
})
this.on("success", function (file, response) {
HandleUploadSuccess(response);
});
this.on('error', function (file, response) {
HandleUploadError(response);
});
},
});
}
If I upload a file 4151X2000, the file will be resized to 1920X1080, however the line below will display 4151X2000 instead of 1920X1080. If I upload a file 1800X1200, 1800X1200 is display instead of 1800X1080 which is the dimension of the file after being resized
**console.log("widthXheight:" + file.width + "X" + file.height);**
Is there a way to capture the file dimensions after the image has been resized and before the file is submitted to the server?