amazon web services - Progress bar is only showing 100% in blueimp/jQuery-File-Upload for aws s3 upload -
i trying integrate /jquery-file-upload plugin uploading files in aws s3. till successful in uploading files s3 via plugin. while uploading file s3 , plugin not showing progress bar or accurate, showing directly 100% file size (for ex.) 128kb/128kb. using servlet(for s3 upload process) , html(temporary interface). here servlet ::
/** * servlet implementation class uploadcon */ @webservlet("/uploadcon1") @multipartconfig public class uploadcon1 extends httpservlet { private static final long serialversionuid = 1l; /** * @see httpservlet#httpservlet() */ public uploadcon1() { super(); // todo auto-generated constructor stub } protected void doget(httpservletrequest request, httpservletresponse response) throws servletexception, ioexception { // todo auto-generated method stub } /** * @see httpservlet#dopost(httpservletrequest request, httpservletresponse response) */ protected void dopost(httpservletrequest request, httpservletresponse response) throws servletexception, ioexception { // todo auto-generated method stub string bucketname = "thehexa4"; string uploadfilename=""; amazons3 s3client = new amazons3client(new profilecredentialsprovider()); try { for(part filepart : request.getparts()){ if(!filepart.getsubmittedfilename().isempty()){ string filename = filepart.getsubmittedfilename(); inputstream filecontent = filepart.getinputstream(); system.out.println("filepart :: "+filepart); system.out.println("file name :: "+filename); system.out.println("uploading new object s3 file\n"); objectmetadata meta = new objectmetadata(); meta.setcontentlength(filepart.getsize()); meta.setcontenttype("image/jpg"); s3client.putobject(bucketname, filename, filecontent, meta); //json metadata transfer printwriter writer = response.getwriter(); response.setcontenttype("application/json"); jsonarray json = new jsonarray(); try { string fileuploadpath = "https://"+bucketname+".s3.amazonaws.com/"+filename; jsonobject jsono = new jsonobject(); jsono.put("name", filepart.getsubmittedfilename()); jsono.put("size", filepart.getsize()); jsono.put("url", fileuploadpath); // jsono.put("thumbnail_url", fileuploadpath); jsono.put("delete_url", fileuploadpath); jsono.put("delete_type", "get"); json.put(jsono); } catch (exception e) { throw new runtimeexception(e); } { writer.write(json.tostring()); writer.close(); } } //json transfer ends } }catch (amazonserviceexception ase) { system.out.println("caught amazonserviceexception, " + "means request made " + "to amazon s3, rejected error response" + " reason."); system.out.println("error message: " + ase.getmessage()); system.out.println("http status code: " + ase.getstatuscode()); system.out.println("aws error code: " + ase.geterrorcode()); system.out.println("error type: " + ase.geterrortype()); system.out.println("request id: " + ase.getrequestid()); } catch (amazonclientexception ace) { system.out.println("caught amazonclientexception, " + "means client encountered " + "an internal error while trying " + "communicate s3, " + "such not being able access network."); system.out.println("error message: " + ace.getmessage()); } //code ends } } here html :[i haven't changed in original plugin html other form action="/uploadcon1" , necessary js-css file paths have displayed form portion of html file]
<!-- file upload form used target file upload widget --> <form id="fileupload" action="uploadcon1" method="post" enctype="multipart/form-data"> <!-- fileupload-buttonbar contains buttons add/delete files , start/cancel upload --> <div class="row fileupload-buttonbar"> <div class="span7"> <!-- fileinput-button span used style file input field button --> <span class="btn btn-success fileinput-button"> <i class="icon-plus icon-white"></i> <span>add files...</span> <input type="file" name="files[]" multiple> </span> <button type="submit" class="btn btn-primary start"> <i class="icon-upload icon-white"></i> <span>start upload</span> </button> <button type="reset" class="btn btn-warning cancel"> <i class="icon-ban-circle icon-white"></i> <span>cancel upload</span> </button> <button type="button" class="btn btn-danger delete"> <i class="icon-trash icon-white"></i> <span>delete</span> </button> <input type="checkbox" class="toggle"> </div> <!-- global progress information --> <div class="span5 fileupload-progress fade" > <!-- global progress bar --> <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100"> <div class="bar" style="width:0%;"></div> </div> <!-- extended global progress information --> <div class="progress-extended"> </div> </div> </div> <!-- loading indicator shown during file processing --> <div class="fileupload-loading"></div> <br> <!-- table listing files available upload/download --> <table role="presentation" class="table table-striped"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody></table> </form> can this? in advance. :)
Comments
Post a Comment