We have a modal form with an input of type file. We want to upload the file to the server when the user clicks 'Save'. We don't want to actually refresh the page, but simply close the modal.
Can we upload a file via $.ajax? Otherwise, what tools are available for uploading files behind the scenes?
$.ajax() will work, but you'll do best to specify a POST. See the answer here:
Sending multipart/formdata with jQuery.ajax
Also, this jquery plugin supports file uploads:
http://jquery.malsup.com/form/
Related
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
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 want to upload a file using the < s:file > tag, but Struts2 doesn't support Ajax for this functionality, as far as I know. I tried to do it using the Struts2 jquery plugin but it overwrites some jquery functions that i need an can't change right now (like .dialog()).
Is there an alternative way to do it?
There are many jquery based plugins for this purpose.
I am using this library. Its the most simple and elegant plugin, minimal requirements and lots of options.
Here are some other plugins which I considered(my preference was a plugin which doesnt use flash)
This one shows thumbnail before uploading and also overall progress
This one shows remaining time, uploading speed and remaining size
This is how I do it (I'm not using JQuery):
I hide an iframe inside my page. I give it an id (iframe for example) and a name (the same than the id).
I set the attribute "target" on my form to the id of the hidden iframe (then, the response from the server is loaded inside the iframe.
I register an event handler on the iframe to react on the onload event. The handler analyse the response from the server. Alternatively, I sometime just return javascript code from the server in a <script> tag. This code performs action on the client upon success or failure of the intended action.
If you like the idea, you may want to read this article or this one:
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/