Uploading a file stored in browser memory via ajax - 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.

Related

How to load view containing data with ajax?

I have Restful controller that renders a view with data from database and I want to load this view with its data in another view via ajax. There is a problem "undefined variable". Is there any solution?
When you pass variables to your view they are only available on the server side while the view renders and then they are discarded. What this means is that the variables are only available to the php of your application and then they are gone by the time the view has been rendered and sent to the visitors web browser.
If you try to use the variables with JavaScript then you are running the JavaScript on the client side (as opposed to the server side). The variables that you pass to your view do not exist on the client side where your JavaScript runs.
From what it sounds like. You are defining a variable in your controller via laravel. Then you are passing the variable from the controller to the view. The view is then rendered as html and sent to the visitor's computer (the client) which the html is then loaded and that is when the JavaScript starts to load.
That's the problem, now possible solutions.
First you could send the variable (assuming it is simple data and not like an object) to the browser through laravel flash variables which are actually stored on one time cookies on the client side. Then you use JavaScript to access the cookie and get the data then storing it to a js variable and using it in your script.
Second you create an Api to respond to your http requests and then send an Ajax request from your JavaScript to the api to get the data. Then you would store it in JavaScript and use it. This allows complex data like objects because you would use the JSON format to send information to respond to the Ajax call. While cookies are restricted to (5kb I think) there is really no theoretical limit to JSON data.
I hope that helps and I hope I'm understanding your problem.
Would need to see your javascript before anything, but usually for me this means a misspelled element id or misspelled a reference file

Can bytes(pdf) be opened from an ajax call

My controller returns a pdf file using an ajax call. It's clear that using
window.open(response.reponseText)
is obviously not gonna help on success return
It'd be helpful if my controller that spits out the pdf file didn't take a List of object as a parameter. That's why I have to use an ajax call to call the controller. I can't use an iFrame for this exact reason as well. I found that using ajax I could send a json object. I can't do this using iframe.
Is there a way to open the returned file or even pop up a message box to download the file.

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).

import from file in javascript

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/

Resources