I know this is a very basic question but there are so many implementations out there and I can't get them to work.
So in my project if the user clicks a button, I'm generating a zip file on a servlet (which is called through an AJAX POST). Naturally, I want that file to get downloaded to the user.
Here's my code for the request:
<button type="button" class="btn btn-info btn-lg" onclick="getZip();">
<span class="glyphicon glyphicon-download"></span> Download clusters (.zip)
</button>
Here's the AJAX for the POST:
function getzip() {
$.ajax({
url:'GetZipServlet',
type:'GET',
});
}
And this is my code for the download:
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
System.out.println("Downloading clusters.zip");
/* Generate the directory on the server, then zip it. */
ClinicoGenomic.getInstance().clustersToFiles();
ClinicoGenomic.getInstance().zipClusters();
System.out.println("Done generating the .zip");
String parent_dir = System.getProperty("catalina.base");
String filename = "clusters.zip";
response.setContentType("application/zip");
response.setHeader("Content-Disposition", "attachment;filename=\"" + filename);
ZipOutputStream zipStream = new ZipOutputStream( response.getOutputStream() );
ZipInputStream fi = new ZipInputStream(new FileInputStream(parent_dir + "/" + filename));
int i;
while ((i = fi.read())!=-1)
zipStream.write(i);
zipStream.close();
fi.close();
System.out.println(".zip file downloaded at client successfully");
}
I get the correct messages in my console, up to the .zip file downloaded at client successfully. But the download doesn't start. what could be wrong here???
if you are correctly sending the response you should just simply handle it after your ajax call, like this:
$.ajax({
url:'GetZipServlet',
type:'GET',
success: function (response) {
//handle the response here
}
});
Related
I have file.zip in DB like BLOB. I want create method in Spring controller for download this file on client side.
#RequestMapping(value = "/downloadResolution/{resolutionId}", method = RequestMethod.GET)
public void downloadResolution(#PathVariable("resolutionId") Long resolutionId, HttpServletResponse response) {
Resolution resolution = resolutionService.findOne(resolutionId);
ResolutionArchive resolutionArchive = resolution.getResolutionArchive();
if (resolutionArchive == null) return;
byte[] archive = resolutionArchive.getArchive();
//this byte[] archive - my zip file from db
}
How can I change this methot In order to download this on client side?
User press download button. Methos get data from DB in byte[] and user can download it.
EDIT
I tried solution of #pleft and it work. and I knew - I use ajax for call method
function downloadResolution(resulutionId) {
$.ajax({
type: 'GET',
dataType: "json",
url: '/downloadResolution/' + resulutionId,
success: function (data) {
},
error: function (xhr, str) {
}
});
}
How realize this if I use ajax?
You can use the OutputStream of your HttpServletResponse to write your archive bytes there.
e.g.
response.setHeader("Content-Disposition", "attachment; filename=file.zip");
response.setHeader("Content-Type", "application/zip");
response.getOutputStream().write(archive);
EDIT
Sample download
#RequestMapping(value = "/downloadResolution/{resolutionId}", method = RequestMethod.GET, produces = MediaType.APPLICATION_OCTET_STREAM_VALUE)
public void downloadResolution(#PathVariable("resolutionId") Long resolutionId, HttpServletResponse response) throws IOException {
String test = "new string test bytes";
response.setHeader("Content-Disposition", "attachment; filename=file.txt");
response.getOutputStream().write(test.getBytes());
}
I created an angular js program for downloading a file from the server here follows the code
HTML Code
<a download="fullList.csv" ng-href="{{ fullListUrl }}" type="button" class="btn btn-success btn-xs exec-batch" ng-click="exportCSVBulk(batchExec)">
<span class="glyphicon glyphicon-ok"></span> EXPORT AS CSV
</a>
AngularJS Controller
$scope.exportCSVBulk=function(){
var page = "../importExportService/exportBulkCSV/"+batchExec.id;
$http.get(page).success(function(response) {
$scope.fullListUrl = 'data:text/csv;charset=utf-8,' + escape(response);
});
}
Here what i am doing is when a user click on the EXPORT AS CSV link the function exportCSVBulk fires and from that function the url value (fullListUrl) sets. But this is an ajax request, so when a user click on the link the url, the response time become little bit long which results the url will not redirected properly. Is it possible to fix this problem? or is there is any alternative way to fix this?
I have faced the similar issue for downloading files such as .pdf, .xls, .xlsx etc through Ajax.
Its a fact that we cant download files through Ajax, even though i came up with a solution which downloads files through Ajax like.
You can use jquery.fileDownload - A jQuery File Download Plugin for Ajax like, feature rich file downloads.
Demo Working
Server Side
I am using Spring at the server side
#RequestMapping(value = "exportXLS", method = RequestMethod.POST, produces = APP_JSON)
#ResponseBody
public void getCSV(final HttpServletResponse response, #RequestParam(value = "empId", required = true) final String empId) throws IOException, Exception
{
final byte[] csv = ExportXLSUtil.getFileBytes(empId); // get the file bytes
final OutputStream output = getOutputStream(response);
response.setHeader("Content-Disposition", "attachment; filename=documents_" + new DateTime() + ".xls");
response.setContentType(CONTENT_TYPE);
response.setContentLength(csv.length);
write(output, csv);
}
Client Side
At the client side, I am using AngularJS
$downloadXLS = function(id)
{
$.fileDownload('/user/exportXLS',
{
httpMethod : "POST",
data : {
empId : id
}
}).done(function(e, response)
{
// success
}).fail(function(e, response)
{
// failure
});
}
Download Link - jquery.fileDownload.js
I created a more angular way solution. The server has to provide content-type and content-disposition if you want to sync with server info, although you could add type and download properties manually.
vm.export = function () {
//PopUps.showLoading()
$http.get(Url).then(function (result) {
//PopUps.hideLoading()
var headers = result.headers()
var blob = new Blob([result.data], { type: headers['content-type'] })
var windowUrl = (window.URL || window.webkitURL)
var downloadUrl = windowUrl.createObjectURL(blob)
var anchor = document.createElement("a")
anchor.href = downloadUrl
var fileNamePattern = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/
anchor.download = fileNamePattern.exec(headers['content-disposition'])[1]
document.body.appendChild(anchor)
anchor.click()
windowUrl.revokeObjectURL(blob)
})
}
I'm using Phonegap with javascript and jquery. I've created a java servlet, it returns a pdf file. I can get de file correctly in a browser but I can't on Phonegap.
My code is this (javascript):
$.ajax({
type: "GET",
url: "http://x.x.x.x:xxxx/MyApp/PDF",
success: function(data, textStatus, request) {
alert("pdf OK");
window.open(data, "_system");
},
error: function(data, textStatus, request) {
alert("pdr error");
}
And here the servlet (this works fine from browser):
protected void doGet(HttpServletRequest req, HttpServletResponse response) throws ServletException, IOException {
try {
// Create PDF (this works fine)
String ruta = getServletContext().getRealPath(reportTemplateUrl);
InputStream resourceAsStream = new FileInputStream(ruta);
jasperDesign = JRXmlLoader.load(resourceAsStream);
jasperReport = JasperCompileManager.compileReport(jasperDesign);
jasperPrint = JasperFillManager.fillReport(jasperReport, null, new JRBeanCollectionDataSource(findReportData(name)));
File pdf = new File("output.pdf");
JasperExportManager.exportReportToPdfStream(jasperPrint, new FileOutputStream(pdf));
// Send PDF
response.setContentType("application/pdf");
response.addHeader("Content-Disposition", "attachment; filename=output.pdf");
response.setContentLength((int) pdf.length());
InputStream fileInputStream = new FileInputStream(pdf);
OutputStream responseOutputStream = response.getOutputStream();
int bytes;
while ((bytes = fileInputStream.read()) != -1) {
responseOutputStream.write(bytes);
}
System.out.println("CREATED!");
} catch (JRException e) {
e.printStackTrace();
}
This code is running on iPad with Phonegap and always I get the OK alert. From the iPad's browser I can donwload and read the pdf (I put the URL in the browser as a normal page) and all is OK.
I think the problem is the "data", from javascript, I don't know if I need to save the file first or how to do to show it...
And yes, I need use a servlet and ajax, the PDF is dynamic. I don't mind open it with internal or external browser, but I need to see it.
Thanks!
:)
Well, I solved this doing a GET call on javascript opening the url on a new browser:
window.open("http://.../PDF?id=id&name=name&...", "_blank");
Without ajax.
Thanks everyone
I have a form on my jsp page. In this form i choose a file (zip archive) and after click submmit call servlet to upload this file. For file upload im use Apache Commons FileUlpoad library. After upload im unzip archive. Them i do redict to this jsp.
jsp code:
<form action="Upload_Servlet" method="post" enctype="multipart/form-data">
<div id="up">
<input id="fileUpload1" type="file" name="filename1"value="Browse..."/>
</div>
<div>
<input id="btnSubmit" type="submit" value="Загрузить">
<input type="button" id="del" onclick="deleting()" value="Удалить">
</div>
</form>
servlet code:
public class uploadfile extends HttpServlet
{
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, java.io.IOException {
System.out.println(response.getCharacterEncoding());
response.setCharacterEncoding("UTF-8");
System.out.println(response.getCharacterEncoding());
response.setContentType("text/html");
PrintWriter writer = response.getWriter();
writer.println("wtpwebapps<br/>");
boolean isMultipart = ServletFileUpload.isMultipartContent(request);
if (!isMultipart) {
writer.println("<HTML>");
writer.println("<HEAD <TITLE> Upload4 </TITLE> </HEAD>");
writer.println("<BODY>");
writer.println("<FORM action = \"Upload_Servlet\" method = \"post\" enctype = \"multipart/form-data\">");
writer.println("<INPUT type = file name = ufile>");
writer.println("<INPUT type = submit value = \"Attach\">");
writer.println("<h1>its not multipart</h1>");
writer.println("</FORM>");
writer.println("</BODY>");
writer.println("</HTML>");
return;
}
FileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);
List<FileItem> list=null;
String mifpath= "1";
String path = " ";
String mif = " ";
String from = "\\\\";
String to ="/";
String error="";
try{
list = upload.parseRequest(request);
Iterator<FileItem> it = list.iterator();
response.setContentType("text/html");
while ( it.hasNext() )
{
FileItem item = (FileItem) it.next();
File disk = new File("C:/uploaded_files/"+item.getName());
path = disk.toString();
String code = new String(path.substring(path.lastIndexOf("."), path.length()).getBytes("ISO-8859-1"),"utf-8");
if (code.equalsIgnoreCase(".zip"))
{
mifpath=path;
mif = mifpath.replaceAll(from, to);
item.write(disk);
error=unzip.unpack(mif, "C:/uploaded_files");
}
else
{
error = "Выбранный файл не является архивом zip";
}
}
}
catch ( Exception e ) {
log( "Upload Error" , e);
}
request.setAttribute("error", error);
request.getRequestDispatcher("/Home.jsp").forward(request, response);
// String redictedURL="http://localhost:8080/redicted_test/Home.jsp";
// response.sendRedirect(redictedURL);
writer.close();
}
}
Now i want to do this on the portal. Its mean that i dont want to reload my jsp after I upload a file. So i have to use Jquery. And i have some questions:
How to submit form to use jquery in my case?
My servlet code will be work in portlet?
How to send parametrs to jps from portlet?
Using Jquery it can be done easily:
Set a click event on the submit button (or on the form submit).
Post data to servlet:
$.ajax({
url : base_url + 'Upload_Servlet',
type : "post",
data:$('form').serialize(),
cache : false,
success : function(data) {
//do some stuff
},
error : function(xhr, status, err) {
//do error stuff
},
timeout : 3000
});
//End ajax call
After the servlet is done, just use the response writer to write an aswer back (If it contains a lot of data, I'd recommend sending a response in the form of json, see here) and then the success callback is called and you can do whatever you like with this data.
IMPORTANT: Since you are submitting a form, you need to use e.preventDefault() so the form will not be actually submitted but rather be handeled by your ajax.
I have a web application with a simple upload function. The idea is to allow user select a file and upon successfully upload, redirect to index.jsp.
However, although the file got uploaded, the response.redirect is not working. After a successfully upload, the page doesn't get redirected. It just stays there. The weird thing is that I can see it is processing the index.jsp from the tomcat server log even though it doesn;t get redirected.
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//processRequest(request, response);
boolean status=false;
if (!ServletFileUpload.isMultipartContent(request)) {
throw new IllegalArgumentException("Request is not multipart, please 'multipart/form-data' enctype for your form.");
}
ServletFileUpload uploadHandler = new ServletFileUpload(new DiskFileItemFactory());
PrintWriter writer = response.getWriter();
response.setContentType("text/plain");
try {
List<FileItem> items = uploadHandler.parseRequest(request);
for (FileItem item : items) {
if (!item.isFormField()) {
File file = new File(getServletContext().getRealPath("/WEB-INF/upload"), item.getName());
item.write(file);
writer.write("{\"name\":\"" + item.getName() + "\",\"type\":\"" + item.getContentType() + "\",\"size\":\"" + item.getSize() + "\"}");
}
}
//redirect to index.jsp if successfully
redirect(request, response);
} catch (FileUploadException e) {
throw new RuntimeException(e);
} catch (Exception e) {
throw new RuntimeException(e);
} finally {
writer.close();
}
}
The redirect method:
private void redirect(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.getRequestDispatcher("/index.jsp").forward(request, response);
}
The file upload plugin is from https://aquantum-demo.appspot.com/file-upload
I used the front-end and developed the upload event handler using java apache fileupload. Everything works fine except the redirect part.
The application.js file which handles the JSON returns:
$(function () {
// Initialize jQuery File Upload (Extended User Interface Version):
$('#file_upload').fileUploadUIX();
// Load existing files:
$.getJSON($('#file_upload').fileUploadUIX('option', 'url'), function (files) {
var options = $('#file_upload').fileUploadUIX('option');
options.adjustMaxNumberOfFiles(-files.length);
$.each(files, function (index, file) {
options.buildDownloadRow(file, options)
.appendTo(options.downloadTable).fadeIn();
});
});
});
Any ideas?
You're attempting to send two responses on a single request. One with JSON data in the response body and one which redirects the response to another request. This is not going to work. You can send only one response back per request. A redirect requires an untouched (uncommitted) response body, otherwise the redirect will just fail with IllegalStateException: response already committed in the server logs.
You need to move the redirect call from the servlet code to JavaScript code. Get rid of the redirect() line in the servlet and add the following line as the last line of the $.getJSON() callback function.
window.location = '/index.jsp';
This way JavaScript will take care of the redirect.