Send request to download file, catch response in Javascript - javascript

In a Rails2 Webapp, I am creating in javascript a form to forge a request to download a file. In the controller, I render the response using send_file so the file is downloaded.
There is a rather long process going on looking up the file to download and meanwhile I have the client waiting for the file to start being downloaded. For this reason, as soon as the client clicks the download button I display a small massage saying "Requesting file...".
Problem:
How can I (on javascript side) know when the response is rendered (aka the file starts to download) so I can hide the message I am displaying? I use ajax everywhere and I throw the showMessage method in the "before" part of the call and the hideMessage in the "complete" part of the jquery ajax call. But since I cannot request a file to be downloaded with an ajax call I have to do it trough a form but then I don't know how to realize when I get the repsonse back (or the file starts to download)

The basic idea is to send a cookie along with the file. Some javascript code checks the cookie periodically. When javascript gets the cookie, you know the downloading begins.
You can find sample javascript code here (server code in Java) and here (server code in ASP.NET).
In Rails, the cookie could be sent like this:
cookies['download_token'] = params[:download_token]
send_data ...

Related

How to upload and download any file in the browser?

This is part of an experiment I am working on.
Let's say I upload a file eg: .psd (photoshop file) or .sketch (sketch) through the input type file tag, it displays the name of the file and can be downloaded as a .psd / .sketch on click of a button (without data corruption)
How would this be achieved?
Edit 1:
I'm going to add a bit more info as the above was not completely clear.
This is the flow:
User uploads any file
File gets encrypted in the client before sending to a sockets.io server
User on the other end receives this file and is able to decrypt and download.
Note: There is not database connected with the sockets.io. It just listens and responds to whoever connected to the server.
I got the enc/dec part covered. Only thing is uploading and store as ? in a variable so it can be encrypted and doing the opposite on the recepient end (dec and downlodable)
Thanks again in advance :)
I think these are your questions:
How to read a file that was opened/dropped into a <file> element
How to send a file to a server
How to receive a file from a server
When a user opens a file on your file element, you'll be able to use its files property:
for (const file of fileInputEl.files) {
// Do something with file here...
}
Each file implements the Blob interface, which means you can call await file.arrayBuffer() to get an ArrayBuffer, which you can likely use directly in your other library. At a minimum, you can create your byte array from it.
Now, to send data, I strongly recommend that you use HTTP rather than Socket.IO. If you're only sending data one way, there is no need for a Web Socket connection or Socket.IO. If you make a normal HTTP request, you offload all the handling of it to the browser. On the upload end, it can be as simple as:
fetch('https://files.example.com/some-id-here', {
method: 'PUT'
body: file
});
On the receive end, you can simply open a link <a href="https://files.example.com/some-id-here">.
Now, the server part... You say that you want to just pass this file through. You didn't specify at all what you're doing on the server. So, speaking abstractly, when you receive a request for a file, you can just wait and not reply with data until the sending end connects and start uploading. When the sending end sends data, send that data immediately to the receiving end. In fact, you can pipe the request from the sending end to the response on the receiving end.
You'll probably have some initial signalling to choose an ID, so that both ends know where to send/receive from. You can handle this via your usual methods in your chat protocol.
Some other things to consider... WebRTC. There are several off-the-shelf tools for doing this already, where the data can be sent peer-to-peer, saving you some bandwidth. There are some complexities with this, but it might be useful to you.

Express.js how to make html render on client side with response.render?

