file validation is not working with demo is given in the syncfusion site- demo- fileupload with preview

[jismol]

dear syncfusion team,

https://ej2.syncfusion.com/vue/demos/#/material/uploader/image-preview.html

in the above demo the allowed extensions are jpg and png. but the control is allowing to upload any file type.

Please help with this issue

Attachment: filevalidation_8f7f3eb.rar

[Kokila Poovendran]

Hi jismol,

Thank you for reaching out to us and bringing this matter to our attention.

After thoroughly investigating your concern, we were unable to replicate the issue you mentioned regarding the demo of the file uploader with image preview. The demo is designed to allow only JPG and PNG file extensions, and it appears to be functioning as intended.

For your reference and assurance, we have prepared a video illustration that demonstrates the expected behavior of the demo. You can view the video here:

Video Illustration

To assist you more effectively, we kindly request the following information:

• Provide a reproducible sample or describe your specific scenario in detail, including any customizations you may have made to the demo.
• Share the version of the Syncfusion package you are using to help us better understand your environment.
• If possible, include a video illustration or screenshots of the issue you are encountering. This visual aid will be valuable in our troubleshooting process.

We are committed to resolving any concerns you may have, and your cooperation in providing additional details will greatly assist us in addressing the issue accurately.

Regards,

Kokila Poovendran.

[jismol]

Hi Kokila, 

Please refer the following video illustration for more clarity

Attachment: screenrecording_Filevalidation_4d881abf.rar

[Kokila Poovendran]

Hi jismol,

Thank you for bringing this to our attention, and for providing the video illustration. We understand that in the file uploader demo with image preview, the allowed extensions for JPG and PNG are not working as expected. We appreciate your feedback.

It's important to note that the provided demo is a fully customized sample, and the default file type validation error message, such as "File type is not allowed," is not included in this specific customization.

To show the error message "File type is not allowed" when a file with an unsupported extension is selected, you can customize the code as per your specific requirements. In the provided code snippet, we have created a custom error message element and appended it to the list item element for the selected file:

Code snippet: 

             let StatusMsg;

            StatusMsg = createElement('span', {

              id: 'removeIcon',

              className: 'e-file-status e-validation-fails',

            });

            if (file.status == 'File type is not allowed') {

              StatusMsg.textContent = 'File type is not allowed';

            }

            liEle.appendChild(StatusMsg);

This customization allows you to display a custom error message when a file with an unsupported extension is selected. We have customized the code in "formSelectedData" method. 

Regards,

Kokila Poovendran.

Attachment: dropdown_88ff2de8.zip