I am uploading a file using struts 2 with jsp as front end, but I dont want to refresh the page after the file is uploaded, so i am using Ajax but with that I am not able to get the File object in action, it seems file upload needs form tag in jsp,and if I am submitting the form then the page gets refreshed.
I researched through the net but cant get many relevant results, it would be of great help if someone guides me through this, is there a way for it. Any help would really be appreciated.
Best regards
I suggest to use iframe for upload file instead of ajax,
Sample code for Upload Csv file using struts2 and iframe :
var file = $("#fileUpload").val();
if(file.indexOf(".") != -1 && file.substr(file.indexOf("."))==".csv"){
/* created IFrame For UPload file*/
var iframe = $('<iframe name="uploadIPAddressIFrame" id="uploadIPAddressIFrame" style="display: none" />');
$("body").append(iframe);
/* Set Form for submit iframe*/
var form = $('#ipPoolForm');
form.attr("action", "uploadCSVFile.do");
form.attr("target", "uploadIPAddressIFrame");
form.submit();
openDialog(title);
/* handle response of iframe */
$("#uploadIPAddressIFrame").load(function () {
response = $("#uploadIPAddressIFrame")[0].contentWindow.document.body.innerHTML;
$("#chkIPAddressDiv").html(response);
$("iframe#uploadIPAddressIFrame").remove();
});
After upload if you submit form then change target of form :
// Because of using iframe for upload set target value
$("#ipPoolForm").attr("target", "");
Related
I've this Ext JS upload file form and it is performed smoothly, like this :
This upload file form belongs to a page, say Filling Page, that have a Continue Button to Confirm Page whether the page will be saved or not. In Confirm Page, I have a Cancel Button, which if pressed goes back to Filling Page. Now this is where the problem begins. When I went back, upload form looks like this :
I'm using POST to pass the data. When I printed it, the result shows nothing wrong, in array form like this :
[{"id":1, "filename":"b.xlsx", "path":"/var/www/.../b.xlsx"}]
The code for show data to upload file form :
var storeFile = new Ext.data.Store({reader: new Ext.data.JsonReader({fields: filelist})})
var jsonFile = '<?php echo $this->file ?>';
storeFile.loadData(jsonFile);
So, what did I miss? Any help appreciated.
I am looking to create a file on the fly and offer a download link to the user in a GRAILS application.
I followed the approach from here. I have no errors however it doesn't seem to work. Here's my controller code.
`render (file: pptFile, fileName:'someppt.pptx', contentType: 'application/octet-stream')
Client side code makes an AJAX call to retrieve the file from server. It does not cause the server to force downloading of the file on the client (browser). Here's the client side code.
$.ajax({
type : 'POST',
url : '<<URL>>',
success: function(result) {
var uri = 'data:application/octet-stream;charset=UTF-8,' +
encodeURIComponent(result);
window.open(uri, 'somePPT.pptx');
},
failure: function(){
alert ('failure')
}
});
Perhaps something akin to this (paraphrased, but used for downloading a json file):
def someControllerMethod() {
def dlContent = someService.marshalJson()
def contentType = "application/octet-stream"
def filename = "someFilename.json"
response.setHeader("Content-Disposition", "attachment;filename=${filename}")
render(contentType: contentType, text: dlContent as JSON)
}
okay. So I finally got this to work. As proposed by #railsdog and many others (This problem has been discussed on other threads in stackoverflow but the specific case I had was slightly different from those) I ended up writing to response directly from server and took out the AJAX call. The only reason I was doing an AJAX call was because I did not want to submit the current page that had the "generate file" functionality (There are many data elements on the page and I did not want to re-do the entire page just for downloading the file). So I ended up using an anchor tag with target as "_blank". Here's the code snippet
<a href="myControllerMethodToGenerateFileAndWriteToHTTPResponseDirectlyAsSuggestedByOthersInThisPost"
target="_blank"/>
This actually opened a new page and did the submission to initiate the download. Problem solved. It's working fine in CHROME. :) Thanks guys!
I like the solution using the render method from #railsdog !
A slightly other approach which I used so far was:
def controllerMethod() {
...
File file = sepaXmlService.createTransfersFile(...)
response.setContentType("application/xml")
response.setHeader("Content-disposition", "attachment;filename=${file.getName()}")
OutputStream out = response.getOutputStream()
out.write(file.bytes)
out.close()
file.delete()
return
...
}
In the view I use the following statement in the form:
<g:actionSubmit action="controllerMethod" class="btn" value="Get XML!" /></td>
I think it should also be possible to use a
<g:link controller="foobar" action="controllerMethod" class="btn">GetXML</g:link>
We use ASP.Net Mvc 4.0.
My objecctive is to save a form with both normal input fields as well as file input fields.
I should be able to add extra data while posting.
I should be able to do perform few actions on 'Ajax Post's Success.
We used ajax post to post the form data as we could accomplish above 2, but failed in serializing and posting of files to server.
Whenever we post using ajax post, always Request.Files.Count == 0, when i check in my controller's Post Action.
ajax post i have used is:
function PostData(formId, eventSource, eventName, eventArgs, controlId) {
var $dialogForm = $("#" + formId + "Form");
fdata = $dialogForm.serialize();
fdata = fdata + '&eventSource=' + eventSource + "&eventName=" + eventName + '&eventArgs=' + eventArgs;
$.ajax({
url: $dialogForm.attr("action"),
type: $dialogForm.attr("method"),
cache: false,
data: fdata,
success: function (result) {
ProcessEvent(result);
}
});
}
Please provide me a solution for this!
well you cannot upload files when you go with the concept of ajax. But there are tweaks which are used to upload file and form data using ajax. Whenever a file type is encountered in a form the form data along with file can be copied to an iframe and the iframe can be submitted which give you a feel that file has been uploaded along with other form data using ajax.
There are various plugin available in jquery which ease this task for you.
One of my favourite is ajax form
http://malsup.com/jquery/form/#file-upload
You can use this one..
In my Grails application, a user can click on a g:link which will call my controller to export certain data to a CSV file. This works with no problems.
I then moved that button to a jQuery dialog box and, when the button is clicked, I use
${remoteFunction(action:'export', onSuccess:'closeMe();', id:courseInstance?.id)}
to call the same controller method and close the dialog box. I've confirmed that the method is actually called, and the dialog box closes. The user is not prompted with the CSV dowmload, however. I'm assuming this has something to do with the remoteFunction, but I'm not really sure. Can anyone explain why this might happen, and a potential fix?
Thanks!
With AJAX requests you can't handle to download content as attachment and so it can't trigger the Save As dialog.
There are a couple of workarounds for this:
Use a plain g:link as before and bind the 'closeMe();' function to the 'click' event. The problem is that you have no control on error or success response.
Use an iframe: You can create a temporary invisible iframe and set its location to the URL of the file to download. It also has the backside of not controlling the success/error response.
The code could be the same as in this answer:
<script type="text/javascript">
function downloadURL(url) {
var iframe;
var hiddenIFrameID = 'hiddenDownloader';
iframe = document.getElementById(hiddenIFrameID);
if (iframe === null) {
iframe = document.createElement('iframe');
iframe.id = hiddenIFrameID;
iframe.style.display = 'none';
document.body.appendChild(iframe);
}
iframe.src = url;
}
</script>
And the link
Export
I have some dynamically generated files which I want my JSF 2.0 app to download for the user. I've been able to get this working using the code found in the solution here :
Forcing a save as dialogue from any web browser from JSF application
and a command button in a form on the page
And that works fine except for one hitch. I'd like to be able to render a message back to the user on the initial page that tells them their file is being processed and to please wait. Obviously the responseComplete call stops that from happening. Is there some way to re-render the submitting page and send back a file from the same button?
No, you can't. You can send only one response back per request. Best what you could do is to use JavaScript to show an initially hidden div or something which contains the message during the onclick. But you'll have the problem that you cannot hide it whenever the download is completed.
An alternative is to store the file on temp disk and return a fullworthy JSF response wherein you display a download link which returns the file from temp disk by a standalone servlet.
I think you can use ajax to solve this. Call the method that creates the file from an ajax action and provide a javascript callback to handle the navigation or to show a layer or whatever
<script type="text/javascript">
function processEvent(data) {
if (data.status == "begin") {
showWaitingLayer();
} else if (data.status == "success") {
hideWaitingLayer();
showDownloadLink();
}
}
</script>
<h:commandLink action="#{myBean.createDocument}">
<f:ajax onevent="processEvent"/>
</h:commandLink>