Stream videos in client app using Ajax and java Restlet - java

Hi I want to stream videos in client app but videos are located in server app. I am using java Restlet and Jquery Ajax to connect client app to server app. Through Ajax call i am connecting to Restlet. I don't know how to send response to ajax after streaming video from server side, how ajax receives response and how to play video in browser. Can any one help me to handle this.
Here is my code
Html:
<button id="playVideo" class="btn-primary">PlayVideo</button>
<video id="videoTab" height="300" width="500" style="display: none" controls ></video>
Ajax Call to server
$('#playVideo').click(function (){
var jsonObj = {};
jsonObj.userId = "siva";
jsonObj.file = "sample.mp4";
//console.log("json obje :"+ JSON.stringify(jsonObj))
// Rest call to play videos.
$.ajax({
type : 'GET',
url : config.streamVideo,
//dataType : 'json',
data : JSON.stringify(jsonObj),
contentType : "application/json",
mimeType : "video/mp4",
processData : false,
crossDomain : true,
success : function(result) {
//console.log("login result : " + JSON.stringify(result));
if (result) {
console.log("success.....");
srcPath = "data:video/mp4;"+result;
$('#videoTab').attr('src', srcPath);
$('#videoTab').css('display', 'block');
$('#videoTab').attr('autoplay', true);
} else {
alert('failed...');
}
},
error : function(){
alert('error')
}
});
});
RestletCode:
#Get
public InputRepresentation handleRequest(Representation entity) throws IOException, ResourceException {
// Set response headers
Series<Header> responseHeaders = (Series<Header>) getResponse().getAttributes().get("org.restlet.http.headers");
if (responseHeaders == null) {
responseHeaders = new Series<Header>(Header.class);
getResponse().getAttributes().put("org.restlet.http.headers", responseHeaders);
}
responseHeaders.add(new Header("Access-Control-Allow-Origin", "*"));
logger.debug("+++++++++++++++++++Entered in play video restlet +++++++++++++++");
// Convert Rest type request to Servlet request
httpServletRequest = ServletUtils.getRequest(getRequest());
// Get Servlet context object.
sc = httpServletRequest.getServletContext();
// Get input file path.
logger.debug("------->getRealPath " + sc.getRealPath("/"));
String filePath = sc.getRealPath("/") + "WEB-INF\\data\\videos\\sample.mp4";
final File file = new File(filePath);
if (file.exists()) {
logger.debug("Requested file path : " + file.getAbsolutePath());
logger.debug("inputRepresentation :" + inputRepresentation);
fis = new FileInputStream(file);
inputRepresentation = new InputRepresentation(new InputStream() {
private boolean waited = false;
#Override
public int read() throws IOException {
waited = false;
// read the next byte of the FileInputStream, when reaching the
// end of the file, wait for 2 seconds and try again, in case
// the file was not completely created yet
while (true) {
byte[] b = new byte[1];
if (fis.read(b, 0, 1) > 0) {
return b[0] + 256;
} else {
if (waited) {
return -1;
} else {
try {
Thread.sleep(2000);
} catch (InterruptedException ex) {
logger.error("Exception while streaming video : ", ex);
}
waited = true;
}
}
}
}
}, MediaType.VIDEO_MP4);
} else {
logger.debug("Requested file not found : " + filePath);
}
//logger.debug("inputRepresentation :");
return inputRepresentation;
}
Thanks in advance

