Culture support, file/size behaviour

11 posts, 1 answers
  1. Tayger
    Tayger avatar
    191 posts
    Member since:
    Jan 2015

    Posted 11 Apr 2017 Link to this post

    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

  2. Tayger
    Tayger avatar
    191 posts
    Member since:
    Jan 2015

    Posted 11 Apr 2017 in reply to Tayger Link to this post

    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?
  3. Tayger
    Tayger avatar
    191 posts
    Member since:
    Jan 2015

    Posted 11 Apr 2017 in reply to Tayger Link to this post

    Found the answer by customizing the widget (keyword: "localization") 
  4. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2059 posts

    Posted 12 Apr 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Tayger
    Tayger avatar
    191 posts
    Member since:
    Jan 2015

    Posted 12 Apr 2017 in reply to Ivan Danchev Link to this post

    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

  6. Answer
    Ivan Danchev
    Admin
    Ivan Danchev avatar
    2059 posts

    Posted 14 Apr 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  7. Tayger
    Tayger avatar
    191 posts
    Member since:
    Jan 2015

    Posted 14 Apr 2017 in reply to Ivan Danchev Link to this post

    Thanks for the clearing this out. Glad to hear its known and will probably be corrected in a next release.
  8. Tayger
    Tayger avatar
    191 posts
    Member since:
    Jan 2015

    Posted 14 Apr 2017 in reply to Ivan Danchev Link to this post

    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.

  9. Magdalena
    Admin
    Magdalena avatar
    487 posts

    Posted 18 Apr 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  10. Magdalena
    Admin
    Magdalena avatar
    487 posts

    Posted 18 Apr 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  11. Tayger
    Tayger avatar
    191 posts
    Member since:
    Jan 2015

    Posted 18 Apr 2017 in reply to Magdalena Link to this post

    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

Back to Top