Find out when document.location.href has been completed - javascript

I have a button that lets users download a file.
The file is returned from the server in the Response (binaries set as attachment), and I am letting the browser handle the file download from there on out.
Im doing the following on button click:
var fileUrl = 'mysite.com?id=12345';
document.location.href = fileUrl;
This will load the file, however, it can take a couple of seconds. I would like to show a preloader but then ofcourse I have to know when the file has been downloaded completed. Since I'm staying on the same page, is there a method or callback that tells if the 'new' location is loaded and thus I can hide the preloader?
Thanks!

Assuming you can download the file twice, you could load the file in a hidden iframe and detect when the iframe is done loading. Then, the file is already cached and should download quickly.

Related

IE11 : cross iframe file handling

I want to pass javascript File object from one iframe to another. The file is selected by the user with a dialogue box.
I pass the file using the following code in the destination iframe :
var file_selection_field = top.frames['sourceIframe'].document.getElementById('FileSelectionFieldId');
var the_file = file_selection_field.files[0];
Then I slice the file and upload it to the server using AJAX.
the file.slice(index, index+chunk_size);
// Ajax call ..
The problem is that once my source iframe is changed (and the file is still loaded in the destination iframe) I get "Script70:permission denied" error in IE11 when I call the slice function.
Both iframes are at the same domain.
Is there a way to solve it?

How to detect download complete in javaScript

I want to execute two operations in one javaScript function
force download of a csv file
send an ajax request to mark records in table that records were downloaded.
Since both of these operations will present the user with prompts and dialogue boxes, I want to delay execution of the 2nd event until the first event is complete.
When the user opens the page, they are presented with a list of current records. They check records they wish to process. The checked records are then packaged and the user is presented with the download "Save" or "Open" box. when that operation is complete then the ajax request should execute.
My thought was I could detect when "a" was removed from the document. But I'm not sure how I would do that.
Here is my code for the download
var a = window.document.createElement('a');
a.href = window.URL.createObjectURL(new Blob(exportArray, {type: 'text/csv'}));
a.download = 'jobCostHandOff.csv';
// Append anchor to body.
document.body.appendChild(a)
a.click();
// Remove anchor from body
document.body.removeChild(a)
I have implemented such a mechanism in a web application with the following workflow:
the user selects a file on their computer
they configure options of the app
they click the submit button
a loader starts animating client-side
the browser send the entire form to the server for processing
the processing (which is actually about converting a guitar score to a tablature) yields a text/plain file, which is stored on the server (but not sent yet): a small JSON with the link to the generated file is sent back. That JSON data represents either success or error. In the case of error, the message is displayed to the user. In the case of success, the status field is set to OK and the payload contains the link to the file.
the JS code handling the AJAX call, upon success, triggers the download.
the browser presents the user with the usual (e.g. in Firefox) "open or save file" dialog
the web app detects the opening of the dialog and hides the loader.
It seems pretty similar to your need.
The gist of the solution is this:
triggering the file download is done by setting the src attribute of an iframe hidden in the page
the server sends a cookie in response to the request for the file to be downloaded
a JS code on a timer inspects the cookies of the document (which, very fortunately, includes the cookies to the iframe) and upon seeing "the Holy cookie", knows for sure that the file download has started, which is the only event the code can grab.
Quickly looking through the PHP code of my web app, I see this:
// This cookie is for the jQuery.fileDownload plugin
header('Set-Cookie: fileDownload=true; path=/');
You have the name of the JS code that does the last bullet point item in the code comment :-) Another reason among the myriad of reasons why I write commented code...
HTH.

How can I track number of downloads for images in website

I have a <img download> tag in my page. Every time a user clicks on it, file will download.
I can track number of clicks on this <img> tag and store in db for track number of downloads.
But what if user cancel the download file prompt (Select location for downloading file),
How can I track whether user is actually downloading file or not?
You need to use a proxy for the file. Say something like this PHP file:
<?php
$file = $_GET["file"]; // Get the file.
header("Content-disposition: attachment"); // And other headers for the file.
echo file_get_contents($file); // Start the file.
// Update the counter.
file_put_contents(intval(file_get_contents("count.txt")) + 1, "count.txt");
?>
On a good note, this // Update code executes only when the request is sent, and file is downloaded fully. Correct me if I am wrong.
If the request is sent and the code is executed, sorry, Google Chrome and Firefox starts the download of the file when the Save dialog box is there, which means, when the Save dialog box is open, the file has already started downloading and when cancel is clicked, the user doesn't get the file, but the server already receives the request, so it is like downloading a file and deleting it.
Note: Before some genius comes and says, this is vulnerable, file-name is missing, etc., let me tell you well ahead, this is just an idea to help the OP.

JavaScript retrieve window handle from target=_blank submitted form

I'm trying to create an automated script that lets me download various files from a website, then upload them to a new website. The script will let multiple users copy content from the old site to the new one at the same time.
I initially attempted to use AJAX to download one file at a time, and store the file(s) data in variables, then upload this variable (file data) to the second domain. The download worked fine, but the PHP page on the second domain always threw back a 500 request error message AFTER uploading, despite setting various file size parameters and processing time parameters in PHP. This meant I couldnt even see what was echoed by the PHP page to debug, and continue developing that method.
After spending a long time trying to fix this (and failing miserably), I decided to just let the users download the old files normally, then use a form to upload the files. As I want the script to continue to run whilst the file is uploading, I've decided to set the forms target to "_blank" to open a new tab (which uploads the file).
How can I retrieve the windows handle that's opened with the target="_blank" form, to test when the window is closed? I don't need to access the windows HTML, I just want to check when it closes. The page that's opened by the form is not on the same domain as the form that opens it, but the "Access-Control-Allow-Origin" header is set to "*" on the second domains PHP page.
I don't think you can retrieve the window handle, but you can use Javascript to keep a reference to the window and check whether the window is closed or not. You would have to open your window with Javascript like this
var uploadWindow = window.open("http://www.google.com");
Then you can use a function on a timer to monitor if the window has closed or not:
var interval = 250;
setTimeout(checkClose, interval);
function checkClose() {
if (uploadWindow.closed) {
// Code to run when window is closed
}
else {
setTimeout(checkClose, interval);
}
}
I hope this can be of help

preload javascript (ckeEditor.js wysiwyg) in another page before called

Is there a way to pre-load ckEditor ckEditor before we even open the page in which the ckEditor.js javascript is being called?
I would like to do this as the ckEditor.js is a heavy 350kb file which for some user takes 20-30 sec to upload over the dialup connections. I wanna load it when the user has only opened the front page ( which is just a simple still html) and is busy reading the front page. and by the time he/she moves to the page where ckeditor is used, the ckeditor.js is already loaded and cached.
You can definitely do this by including CKEditor as a js file regularly on your home page, which will cause it to load into the cache before moving on to another page. The problem is that CKEdtior is usally linked to with some arbitrary number as a query string at the end of the file name which makes it uncacheable (ckeditor.js?v=12424324234 or something similar). You'll probably need to get into the CKEditor source (which I remember is a complete nightmare) and do a global find for where that file calls the JS file you're trying to cache, and make sure it doesn't include that variable query string on the end.

Categories

Resources