Send file loaded to spring in multipart

2 posts, 0 answers
  1. Manlio
    Manlio avatar
    5 posts
    Member since:
    Apr 2017

    Posted 09 May 2017 Link to this post

    Hello i have a little problem with the kendo upload.

    I want send one file to my spring controller but i can't with the kendo ui.

     

    I have a simple form:

    <form>
        <ul>
            <li>
                <input data-role="maskedtextbox" data-bind="value: testoHome" id="testohome" name="testo home" />
                <input id="upload" name="upload" type="file" />
            </li>
            <li>
                <button id="next" class="k-button k-primary" onclick="Form.sendData()">Next</button>
            </li>
        </ul>
    </form>

     

    with a simple js:

    var Form = {
        vm: null,
        sendData: function(){      
            data = new FormData();
            data.append("file", $('#a-can-uploadrl')[0].files[0]);
            data.append("testo", Form.vm.get("testoHome"));
             
            $.ajax({
                url: myURL,
                data: data,
                contentType: false,
                processData: false,
                enctype: 'multipart/form-data',
                type: 'POST',
                success:
                    function(data){
                       alert(data);
                    }
           });     
        },
        InitKendoBind: function(){
            this.vm = kendo.observable({
                testoHome: null
            });
            kendo.bind($("#formId")[0], vm);
        },
        Init: function() {
            $("#formId").submit(function(event) {
                event.preventDefault();
            });
             
            $("upload").kendoUpload();
             
            this.InitKendoBind();
        },
    }
     
    $(document).ready(function() {
        Form.Init();
    });

     

     

    but if i use the kendo upload with

    $("upload").kendoUpload()

     

    the 

    $('#a-can-uploadrl')[0].files[0]

     

    is undefined.

    If i not use the kendo upload i take the file with this code

    $('#a-can-uploadrl')[0].files[0]

     

    and i can pass the file to my controller.

     

    How i can take the file for pass all the data (file with name, size, etc. + others input strings from my form) using the kendo upload?

    (without the async uploading)

     

    this is my java controller:

    @RequestMapping(value="myURL", method=RequestMethod.POST)
    public static Long myURL(HttpServletRequest request,
            @RequestParam("file") MultipartFile file
            @RequestParam("testo") String cantiereString
            ) throws FileUploadException, IOException {
         
        /* some code */
         
        return 1;
    }
  2. Ianko
    Admin
    Ianko avatar
    1938 posts

    Posted 10 May 2017 Link to this post

    Hello Manlio,

    I am not sure how the #a-can-uploadrl element is related to Kendo Upload or the input used in the code sent. 

    With Kendo Upload, you can use the getFiles method to get the files selected, where each item exposes the rawFile field that holds the file to be uploaded.

    Regards,
    Ianko
    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.
Back to Top