File upload with Spring using javascript and HTML without submit button

Question

I have a bootstrap wizard where I ask to select some file into step and at the and of the wizard I have to use them. SO I put a form around wizard, storing all the step information inside it. But with the file how do I have to entail? I thought to store file into directory (because I have to store them anyway) and save the path into form object. Is it right? If this approach is right I would like to use file upload without submit button but using wizard next button. At the moment I hide the next button and show it when a file is selected, but how can I pass file to javascript and to controller?I can use ajax to call controller but how can I associate form to next button? Because I have to use javascript to associate the upload envent to next button. This is my file form(I have an advice because form can't use into this tag)

<div class="tab-pane" id="step3">
<p>Select datatable Excel file</p>
<form class="input-group " method="post"
    enctype="multipart/form-data"
    th:action="@{/datatable}" action="">
    <div class="input-group">
        <span class="input-group-btn"> <span
            class="btn btn-primary btn-file"> Browse&hellip;
                <input  type="file" name="file"
                accept=".xls, .xlsx, .xlsm" />
        </span>
        </span> <input id=datatableName" type="text" class="form-control" readonly="readonly">
    </div>
</form>

In javascript I have

onNext: function(tab, navigation, index) {

where I have to put ajax call, but how can retrieve file ?

the problem is not the ajax call to web services but link file upload form to javascript — luca
– luca, Commented Nov 4, 2015 at 13:05

madalinivascu · Accepted Answer · 2015-11-04 13:07:29Z

1

First of all you need to give id of you file control (assuning file control has file as id).

then try this script....

jQuery('#datatableName').click(function(e) {
    var fileControl = document.getElementById('file');
    if(fileControl.files.length == 0){ 
        alert('Send Message: Please Select File'); 
        return false; 
    }
    var formData = new FormData();
    formData.append('file',fileControl.files[0]);
    jQuery.ajax({
        url : 'you_server_side_endpoint',
        type: 'POST',
        contentType: false,
        processData: false,
        data:formData,
        success: function(data,status,xhr){
            alert('File has been Uploded');
        },
        error: function(xhr,status,e){
            alert('Error');
        }
    });
});

but additinally, you need to write script for move file in you site directory ( in php move_uploaded_file(); function will help you ).

edited Nov 4, 2015 at 13:07

madalinivascu

32.4k4 gold badges41 silver badges59 bronze badges

answered Nov 4, 2015 at 12:04

Dhaval Parekh

1137 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

luca Over a year ago

if I have a multple file and MultipartFile[] in my controller how can I set formData?

Dhaval Parekh Over a year ago

Firstly you add multiple attribute in file input element And then replace <br/> formData.append('file',fileControl.files[0]); with <br/> for(var i = 0; i< (fileControl.files).length; i++){ formData.append('file['+i+']',fileControl.files[i]); }

luca Over a year ago

for(var i = 0; i< length; i++){ formData.append('file[]',fileControl.files[i]);} This code works thanks

Collectives™ on Stack Overflow

File upload with Spring using javascript and HTML without submit button

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related