I have basic express js application with following route:
router.get('/', function(req, res){
res.render('login');
});
It works fine - after logging into main page on my localhost, html from login.pug is nicely rendered on client side. However when my app runs, sometimes I want to render another pug file, when there already is html rendered on client side:
app.get('/dashboard', function(req, res){
res.render('dashboard', {user: req.query.login});
});
But when get request is send on'dashboard'path, nothing happens. As I understand, this happens because res.render just parses pug file into HTML and sends it to client as plain string (which I can inspect in browser developers tool, when I check AJAX response I see exactly rendered HTML).
Now my question is: is there a way to render HTML from res.render in client automatically? So on server side I just write res.render('template') and on client side page is re-rendered without handling the response?
I know I can clear whole DOM and append received string into document.body, I know also that I can make a POST form request and then page will be re-rendered automatically, but I want to avoid both solutions (don't ask why).
Thank you for help in advance.
When your Javascript sends an Ajax request, the response from that Ajax request is just returned back to your Javascript. That's it. The browser does not show anything. If you want to do something with that response, then it is the responsibility of your Javascript to do something with it (insert it in the page to show it, etc...).
If what you really want is that you want the browser to actually go to the /dashboard URL and then show that page, then your Javascript can just do:
window.location = '/dashboard';
This will tell the browser to fetch the contents of that URL, it will make a request to your server, your server will return the rendered HTML and the browser will display it in the page and show /dashboard as the URL in the browser bar. That should do everything you want.
So, it's totally up to your Javascript. Pick the right tool for the job. Either fetch data for your Javascript with an Ajax call and process the result in your Javascript or instruct the browser to load a new page. One or the other.
But when get request is send on'dashboard'path, nothing happens. As I understand, this happens because res.render just parses pug file into HTML and sends it to client as plain string (which I can inspect in browser developers tool, when I check AJAX response I see exactly rendered HTML).
Yes, that what Ajax requests do. They fetch content from the server and return the data back to your Javascript (and only to your Javascript).
is there a way to render HTML from res.render in client automatically?
Yes, use window.location = '/dashboard'; from your Javascript.
So on server side I just write res.render('template') and on client side page is re-rendered without handling the response?
Not from an ajax call. Ajax calls never automatically display content. Never. Ajax calls are programmatic requests that return data to your script. That's what they are. But, yes from Javascript you can cause content to be automatically displayed by setting window.location to a new URL.

Locals in Javascript/JQuery like Locals in Rails?

I create a Js Application and want to have English and German locals, which i can switch via button.
Is there a way to insert locals from a extra file in a .js file, like the function t'...' in Rails ?
As far as i know there is no way to do it directly and the reason is fairly simple too, erb is executed at the server side and javascript is a client side language which means its executed in your local browser, thats why if you even try to pass a variable between the two you'll have to make a request to the server, However this problem is tackled by calling an AJAX request, this AJAX request does the same thing as sending a new request to the server however it does that without refreshing or reloading the page to it gives the users the illusion that no request was made.
a guy asks a similar question here:
http://www.quora.com/Ruby-on-Rails/Can-I-pass-a-JavaScript-variable-to-a-Rails-method
and you can learn more about AJAX here:
http://www.w3schools.com/ajax/default.asp

How to pass javascript variables to rails variables

How can I pass a javaScript variable into ruby. I want to do something like this but I don't know how to express it.
function save(){
var g = document.getElementById("self").value;
<% #owner.info = g %>
}
Another possible work around is that i would need to be able to extract contents of a text area through rails and not javascript.
Can anyone help me?
What you are attempting to do doesn't make sense with a vanilla rails installation and javascript. Here's a good workflow that accomplishes what you're trying to do along with some details:
1. A page is requested from the server
The ruby code that runs rails and your application is executed on the server. The server receives a request, executes the ruby code, and sends the response as an html document.
2. A user gets the response from the server
The user's browser receives the html and turns it into a pretty web page. It's at this point that any javascript related to your application is executed in the user's browser. The connection with the server has been severed and no further ruby code will be executed until another request is made.
3. The user fills out an ajax form
On the page rendered in step 2, you have a form. Following this guide you can tell this form to submit via ajax. That means instead of requesting a new web page, the browser will send a special request using javascript to the server. The server can save the form values to your database and send a response back to the browser. All the while the user hasn't left the page they are currently viewing.
Alternatively you can skip the ajax and have the user submit the form, but you'll need to redirect them back to the page they were viewing (and probably adding a note the form they submitted was saved).

Force browser download a large file

I'm using a POST request with body to dynamically create a specified file on the server side and streaming it to the client as a response. The problem on the client side is that the file is being downloaded into the response object (browser's cache memory I suppose, as a temporary file) instead of the PC's hard drive.
How can I pass the byte stream directly for the browser to handle and direct into the /Downloads folder or wherever the user has set the downloads go?
The file size is really large and there's not enough space on the gadget's hard drive to create it there and give a link for GET request. So I need to create it on the fly and stream to the client as a POST response.
Right now I've written my code in Angular, but the language doesn't really matter. I'd like to understand how the browser handles the situation.
When I execute the HTTP request, I bet the browser does something with it before it's passed to the socket. And I'm sure the browser does something with the received request too before passing it to the piece of code which performed the request.
I mean can you only by setting the response headers make the browser download the file into /Downloads? What happens then to the waiting HTTP request if the packets are "stolen" by the browser? Or when the response headers arrive to the response object, can you somehow notify the browser that the body of the response is a file byte stream we wish to download into /Downloads?
And I have the possibility to modify my server code too.
EDIT More detailed explanation:
My server is sending the 5GB file to the client. Instead of just receiving that file in the temporary memory of the browser I would like to save the file directly on hard drive.
But naturally the browser prevents the direct access to the users computer so I can't write it there. So how do I pass the byte stream for the browser to handle and save into a file?
Ok, I have solved the problem. So if you send a file request yourself to the server from your javascript code the browser will just pass the received response directly to your response object, but you can't store it on the hard drive without some external (browser supported) tools.
What I mean is that if you perform any kind of $http.post() or .get() from your scripts the response will be passed to the $http.post().then(function(response){...}) directly and it's passed only after the whole response is received. Meaning that if you're expecting a file with the size of 5GB it will fail for being too large to be received inside the response object.
Instead what you have to do is to trigger the download in another way. What I did in my code is that I built a hidden
<form method="POST" action="/set.uri.here/" id="download">...</form>
and when the user clicks the button to download the file, I run a function that builds the body of the form and then submits it. Which looks like
var form = document.getElementById("download");
// magic here... create the body for the form and so on
form.submit();
This way you can pass the request to be done by your browser so that then the response will be also handled by the browser. This is the crucial difference between doing the request yourself or by the browser. If you do the request yourself then the browser won't download the object but you will receive it yourself to do something with it.
If you wish the browser to download the object, then, make the browser do the request for the object as well!

Categories