Upload file dimension

[Ben]

Hello,

I have implemented the upload control in my angular application. I am restricting to only allow image and video file. my question is how do I check the image's dimension (width and height) before I move it to the server. is it possible to check the video (mp4)'s dimension as well? 

 

--Ben

[Dimiter Topalov]

Hi Ben,

You can create a new Image() object from the raw file, available in the select event handler, and access its naturalHeight and naturalWidth properties, e.g.:

https://stackblitz.com/edit/angular-zhb16m?file=app/upload.component.ts

Further details are available in multiple online resources, e.g.:

https://stackoverflow.com/a/13572240/7009923

https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Robert]

Hi,

but how can we do a selectEvent.preventDefault(); in the image.onload() if a non valid dimension is detected?

onload is asynchrounus and selectEventHandler() does not wait until the image is evaluated.

Kind regards
David

[Dimiter Madjarov]

Hi David,


In this case I would suggest to set the autoUpload option of the Upload component to false, so the files are not immediately uploaded upon selection. When this option is set to false, two action buttons (Clear and Upload) will be displayed at the bottom. Those could also be temporary hidden via CSS while the file is being read using the FileReader and then shown again if the dimensions are valid. Another option for initiating the upload process would be to do it programatically using the uploadFiles method of the component

https://www.telerik.com/kendo-angular-ui/components/upload/api/UploadComponent/#toc-uploadfiles

Additionally, if the selected file should be removed from the list (in case it does not meet the requirements) I would recommend to use model binding with a collection of the selected files, as demonstrated here:

https://www.telerik.com/kendo-angular-ui/components/upload/model-binding/#toc-binding-of-file-collections

The component supports two-way binding, so when a file is programatically removed from the collection, it will also be removed from the files list (the collection instance should be changed in this case in order to trigger change detection).

Let me know if this information helps or I could provide further assistance.

Regards,
Dimiter Madjarov
Progress Telerik

[Robert]

Hi Dimiter,

yeah thanks, we've set autoupload to false, check within the (select) callback function, if its good, we call

this.kendoUploadComponent.uploadFiles();

directly.

If desired file dimensions not fit, we do:

this.kendoUploadComponent.fileList.clear();
selectEvent.preventDefault();

[Dimiter Madjarov]

Hello Christian,


Yes, this solution is suitable. However keep in mind that fileList is an internal property. I would suggest to just reset the bound file collection to an empty array instead.

Regards,
Dimiter Madjarov
Progress Telerik

[Robert]

Hi Dimiter,

i have no access to the bound files in the selecthandler, as of api description:
When you use the ngModel directive, the model binding gets executed only after a successful file upload

Any other option to clear the internal fileList?

Kind regards
David

[Dimiter Madjarov]

Hi Christian,


We released a new version 5.1.0 of the Upload component today that introduces a public clearFiles method. It will be suitable for the current or similar cases.

Regards,
Dimiter Madjarov
Progress Telerik

[Robert]

thanks, we use that now