After reading your comment, here is my understanding of what you should do.
I would not send json to a resource in order to get something, I would just send a simple GET request.
You need:
a resource that returns the file of a video according to its identifier. For the matter of illustration, let's say its url template is /videos/{videoid}
a web page that contains the links, and the empty video player
some javascript that set the "src" attribute video player with the url defined above: /videos/{videoid}. The way you compute the videoid is your own business.
Here is the server code:
the Restlet application, that defines the URI templates
#Override
public Restlet createInboundRoot() {
Router router = new Router(getContext());
// attaches the resource that represents a video, according to its identifier
router.attach("/videos/{videoid}", VideoServerResource.class);
// ... other instructions
return router;
}
the video server resource:
public class VideoServerResource extends ServerResource {
private File video;
#Override
protected void doInit() throws ResourceException {
String videoId = getAttribute("videoid");
// Compute path
String path = "/tmp/" + videoId + ".mp4";
video = new File(path);
// takes care of not found status responses.
setExisting(video.isFile());
}
#Get("mp4")
public File represent() {
return video;
}
}
Here is the client code. This is a sample Web page, with an empty video player. When clicking on the button, the video player is asked to play the http://example.com:9000/videos/testvideo video. In your case, the value testvideo is simply deduced from the link the user click on.
<!DOCTYPE html>
<html>
<head>
<script src="/static/jquery.js"></script>
<script>
$('#playVideo').click(function (){
srcPath = "http://127.0.0.1:9000/videos/testvideo";
$('#videoTab').attr('src', srcPath);
$('#videoTab').css('display', 'block');
$('#videoTab').attr('autoplay', true);
});
</script>
</head>
<body>
<button id="playVideo" class="btn-primary">PlayVideo</button>
<video id="videoTab" height="300" width="500" style="display: none" controls ></video>
</body>
</html>
I hope this will help you.

Related

Return a zip (or any file) from the server on the client browser (REST)

