The flow looks like that:
user is filling the form
form is passed to the server by ajax
form is saved to db, then the pdf with the form data is created and saved in the app folder (probably a bad move here...)
ajax success causes the page to append a button 'Download' with value equal to current pdf's name so button 'Download' appears to the user
If user presses the button the very pdf that was just saved is gonna download.
Refreshing the page makes the button disappear.
I've got stuck on point 5. I have created another ajax (to avoid reloading the page) bound to the Download button. It correctly asks the server to look for the file, creates a django File object: pdf_file = File(open(file_path, 'rb'))
and creates a HttpResponse with file, and content_type='application/pdf' or 'application/download'.
response['Content-Disposition'] is attachment.
Then the ajax returns response - only it does not. Server raises no error but ajax error function is called.
I've read that downloading with ajax is not possible. Could you help me a bit to get it straight? If above snippets are not clear, I shall provide more code.
Python 3.5, Django 1.10
Do like
window.location.href = "/url/to/downloadfile/"
in javascript after success of posting form. OR
#html
<button onclick="myfiledownload()">Download</download>
#javascript
function myfiledownload(){
window.location.href = "/url/to/downloadfile/"
}
Instead of using ajax to download the file bind the button to a download link where the file may be hosted
https://www.mywebsite/download/?fileid=3247023
You should at least seperate your file in a media root
Note: in production you will have to use a cdn to host your static files
Related
Below image depicts a screen in my sample application which has
file upload functionality.
Below are the steps I followed to upload and save files in Database.
In this screen once user clicks "Browse" button and selects the file(s) that need to uploaded, an AJAX request will be made to server(MVC application) for each file selected.
For each upload AJAX request, server will save the file data(byte array) in session array variable and sends JSON response(which has file name and file size) to Browser.
Browser will display JSON response.
Once user clicks the "Submit" button , the file information which is already there in session variable will be stored in Database.
Following above approach I could implement the desired upload functionality.
Question: I would like to know whether this approach is correct, am I making
any mistake?
I display information, gather some user's input, and call a controller method using ajax/java script call from the view. However, instead of displaying a new/different html page, the controller method returns back to the original html page that I called jscript from.
Is this because of ajax call? How do I make sure that controller method would display the html file it's supposed to, instead of staying on old html page?
It sounds to me like what you want to do is to open a different url than the one you are on. To do that you do not use ajax. Instead try using javascript to change window.location to tell the browser to go to the url (or 'call your controller'). It looks like this:
window.location.assign("/your/controller/url"); // or
window.location = "/your/controller/url";
There is more to read about it here: https://developer.mozilla.org/en-US/docs/Web/API/Window.location
You can think of ajax as a separate little browser that lets you call the web server but letting you handle what comes back with javascript rather than always showing it to the user. So if you want to do the call with ajax but get the response HTML into your page, you are responsible for taking that response and inserting it into the DOM.
I have a page in my web flow where I want to upload a file without refreshing the page. I tried using an Ajax call for that, but failed. I couldn't figure out how to send the data in the uploaded file to the server side/back end for further processing. I'm using the Spring MVC framework and I don't want to use PHP.
Can anyone suggest a solution or some sample code with which I can get my job done? I am very new to JavaScript.
One more thing is i have to get back to the same page after going to server side to process uploaded file and return to same page with a string from server side.all this happen without refreshing the current page
Any suggestion would be highly appreciated.
Assuming you've already gotten your form built and server-side controller set up to handle the upload, this little snippet should get you on your way to AJAX-y refresh-less file uploading glory!
//create a new FormData reference
//(note: you could use getElementById or querySelector)
var myForm = document.forms.myUploadForm;
var fd = new FormData(myForm);
//create and open an XHR
var xhr = new XMLHttpRequest();
xhr.open("POST","http://www.example.url/the/path/to/your/upload/controller");
//set up event listeners (optional)
xhr.onreadystatechange = monitorStatusFunction;
xhr.onprogress = updateProgressBarFunction;
//send the form (w/ no page refresh!)
xhr.send(fd);
I Struggled for lot many days and at last i figured out a solution which may not be the best solution but i am posting it here so that anyone like me can get help from this..
To meet all my requirements
I opened a jsp page as a popup from my jsp page and from that page i landed on my controller and done with my work on the server side and returned a string depending upon the content of the file uploaded to the same popup page and from the popup i transfered that string to my parent page.
Hence my work is done without refreshing the page...
Steps to do this
1.open a popup as follow
window.open('//url of jsp page to open','//somename','//properties of popup page');
2.land on your controller from the popup and return to the same jsp page with a string i want from the jsp page.
3.pass that string to the parent page as follow.
window.open.urparentjspfuntion(valuefromcontroller);
4.in parent page define a function to do what ever you want.....
I hope this solution may help so of those like me...
Goal:
I want to let my users download a file on my webpage. I want a new window to open and the file to be either displayed or downloaded there.
My implementation:
This file however, first has to be generated on the server-side, which might take a while. When the user clicks the button to download the file, I do an ajax call and show a waiting animation until I get a response. The controller action that handles the call will generate the file (PDF) and return a FileResult. Now in the succes function of my ajax call back in javascript, I get the file data.
Problem: I have no Idea what I'm supposed to do with this data to get it to the user.
Workaround:
Right now I use a workaround where I do not return the file in the ajax call, but store it in session. In the succes function I do window.open("/controller/getPDFFromSession") which will download the file. However, I prefer not to use the session for these kind of things.
Thanks in advance.
Problem: I have no Idea what I'm supposed to do with this data to get it to the user.
You shouldn't use AJAX for downloading files for this reason. You could do the following:
The user clicks on the download button
Using javascript you show some progress image informing him that he will have to wait
Using javascript you generate and inject a hidden iframe into the DOM having its src property pointing to the controller action supposed to generate the file
Once the iframe is loaded you could hide the progress image
I have a html/javascript table/grid that I need to import data from a file, this is not possible without serverside. So I decides to have a FileEcho server that takes a file upload from the table/grid, the problem is I don't want to refresh the page afterwards, it's a multipart request, not an ajax request. Is it possible to up the file ajax style?
how can this be done? any solution to my problem?
A popular way is to do the file upload in an iframe (you can set the <form>'s target attribute to the name attribute of your iframe)
You can attach an onload event on the iframe to find out when the data has been echoed from the server. From there, you can grab the contentDocument attribute from the iframe object in javascript (from there you could look at the innerHTML content of the contentDocument.body to see the data).
Just note that in IE, you have to use document.frames['frame_name'].document instead of iframeObject.contentDocument
See these articles for more info:
http://www.ajaxf1.com/tutorial/ajax-file-upload-tutorial.html
http://www.openjs.com/articles/ajax/ajax_file_upload/