single and multiple File upload using jquery ajax in Struts 2

Question

how to upload a file using ajax jquery with showing progress bar while uploading in struts2 i searched every where no luck can any one give me idea or some code snipplet thank you.for now i am using normal upload in html like this.

<a id="addFile-link" href="#" title="add file"><img src="htdocs/images/add_file.png" style="width: 20px; height: 20px; border: 0"></a> 
                 <form id="form" name="form" target="viewFileUpload" method="post"
                action="fileUpload.do" enctype="multipart/form-data">
                <input type="file" name="upload" id="file" class="fileUpload" multiple>

                 </form>


  $("#addFile-link").click(function() {
var initialFolderId = document.getElementById('currentFolder').value;
            //Added for converting first time page load null or empty value validation in Servelet engine
            if (initialFolderId == null || initialFolderId == "") {
                initialFolderId = 0;
            }

            document.getElementById('selectedFolder').value = initialFolderId;
            $("#file").click();
            var uploadElement = document.getElementById("file");
            $('#file').change(function() {

                uploadElement.form.submit();

                //sleep(100)
                setTimeout(function() {openFolder(document.getElementById('currentFolder').value);getRecentActivity(0);}, 3000);
                $('#Activites').html(""); 

            });
        });

thank u for your quick reply is there any documentation for this how to implement this in my application — Chaitanya Kumar, Nov 13 '14 at 11:16
The documentation about the jQuery plugin is on the linked site. Once the request has been sent to an action, it doesn't matter where it comes from. Read the struts documentation (and [this question](http://stackoverflow.com/a/17212916/1654265) )... they're unrelated, stop searching for AJAX FILE UPLOAD WITH STRUTS... just search AJAX FILE UPLOAD and UPLOAD WITH STRUTS — Andrea Ligios, Nov 13 '14 at 11:39
On a second thought, you may want to take a look at dropzone.js: http://stackoverflow.com/a/26080212/1654265 — Andrea Ligios, Nov 13 '14 at 13:12

score 0 · Accepted Answer · answered Dec 10 '14 at 05:52

$('#addFile-link').bind("click",function(){
        var FolderId

        FolderId=document.getElementById('currentFolder').value;
        document.getElementById('selectedFolder').value = FolderId;

        if( FolderId==" " || FolderId==0){
            $('#input').prop('disabled', true);
            showFileMSg();
            //alert("kindly select a folder to upload files");

        }
        else{

            $('#input').prop('disabled', false);
        $('#fileupload').fileupload({
         xhrFields: {withCredentials: true},
            url: "fileUpload.do?",
            type:"POST",
            dataType : "JSON",
            autoUpload: true,
           formdata:{name:'FolderId',value:FolderId},
           disableImagePreview:true,
           filesContainer: $('table.files'),
           uploadTemplateId: null,
           downloadTemplateId: null,
           uploadTemplate: function (o) {
               var rows = $();
               $.each(o.files, function (index, file) {
                   var row = $('<tr class="template-upload fade">' +
                       '<td><span class="preview"></span></td>' +
                       '<td><p class="name"></p>' +
                       '<div class="error"></div>' +
                       '</td>' +
                       '<td><p class="size"></p>' +
                       '<div class="progress"></div>' +
                       '</td>' +
                       '<td>' +
                       (!index && !o.options.autoUpload ?
                           '<button class="start" disabled>Start</button>' : '') +
                       (!index ? '<button class="cancel">Cancel</button>' : '') +
                       '</td>' +
                       '</tr>');
                   row.find('.name').text(file.name);
                   row.find('.size').text(o.formatFileSize(file.size));
                   if (file.error) {
                       row.find('.error').text(file.error);
                   }
                   rows = rows.add(row);
               });
               return rows;
           },
           downloadTemplate: function (o) {
               var rows = $();
               $.each(o.files, function (index, file) {
                   var row = $('<tr class="template-download fade">' +
                       '<td><span class="preview"></span></td>' +
                       '<td><p class="name"></p>' +
                       (file.error ? '<div class="error"></div>' : '') +
                       '</td>' +
                       '<td><span class="size"></span></td>' +
                       '<td><button class="delete">Delete</button></td>' +
                       '</tr>');
                   row.find('.size').text(o.formatFileSize(file.size));
                   if (file.error) {
                       row.find('.name').text(file.name);
                       row.find('.error').text(file.error);
                   } else {
                       row.find('.name').append($('<a></a>').text(file.name));
                       if (file.thumbnailUrl) {
                           row.find('.preview').append(
                               $('<a></a>').append(
                                   $('<img>').prop('src', file.thumbnailUrl)
                               )
                           );
                       }
                       row.find('a')
                           .attr('data-gallery', '')
                           .prop('href', file.url);
                       row.find('button.delete')
                           .attr('data-type', file.delete_type)
                           .attr('data-url', file.delete_url);
                   }
                   rows = rows.add(row);
               });
               return rows;
           },
           always:function (e, data) {
               $.each( function () {
                   $(this).removeClass('fileupload-processing');
               });

           },
           done: function (e, data) {
               $('.template-upload').remove();
               $.each(data.files, function (index, file) {
                   openFolder(FolderId);
               });

           },
           error: function (jqXHR, textStatus, errorThrown) {
               alert("jqXHR: " + jqXHR.status + "\ntextStatus: " + textStatus + "\nerrorThrown: " + errorThrown);
           }



             /*add: function (e, data) {
            $('body').append('<p class="upl">Uploading...</p>')
            data.submit();
        },*/
    })

        }

    });




<form id="fileupload" on action="fileUpload.do" method="POST" enctype="multipart/form-data">
                                        <input id="input" type="file" name="upload" multiple style="cursor: pointer;  display: none">
                                        <im:hidden name="selectedFolder" id="selectedFolder" value="1" />
                                         <span class="fileupload-process"></span>
                                 <div class="col-lg-5 fileupload-progress fade">
                                     <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
                                       <div class="progress-bar progress-bar-info" style="width:0%;"></div>
                                    </div>
                                       <div class="progress-extended">&nbsp;</div>
                                 </div>
                  <table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>
              </form>

single and multiple File upload using jquery ajax in Struts 2

1 Answers1