import from file in javascript - ajax

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/

Related

Uploading a file stored in browser memory via ajax

Assume there are no cross-domain issues with the ajax calls to the server(s).
First, I am making an ajax call to grab the contents of a binary file (docx) from the server. The contents are then stored in the browser memory.
Next, I need to make another ajax call to the server to upload the file contents along with other form fields. The page may already contains the form, or the js can dynamically create the form (which would be hidden), or I can use the FormData object in the js code.
I can't figure out how to take file contents that are in memory and include them in a form POST call to upload the file along with the other form inputs. Any idea how to do this?
I thought perhaps using the FileReader object I could do this, as I have seen where you can use FileReader.readAsBinaryString() on a blob or binary data, then have the onloadend trigger the form submit.
I would prefer to use jquery, but that is not necessary.

Custom title and image for Facebook share button on AJAX result

This question exists in different flavors, but not for AJAX pages.
I use AJAX to pull a single video into my page and I want a custom FB share button for it. Everything I've read so far says that FB pulls the required title and image from meta-tags in the page's < head> section (og:image and og:title).
I've tried to change the meta properties when the AJAX call returns, before rendering the share button. This hasn't worked. It uses the values that were present upon initial page load. I have yet to encounter a single answer to this question.
Are there data attributes I can add to the 'fb-like' div to specify a custom title and image (similar to data-href)?
Danke!
You need an individual URL for each individual piece of content that you want to share. Open Graph objects (and simple shared links “become” such, automatically) are identified by their URL (og:url).
Now if your whole page is built on AJAX, you still need to create such individual URLs somehow – the Facebook scraper tool does not “speak” JavaScript, and relies solely on the OG meta information that the server delivers for any URL it requests.
Since the hash part of an URL is only of relevance client-side (and does not even get send to the server), “typical” AJAX URLs that rely on those to tell the client which piece of content to load in the background are no good here.
So if you want to share two pieces of content (videos) as http://www.example.com/?v=vid1 and http://www.example.com/?v=vid2, then you have to make sure that your server delivers the meta data for each video under its respective URL.

Alternatives to Struts2-jquery plugin for uploading files in Struts2 using Ajax

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:

Handling an ASP.NET MVC FileResult returned in an (jQuery) Ajax call

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

Can I edit the response object on Ajax call?

I have a link button on my page clicking on which, I download a file from some DMS system and then send the file after zipping it on server to the client using response.write.
But since the page is ajaxified, it throws an error.
Is possible to send a file to the client on a Ajax call?
I am using Telerik RadAjax.
Don't use Response.Write or Response.WriteFile to force file-download because that will simply not help in this context.
In order to do what you want, save the zipped file on disk and redirect the user to download-file. You can create a temp folder to hold the zipped files which you create on the fly and flush them every one hour or any such predefined time-interval. You need to call this from standard post-back driven non-ajaxed call. This will preserve the state.
Response.Redirect("path-file-to-download");
Response.End();
There is no reason to request the file with an AJAX callback, as downloading the file doesn't refresh the page and therefore the user doesn't lose the context, which is usually the reason why you would prefer AJAX callback.
According to your comments, there are 2 ways to overcome the problem :
You can write into the response stream at the same time that you are downloading the file from the second server and therefore making the progress visible in the open/save dialog of the browser.
You can temporarily store the file somewhere in the database / file system and send it with a second request made directly by the user.
The first one seems more reasonable to me as you don't have to deal with the intermediate storage.
You can send whatever data you like, you just have to be able to handle it in your JavaScript.
There isn't a great deal that JavaScript could do with a zipped file (unless you fancy finding, or writing, a zip decompression library in JavaScript).

Resources