So I am using Java for my Server and Angular for the Client. I am currently working on a feature where you can select multiple files from a table and when you press on download, it generates a zip file and downloads it to your browser. As of right now, the server now creates the zip file and I can access it in the server files. All that is left to do is to make it download on the client's browser. (the zip file is deleted after the client downloads it)
After doing some research, I found out that you can use a fileOutputStream to do this. I also saw some tools like retrofit... I am using REST and this is what my code looks like. How would I achieve my goal as simply as possible?
Angular
httpGetDownloadZip(target: string[]): Observable<ServerAnswer> {
const params = new HttpParams().set('target', String(target)).set('numberOfFiles', String(target.length));
const headers = new HttpHeaders().set('token', this.tokenService.getStorageToken());
const options = {
headers,
params,
};
return this.http
.get<ServerAnswer>(this.BASE_URL + '/files/downloadZip', options)
.pipe(catchError(this.handleError<ServerAnswer>('httpGetZip')));
}
Java zipping method
public void getDownloadZip(String[] files, String folderName) throws IOException {
[...] // The method is huge but basically I generate a folder called "Download/" in the server
// Zipping the "Download/" folder
ZipUtil.pack(new File("Download"), new File("selected-files.zip"));
// what do I return ???
return;
}
Java context
server.createContext("/files/downloadZip", new HttpHandler() {
#Override
public void handle(HttpExchange exchange) throws IOException {
if (!handleTokenPreflight(exchange)) { return; }
System.out.println(exchange.getRequestURI());
Map<String, String> queryParam = parseQueryParam(exchange.getRequestURI().getQuery());
String authToken = exchange.getRequestHeaders().getFirst("token");
String target = queryParam.get("target") + ",";
String[] files = new String[Integer.parseInt(queryParam.get("numberOfFiles"))];
[...] // I process the data in this entire method and send it to the previous method that creates a zip
Controller.getDownloadZip(files, folderName);
// what do I return to download the file on the client's browser ????
return;
}
});
A possible approach to successfully download your zip file can be the described in the following paragraphs.
First, consider returning a reference to the zip file obtained as the compression result in your downloadZip method:
public File getDownloadZip(String[] files, String folderName) throws IOException {
[...] // The method is huge but basically I generate a folder called "Download/" in the server
// Zipping the "Download/" folder
File selectedFilesZipFile = new File("selected-files.zip")
ZipUtil.pack(new File("Download"), selectedFilesZipFile);
// return the zipped file obtained as result of the previous operation
return selectedFilesZipFile;
}
Now, modify your HttpHandler to perform the download:
server.createContext("/files/downloadZip", new HttpHandler() {
#Override
public void handle(HttpExchange exchange) throws IOException {
if (!handleTokenPreflight(exchange)) { return; }
System.out.println(exchange.getRequestURI());
Map<String, String> queryParam = parseQueryParam(exchange.getRequestURI().getQuery());
String authToken = exchange.getRequestHeaders().getFirst("token");
String target = queryParam.get("target") + ",";
String[] files = new String[Integer.parseInt(queryParam.get("numberOfFiles"))];
[...] // I process the data in this entire method and send it to the previous method that creates a zip
// Get a reference to the zipped file
File selectedFilesZipFile = Controller.getDownloadZip(files, folderName);
// Set the appropiate Content-Type
exchange.getResponseHeaders().set("Content-Type", "application/zip");
// Optionally, if the file is downloaded in an anchor, set the appropiate content disposition
// exchange.getResponseHeaders().add("Content-Disposition", "attachment; filename=selected-files.zip");
// Download the file. I used java.nio.Files to copy the file contents, but please, feel free
// to use other option like java.io or the Commons-IO library, for instance
exchange.sendResponseHeaders(200, selectedFilesZipFile.length());
try (OutputStream responseBody = httpExchange.getResponseBody()) {
Files.copy(selectedFilesZipFile.toPath(), responseBody);
responseBody.flush();
}
}
});
Now the problem is how to deal with the download in Angular.
As suggested in the previous code, if the resource is public or you have a way to manage your security token, including it as a parameter in the URL, for instance, one possible solution is to not use Angular HttpClient but an anchor with an href that points to your ever backend handler method directly.
If you need to use Angular HttpClient, perhaps to include your auth tokens, then you can try the approach proposed in this great SO question.
First, in your handler, encode to Base64 the zipped file contents to simplify the task of byte handling (in a general use case, you can typically return from your server a JSON object with the file content and metadata describing that content, like content-type, etcetera):
server.createContext("/files/downloadZip", new HttpHandler() {
#Override
public void handle(HttpExchange exchange) throws IOException {
if (!handleTokenPreflight(exchange)) { return; }
System.out.println(exchange.getRequestURI());
Map<String, String> queryParam = parseQueryParam(exchange.getRequestURI().getQuery());
String authToken = exchange.getRequestHeaders().getFirst("token");
String target = queryParam.get("target") + ",";
String[] files = new String[Integer.parseInt(queryParam.get("numberOfFiles"))];
[...] // I process the data in this entire method and send it to the previous method that creates a zip
// Get a reference to the zipped file
File selectedFilesZipFile = Controller.getDownloadZip(files, folderName);
// Set the appropiate Content-Type
exchange.getResponseHeaders().set("Content-Type", "application/zip");
// Download the file
byte[] fileContent = Files.readAllBytes(selectedFilesZipFile.toPath());
byte[] base64Data = Base64.getEncoder().encode(fileContent);
exchange.sendResponseHeaders(200, base64Data.length);
try (OutputStream responseBody = httpExchange.getResponseBody()) {
// Here I am using Commons-IO IOUtils: again, please, feel free to use other alternatives for writing
// the base64 data to the response outputstream
IOUtils.write(base64Data, responseBody);
responseBody.flush();
}
}
});
After that, use the following code in you client side Angular component to perform the download:
this.downloadService.httpGetDownloadZip(['target1','target2']).pipe(
tap((b64Data) => {
const blob = this.b64toBlob(b64Data, 'application/zip');
const blobUrl = URL.createObjectURL(blob);
window.open(blobUrl);
})
).subscribe()
As indicated in the aforementioned question, b64toBlob will look like this:
private b64toBlob(b64Data: string, contentType = '', sliceSize = 512) {
const byteCharacters = atob(b64Data);
const byteArrays = [];
for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
const slice = byteCharacters.slice(offset, offset + sliceSize);
const byteNumbers = new Array(slice.length);
for (let i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
const blob = new Blob(byteArrays, {type: contentType});
return blob;
}
Probably you will need to slightly modify the httpGetDownloadZip method in your service to take into account the returned base 64 data - basically, change ServerAnswer to string as the returned information type:
httpGetDownloadZip(target: string[]): Observable<string> {
const params = new HttpParams().set('target', String(target)).set('numberOfFiles', String(target.length));
const headers = new HttpHeaders().set('token', this.tokenService.getStorageToken());
const options = {
headers,
params,
};
return this.http
.get<string>(this.BASE_URL + '/files/downloadZip', options)
.pipe(catchError(this.handleError<ServerAnswer>('httpGetZip')));
}
You could try using responseType as arraybuffer.
Eg:
return this.http.get(URL_API_REST + 'download?filename=' + filename, {
responseType: 'arraybuffer'
});
In My Project including both front end (angular) and back end (java).
We used the below solution ( hope it work for you ):
Angular:
https://github.com/eligrey/FileSaver.js
let observable = this.downSvc.download(opts);
this.handleData(observable, (data) => {
let content = data;
const blob = new Blob([content], { type: 'application/pdf' });
saveAs(blob, file);
});
Java:
public void download(HttpServletRequest request,HttpServletResponse response){
....
response.setHeader("Content-Disposition",
"attachment;filename=\"" + fileName + "\"");
try (
OutputStream os = response.getOutputStream();
InputStream is = new FileInputStream(file);) {
byte[] buf = new byte[1024];
int len = 0;
while ((len = is.read(buf)) > -1) {
os.write(buf, 0, len);
}
os.flush();
}
You can still use HttpServletRequest on the server...
Then get its OutputStream and write to it.
#RequestMapping(method = RequestMethod.POST , params="action=downloadDocument")
public String downloadDocument(#RequestParam(value="documentId", required=true) String documentId,
HttpServletRequest request,
HttpServletResponse response )
{
try {
String docName = null;
String documentSavePath = getDocumentSavePath();
PDocument doc = mainService.getDocumentById(iDocumentId);
if(doc==null){
throw new RuntimeException("document with id: " + documentId + " not found!");
}
docName = doc.getName();
String path = documentSavePath + ContextUtils.fileSeperator() + docName;
response.setHeader("Content-Disposition", "inline;filename=\"" + docName + "\"");
OutputStream out = response.getOutputStream();
response.setContentType("application/word");
FileInputStream stream = new FileInputStream(path);
IOUtils.copy(stream, out);
out.flush();
out.close();
} catch(FileNotFoundException fnfe){
logger.error("Error downloading document! - document not found!!!! " + fnfe.getMessage() , fnfe);
} catch (IOException e) {
logger.error("Error downloading document!!! " + e.getMessage(),e);
}
return null;
}

Uploading image to database using AJAX is not uploading as blob

I have a webpage that is supposed to upload an image to the database with a name to describe the image. Think uploading a logo and the name of the companies logo.
When I select the image file and submit it uploads to the database and I can return that information to the webpage in a list. However, it is not encoded in the manner that I was expecting. I would like the image file to be uploaded as a blob so that I may convert the blob to Base64 and pass it to my web application.
This is what the blob code looks like if I manually upload the images using MySQLs gui.
"iVBORw0KGgoAAAANSUhEUgAACWAAAAnHCAYAAAAIV..." which I'm able to convert to Base64 later.
When I use my ajax web page to upload an image however, I receive
"QzpcZmFrZXBhdGhcU3ByaW5nLnBuZw==".
My question is, how can I have ajax upload it as a blob instead so that my Java application can properly call the blob and convert it to Base64?
ajax.js
$(function (){
var $skills = $('#skills');
var $logo = $('#logo');
var $techName = $('#techName');
$.ajax({
type: 'GET',
url: '/api/technologyList',
success: function(skills) {
$.each(skills, function(i, skill) {
$('#skills-list').append('<tr><td> ' + skill.logo + '</td>' + '<td>' + skill.techName + '</td></tr>')
})
}
})
$('#addSkill').on('click', function () {
var skill = {
techName: $techName.val(),
logo: $logo.val()
}
$.ajax({
type: 'POST',
url:'/api/technologyList',
data: skill,
contentType: "multipart/form-data",
processData: false,
success: function (newSkill) {
$('#skills-list').append('<tr><td> '+ newSkill.logo+ '</td>' +
'<td> '+ newSkill.techName + '</td></tr>')
console.log(skill)
}
})
})
})
addSkill.html
<table id="skills-list">
<tr>
<th>Logo</th>
<th>Technology</th>
</tr>
</table>
<form id="skillForm">
<input type="text" id="techName"/> <br>
<input type="file" enctype="multipart/form-data" id="logo"/>
<button id="addSkill">Add!</button>
</form>
HomeController
#GetMapping(value = "/technology")
public String technologyList(Model theModel) throws IOException {
try {
List<Skills> userSkillsList = skillsService.findSkillList("wmangram");
List<byte[]> logo = skillsService.findLogos();
List<String> base64List = new ArrayList<>();
boolean isBase64 = false;
for (int i = 0; i < logo.size(); i++) {
if (Base64.isBase64(logo.get(i))) {
String base64Encoded = new String((logo.get(i)), "UTF-8");
base64List.add(base64Encoded);
}
else {
byte[] encodeBase64 = Base64.encodeBase64(logo.get(i));
String base64Encoded = new String(encodeBase64, "UTF-8");
base64List.add(base64Encoded);
}
}
theModel.addAttribute("userSkills", userSkillsList);
theModel.addAttribute("userImages", base64List);
return "technology";
}
catch (NullPointerException nexc) {
return "nullexception";
}
}
You have to use a FormData object to upload multipart/form-data1 via ajax.
$('#addSkill').on('click', function () {
var skill = new FormData();
skill.append("techName", $techName.val());
skill.append("logo", $logo.prop("files")[0]);
$.ajax({
type: 'POST',
url:'/api/technologyList',
data: skill,
contentType: false, //don't set this, it will be set automatically and properly
processData: false,
success: function (newSkill) {
$('#skills-list').append('<tr><td> '+ newSkill.logo+ '</td>' +
'<td> '+ newSkill.techName + '</td></tr>')
console.log(skill)
}
})
})
Looking at the java code it doesn't look like it can handle a file upload, so this answer is only for the client side code.
This isn't strictly true but you wouldn't want to have to do it any other way.
The problem was that I wasn't handling the file in a manner that let the program read the files contents. Instead it was just receiving the fake file path with the file name.
Fixed by utilizing #RequestParam and MultipartFile then assigning to the object before passing to the DAO.
RESTController.java
#PostMapping("/technologyList")
public String uploadMultipartFile(#RequestParam("logo") MultipartFile file, #RequestParam("techName")String techName) {
User user = userService.findByUsername("wmangram");
try {
// save file to MySQL
Skills newSkill = new Skills(techName, file.getBytes(), user);
skillsService.createTechnology(newSkill);
return "File uploaded successfully! -> filename = " + file.getOriginalFilename();
} catch (Exception e) {
return "FAIL! Maybe You had uploaded the file before or the file's size > 500KB";
}
}

Downloading a file with HtmlUnit. Download button has no (seemingly) accessible link

I am new to programming and couldn't find an answer to fit my question, and am unsure where else to turn. As stated in the title, I'm looking to download a file using HtmlUnit in Java, but the download button on the page has no href or onclick I can access. Button follows:
<button class="btn btn-download btn-primary pull-right" id="eta_download" style="display: block;">
<span class="glyphicon glyphicon-download-alt"></span>
</button>
clicking this button causes a normal browser to do some processing and loading for a short amount of time, then open a tab that triggers the download of a gzip file containing a tiff satellite image. I am doing this in a Swing app.
The site I need to download gzipped tiff from
Can anyone help me get this to work?
My code follows:
// Call from whithin new Thread. Get the download
private void getDownload(String latitude, String longitude, String start, String end) throws Exception
{
// Create the browser
final WebClient webClient = new WebClient(BrowserVersion.CHROME);
// Report to user. Loading page...
SwingUtilities.invokeLater(new Runnable()
{
public void run()
{
reportLabel.setText("Loading EEFLUX...");
}
});
// Load page
HtmlPage page = webClient.getPage("https://eeflux-level1.appspot.com/");
// Report to user change in state
SwingUtilities.invokeLater(new Runnable()
{
public void run()
{
reportLabel.setText("Filling in values");
}
});
// Get Latitude, Lomgitude and Date Fields
HtmlInput latitudeField = (HtmlInput) page.getElementById("latitude");
HtmlInput longitudeField = (HtmlInput) page.getElementById("longitude");
HtmlInput date_start_Field = (HtmlInput) page.getElementById("date_start");
HtmlInput date_end_Field = (HtmlInput) page.getElementById("date_end");
// Set the values of fields to that passed into method
latitudeField.setAttribute("value", latitude);
longitudeField.setAttribute("value", longitude);
date_start_Field.setAttribute("value", start);
date_end_Field.setAttribute("value", end);
// Get the Search "Button" then click
HtmlAnchor search = (HtmlAnchor) page.getHtmlElementById("searchForImages");
page = search.click();
// wait for Javascripts jobs to finish
JavaScriptJobManager manager = page.getEnclosingWindow().getJobManager();
for (int i = 0; manager.getJobCount() > 7; i++)
{
final int j = i;
// Report to user change in state
SwingUtilities.invokeLater(new Runnable()
{
public void run()
{
reportLabel.setText("Loading after Search: " + j);
}
});
Thread.sleep(1000);
}
// Get the list of regions Satellites captured and click to open dropdown
HtmlDivision image_dropdown = (HtmlDivision) page.getElementById("image_dropdown");
image_dropdown.click();
// Get the list of regions
HtmlUnorderedList region_list = (HtmlUnorderedList) image_dropdown.getLastElementChild();
// get iterator for list
Iterator<DomElement> web_list = region_list.getChildElements().iterator();
// Report to user change in state
SwingUtilities.invokeLater(new Runnable()
{
public void run()
{
reportLabel.setText("Accessing region list");
}
});
// for each Element, download Actual ET image (and later Grass Reference)
while(web_list.hasNext())
{
DomElement region = web_list.next();
System.out.println(region.getTextContent());
HtmlPage page2 = region.click();
// wait for Javascripts jobs to finish
manager = page2.getEnclosingWindow().getJobManager();
for (int i = 0; manager.getJobCount() > 2; i++)
{
final int j = i;
// Report to user
SwingUtilities.invokeLater(new Runnable()
{
public void run()
{
reportLabel.setText("Loading Image Type page: " + j);
}
});
System.out.println(manager.getJobCount());
Thread.sleep(1000);
}
// Get the Actual ET download Button
HtmlButton ETButton = page2.getHtmlElementById("eta_download");
// Get the Download Page????
HtmlPage page3 = ETButton.click();
UnexpectedPage download_ET = new UnexpectedPage(page3.getWebResponse(), page3.getEnclosingWindow());
// Get the Stream
GZIPInputStream in_ET = (GZIPInputStream) download_ET.getWebResponse().getContentAsStream();
// Try writing the stream (to standard out for now)
try
{
byte[] buffer = new byte[2048];
int len;
while((len = in_ET.read(buffer)) != -1)
{
System.out.write(buffer, 0, len);
}
}
finally
{
// Close the stream
in_ET.close();
}
// just do one till this works
break;
}
}
This is a good start :)
I looked at the request being sent when clicking the button :
As you can see there are several parameters being sent (latitude, longitude, date_end, image_id). In the response, you have the download URL.
This request is generated with some Javascript code, probably this :
function downloadImage(divName,urlProduct){
$(document).ready(function(){
$(divName).on('click', function(){
onlyshowLoading();
$.ajax({
url: urlProduct,
type: "POST",
data: JSON.stringify({
"lat": $('#latitude').val(),
"lng": $('#longitude').val(),
"date_info": $('#date_start').val() + ' to ' + $('#date_end').val(),
'image_id': $("#dropdown:first-child").text().split(" / ")[1],
}),
dataType: 'json',
cache: true,
error: function(){
AjaxOnError();
},
success: function(data){
AjaxOnSuccess();
if (typeof ETa_adjusted == "undefined" || ETa_adjusted == null){
$("#ETrF_adjusted").hide();
$("#EToF_adjusted").hide();
$("#ETa_adjusted").hide();
$("#etrF_adj_download").hide();
$("#etoF_adj_download").hide();
$("#eta_adj_download").hide();
} else{
$("#ETrF_adjusted").show();
$("#EToF_adjusted").show();
$("#ETa_adjusted").show();
$("#etrF_adj_download").show();
$("#etoF_adj_download").show();
$("#eta_adj_download").show();
}
var key = Object.keys(data);
typeName = data[key]
window.open(typeName.url, '_blank');
}
});
});
})
}
So it's possible that HtmlUnit is unable to execute this code, because of Jquery or whatever.
You could create your own WebRequest object, and reproduce the Javascript logic, then you will get the download URL.
It's an interesting subject, if you want to know more I'm in the middle of writing an ebook about web scraping with Java : Java Web Scraping Handbook

Downloading file through Ajax post request

I'm trying to download a file through Ajax post request. But I'm not able to do this, I tried a lot but I am not getting. The bellow is the code, please guide me how to do this.
Query method
$(document).on({click: function() {
var elementId = $(this).attr('id').split("_");
var air = $('#itineraryAir_${formBean.tripDetailsId}').is(':checked');
var car = $('#itineraryCar_${formBean.tripDetailsId}').is(':checked');
var hotel = $('#itineraryHotel_${formBean.tripDetailsId}').is(':checked');
if(air == true || car == true || hotel == true){
$('#itinerary_modal').modal( 'hide');
$.ajax({
url: "<%=request.getContextPath()%>/viewBooking/downloadItinerary/" +air+"/"+car+"/"+hotel+"/"+elementId[2],
type: 'POST',
dataType: 'text/json',
beforeSend: function() {
},
success: function(data) {
},
complete: function() {
}
}, '.edit_hotel');
}else{
var result="Select itinerary."
showMsg($("#ItineraryMsg"),result,"alert-danger");
}
}
}, '.it_download');
In the above code, I'm getting Element-Id, air, car and hotel details and passing all these value through URL. In spring controller class dynamically I am generating PDF file and the file is generating, But I am not able to display for user to download it.
Server side code
//the below line of code to generate pdf file. It is generating pdf file but I am not able to pass to client.
public #ResponseBody void downloadInPDF(#PathVariable("air") Boolean air,
#PathVariable("car") Boolean car,
#PathVariable("hotel") Boolean hotel,
#PathVariable("tripDetailsId") String tripDetailsId,
HttpServletResponse response,HttpServletRequest request) throws IOException {
TripDetails td = tripDetailsService.get(Integer.parseInt(tripDetailsId));
Users user=userService.getByUserIdNew(String.valueOf(td.getUser().getUserId()));
Employee employee=employeeService.getEmployeeByEmployeeId(user.getEmployee().getEmployeeId());
if(hotel == true){
List<TripHotels> tripHotels = hotelService
.getHotelDetailsByTripId(td);
generatePdf.getPdfFileHotel(AppConstant.ETICKET_PATH, tripHotels, td,employee);
String filePathToBeServed = AppConstant.ETICKET_PATH + td.getTripId()
+ "_Hotel.pdf";
File fileToDownload = new File(filePathToBeServed);
InputStream inputStream = new FileInputStream(fileToDownload);
response.setContentType("application/pdf");
response.setHeader("Content-Disposition", "attachment; filename="+td.getTripId() + "_Hotel.pdf");
IOUtils.copy(inputStream, response.getOutputStream());
response.flushBuffer();
inputStream.close();
}
}

