how can I do custom validation before upload?

5 posts, 0 answers
  1. Layton Fujii
    Layton Fujii avatar
    5 posts
    Member since:
    Mar 2010

    Posted 29 Sep Link to this post

    in my customized (multiple photos) upload, I preview each photo that user uploaded and have a drop down list for each photo, this drop down list lets user select photo type. Each photo needs a different type. When user click 'upload' button, how can I check that these photos are of different type? I noticed the onUpload() event handler is triggered for EACH photo, so I cannot put this check in onUpload(). I cannot user async.batch mode either, since I'm not able to show the preview of those photos.
  2. Layton Fujii
    Layton Fujii avatar
    5 posts
    Member since:
    Mar 2010

    Posted 02 Oct in reply to Layton Fujii Link to this post

    my code:

     

    @using Kendo.Mvc.UI
    <script id="fileTemplate" type="text/x-kendo-template">
        <span class='k-progress'></span>
        <div class='file-wrapper'>
            Photo type:
            <select>
            </select>
            <br />
            <img id="preview">
        </div>
    </script>
    <div class="demo-section k-content">
        @(Html.Kendo().Upload()
            .Name("multiPhotoUpload")
            .TemplateId("fileTemplate")
            .Async(a => a
                .Save("Save", "PhotoUploadDemo")
                .AutoUpload(false)
            )
            .Events(events => events
                .Select("onSelect")
                .Success("onSuccess")
            .Upload("onUpload")
            )
        )
    </div>

    <script  type="text/javascript">

    function onSelect(e) {
    // add image preiew and drop down list cotents here
    }

    function onUpload(e) { 
    // this is triggered for each file, not for all files.
    // how can I check user selected a different photo type from the drop down lists for each photo?
    }
    </script>

  3. Plamen
    Admin
    Plamen avatar
    2812 posts

    Posted 03 Oct Link to this post

    Hello,

    By default the upload event is fired when one or more files are about to be uploaded. You can use the e.files object top check the name, extension or size of the file. 

    Regards,
    Plamen
    Progress Telerik
    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.
  4. Layton Fujii
    Layton Fujii avatar
    5 posts
    Member since:
    Mar 2010

    Posted 03 Oct in reply to Plamen Link to this post

    Hi, Plamen,

    Thank you for your reply. The problem is when async.batch is set to false, onUpload() is triggered for each photo (many times), not for all photos (once). That means, e.files.length is always 1. But if I set async.batch to true, I wan't able to display preview (it only shows the last photo) and drop down list for each photo. 

    Thanks.

  5. Plamen
    Admin
    Plamen avatar
    2812 posts

    Posted 04 Oct Link to this post

    Hello,

    Yes, you are right when batch is set to true the Upload event is triggered only once but you have the e.files collections of all selected file and it can be used to check the name, extension or size of the file. 

    Regards,
    Plamen
    Progress Telerik
    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.
Back to Top