Culture support, file/size behaviour

[Tayger]

Hello 
I'm pretty new to KendoUI Upload. I made some examples that are working fine. I have an issue on used language around file upload: The Button text is set to "Select file..." and any process is set to English ("done", etc.). I have set the culture to a different language than English:

<script src="telerik/js/cultures/kendo.culture.de-CH.min.js"></script>
...
kendo.culture("de-CH")
...

Shouldn't the text around the file uploaded not switch to it? I would expect German text based on this settings. 
And further more a question: Is it possible to use ONE file uploader for all allowed file types but with different file size definitions? Something like this:

validation: {
allowedExtensions: ['.gif', '.jpg', '.png', '.mp3', '.mp4']
}

and then to differ those for maxFileSize within the ONE file uploader:
.gif, .jpg, .png: max 1MB
.mp3 : max 5MB
.mp4: max 20MB

and as a consequence of that: saving the images into .../images saving the audio-files in .../audio and video files in .../video
Regards

[Tayger]

I just had a look into "telerik/js/cultures/kendo.culture.de-CH.min.js" and I guess they are built on the same structure. There is no translated text for some widgets, just measures. So the follow up question on my my culture question above: Can I set the text templates related to file upload widget?

[Tayger]

Found the answer by customizing the widget (keyword: "localization") 

[Ivan Danchev]

Hello,

Apart from configuring the messages from the widget itself you can load the Kendo messages js file as shown in this dojo.
As for validating the files for size using different maxFileSize for different file types, this is not supported. The widget accepts a single value for its maxFileSize configuration option and by design all file types will be validated against it. You could however implement your own validation by accessing the selected file information (file type and size) in the upload event and preventing the event (which cancels the upload) conditionally if a file of specific type exceeds some size.

Regards,
Ivan Danchev
Telerik by Progress

[Tayger]

Hi Ivan

Thank your for the answer. So I will create a solution around the selected file information. 

While getting familiar with the Upload Widget I guess I found a visual bug on drag-upload: On dragging a file over the dropzone any contents of the drag area (div) got the background color #f8f8f8 that will not disappear. You can easily reproduce it on the demo page of Upload Widget: http://demos.telerik.com/kendo-ui/upload/customdropzone

1. Go into edit mode of first example
2. Switch the background-color to #FFFFFF (white) inside style "dropZoneElement"
3. Run it and drag (not drop) an image over the dropzone. The whole dropzone area's background is turned to #F8F8F8. If you move the mouse away it still keeps that color.

I don't know why this happens. I guess its set inside the Upload Widget. In my case I have a centered image inside the dropzone (see attachment "original"). Even that gets a background color on draging an image over it (see attachment "ondrag"), though it should stay white. I can reproduce it in Apple's Safari, Firefox and Chrome browser. If that helps: the background-color switch happens only on dragging over a filled element (text, image) inside the dropzone div but not in dropzone div in general (dragging an image in ondrag.png to the white area (left and right) would not change the background-color of the arrow image).

I hope I could explain the behaviour clearly.

Regards

[Ivan Danchev]

Hello,

We are aware of this behavior and have logged an enhancement issue a little less than a month ago. When a file is dragged over the dropzone a class (with its related styles) is applied to the element. The current implementation does not remove that class when you drag the file way and the class remains. Here's a link to the issue in our public Github repo.

Regards,
Ivan Danchev
Telerik by Progress

[Tayger]

Thanks for the clearing this out. Glad to hear its known and will probably be corrected in a next release.

[Tayger]

Concerning the class problem: When I drag a file over Upload dropzone div any hover CSS styles will not take effect. It only takes effect without draging anyhting over the dropzone. The problem can't also be resolved programmatically, like this:

$( ".dropzone" ).hover(function() {
    $(this).css('background-color', '#d9edd0');
    $(this).css('cursor', 'crosshair');
});

 

I'm not sure if the Widget is completely overriding any event or the dragged file(s) behind the mouse pointer is blocking that. Should be checked on correcting the class problem.

[Magdalena]

Hi Tayger,

Actually elelemnts do not fire hover event while draging. The possible solution is to watch for mouse and drop zone coordinates. Here you can find a sample of the solution.

Regards,
Magdalena
Telerik by Progress

[Magdalena]

Hi Tayger,

Actually elements do not fire hover event while draging. The possible solution is to watch for mouse and drop zone coordinates. Here you can find a sample of the solution.

Regards,
Magdalena
Telerik by Progress

[Tayger]

Thank you for the answer, I had so much trouble with the Upload Widget so I was not aware that this is a general problem/issue. 

Regards