How to use blueimp jQuery file upload: Empty file upload result in Struts 2, fileitems are empty

I am using Blueimp and server side is Java, Struts2. I couldn't find examples using Java, anyway I managed to use the sample code, but I am getting "Empty file upload result" when I am trying to upload a single file also. The HTML part is the same, I am not pasting here as it may go lengthy.
The jQuery is:
$(document).ready(function () {
'use strict';
// Initialize the jQuery File Upload widget:
$('#fileupload').fileupload();
// Enable iframe cross-domain access via redirect option:
$('#fileupload').fileupload(
'option',
'redirect',
window.location.href.replace(
/\/[^\/]*$/,
'/cors/result.html?%s'
)
);
if (window.location.hostname === 'blueimp.github.com') {
// Demo settings:
$('#fileupload').fileupload('option', {
url: '//jquery-file-upload.appspot.com/',
maxFileSize: 5000000,
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
process: [
{
action: 'load',
fileTypes: /^image\/(gif|jpeg|png)$/,
maxFileSize: 20000000 // 20MB
},
{
action: 'resize',
maxWidth: 1440,
maxHeight: 900
},
{
action: 'save'
}
]
});
// Upload server status check for browsers with CORS support:
if ($.support.cors) {
$.ajax({
url: '//jquery-file-upload.appspot.com/',
type: 'HEAD'
}).fail(function () {
$('<span class="alert alert-error"/>')
.text('Upload server currently unavailable - ' +
new Date())
.appendTo('#fileupload');
});
}
} else {
// Load existing files:
$('#fileupload').each(function () {
var that = this;
$.getJSON(this.action, function (result) {
if (result && result.length) {
$(that).fileupload('option', 'done')
.call(that, null, {result: result});
}
});
});
}
});
The action:
#Namespace("/")
#InterceptorRefs({
#InterceptorRef("fileUpload"),
#InterceptorRef("basicStack")
})
public class UploadAction extends ActionSupport implements ServletRequestAware, ServletResponseAware{
HttpServletRequest req;
HttpServletResponse res;
// private File fileUploadPath=new File("c:\\temp\\");
private List<File> uploads = new ArrayList<File>();
private List<String> uploadFileNames = new ArrayList<String>();
private List<String> uploadContentTypes = new ArrayList<String>();
public List<File> getUploads() {
return uploads;
}
public void setUploads(List<File> uploads) {
this.uploads = uploads;
}
public List<String> getUploadFileNames() {
return uploadFileNames;
}
public void setUploadFileNames(List<String> uploadFileNames) {
this.uploadFileNames = uploadFileNames;
}
public List<String> getUploadContentTypes() {
return uploadContentTypes;
}
public void setUploadContentTypes(List<String> uploadContentTypes) {
this.uploadContentTypes = uploadContentTypes;
}
#Action(value="upload", results = { #Result(name="success", type="json")
})
public String uploadFiles() throws IOException
{
System.out.println("upload1");
System.out.println("files:");
for (File u: uploads) {
System.out.println("*** "+u+"\t"+u.length());
}
System.out.println("filenames:");
for (String n: uploadFileNames) {
System.out.println("*** "+n);
}
System.out.println("content types:");
for (String c: uploadContentTypes) {
System.out.println("*** "+c);
}
System.out.println("\n\n");
if (!ServletFileUpload.isMultipartContent(req)) {
throw new IllegalArgumentException("Request is not multipart, please 'multipart/form-data' enctype for your form.");
}
return SUCCESS;
}
#Override
public void setServletRequest(HttpServletRequest hsr) {
this.req=hsr;
}
#Override
public void setServletResponse(HttpServletResponse hsr) {
this.res=hsr;
}
}
As I said, I have changed the action file, but I still get all empty values for files, and in the Firebug's GET response I see "Request is not multipart, please 'multipart/form-data' enctype for your form".
You may use fileUpload interceptor to parse your "multipart/form-data" requests. It uses the same commons-fileupload implementation wrapped by the MultipartRequestWrapper in prepare operations by the Struts2 dispatcher. More about how to file upload with examples you could find here.

Categories