How do I execute some javascript after a file is downloaded? - javascript

I have a page with a link to a file. When the link is clicked I use the code below to show a loading message:
$('#TerritoriesToExcelLink').click(function() {
$('#TerritoriesToExcelLoading').show();
window.location.href = $(this).attr('href');
});
I'd like to hide the message once the file is downloaded and the save dialog pops up in the browser.
I've tried adding some code that fires on ready() but that seems to just run straight away (presumably since the page is already loaded even if the file isn't) so the loading message never gets displayed.
How can I hide the loading message once the file has been completely downloaded?

Have your server send a random cookie that you specify from your client-side code with your download in the HTTP headers. Poll in your Javascript to check for the presence of the cookie. This should tell you when the browser has your file.

If you aren't opposed to using flash...
You could create an invisible flash object on the page, then when you click the download link, you could trigger flash to download the file, then handle the flash download complete event and use the ExternalInterface API to raise the event in javascript.

This is not possible to do with front end javascript, there is no way for it to retrieve the progress of a download and it doesn't have any events relating to downloads.
I don't think tracking the progress can be done with server side languages either.

Related

Is it possible to run a PHP file with HTML on the server

Normally when you have a .PHP file and the client request it, the PHP code is run on the server and the HTML and JavaScript are sent to the client.
Question
Is it possible to have the server request a webpage (local) and run both the PHP code and the HTML with JavaScript on the server? I have created a single .html file that after 3 seconds of processing locally creates the image data for a thumbnail of the given video.
Why
I need to generate a thumbnail for a video. I used shared hosting and my hosting provider doesn't support for ffmpeg. You can, however, generate thumbnails using a canvas and JavaScript. I have already put a lot of pressure on the client. If this is possible, upload and download times would be significantly shorter than using the client.
Attempts
I've tried using file_get_contents(), but it doesn't run the code (Makes sense). Is there a way I could have it open and run for x seconds and then grab the contents?
I've tried using curl to get the file using this function here. I believe it is similar to my previous attempt in that it gets the file contents, but never executes them.
My final attempt was to use new DOMDocument(). I couldn't even get to loading the page though. First, I can't parse it with a video tag. It gives this error:
Warning: DOMDocument::load(): Specification mandates value for attribute controls in
file:\path\to\html\document.html, line: 53 in C:\path\to\php\document.php on line 50
If I were to remove the video tag (which is required), I get errors while parsing my JavaScript. So that attempt also did not work.
Is there a way that I could have PHP process the code (for something on the server) for x seconds before getting the contents? It would allow for time to generate the thumbnail data. If there is another way to do this without using ffmpeg on the server, that would be great.
So as I mentioned in comments, what I'm gonna explain is just an option (not the best one and just answering for your need of running html code!)
Where to do this?
Personally I rather to do this when the video is being uploaded by admin's browser and the best thing is that you can do this as a part of the posting procedure.
So in the page that you want this process to be done, put an invisible iframe like this.
<iframe id="myIframe" style="display: none;"></iframe>
How to begin the process?
I don't know the way you use to upload the videos (and it really is not that important!) but let's assume you want to use formdata. After the video is uploaded you need to know something unique to address the video (let's say an id). So after the video is uploaded, we can recive a code like id:20, initiateThumbnail:true as the result json data. Then we can simply use that hidden iframe to be the browser you've been asking for like this:
$("#myIframe").attr("src","dothething.php?video=20");
Now do what ever you wanted to do in it and change it's content after it's done. Now you need to wait for the result!
$('#myIframe').load(()=>{
let result = $("#myIframe").contents();
// checking result!
});
As you have already thought about, you can handle any errors by processing the result.
Notes
The event listener we used for iframe (iframe.load) fires when you initiate making the thumbnail as well. So be careful with the process of checking result (content of that iframe!)
If you don't use ajax or formdata, simply the action of your form is what I used as iframe.
One question? What happens if network connection goes down during this process? Simple answer! You can check in so many ways that the thumbnail exists or not. If not you can create it once that user requests for it in his browser and upload it back to server and save it for ever (as you did it in admin's panel!)
I think there isn’t another way to generate thumbnail on php server than with ffmpeg.
The only thing you can do, I suppose, is to force canvas generation on page load if you aren’t already doing it.
Anyway you are trying to do something wrong. Php doesn’t evaluate the html code, it’s just a preprocessor and not an interpreter like the browser. You can wait all the time of the world, but you’ll never get the content of the image that only a browser will generate.

Javascript blocked during file download

After a week of programming a website with users control for file download, I finally uploaded it to my web hosting just to find a problem with javascript.
With JQuery I set a click event with "on" function.
$("#ContenedorPV").on("click", "img", function () {});
This way, everytime I click a programatically appended image it opens a modal with a "download" hyperlink that when clicked, downloads a file.
<a id="BotonDescargar" href="" class="modal-action modal-close waves-effect waves-light btn-flat white-text" download>Descargar</a>
href is empty because I change it with JQuery this way.
$("#BotonDescargar").attr("href", "descargar.php?ID=" + ID_Actual);
This code changes the URL, appendind the correct ID, this is when problem happens. When I click the download link, file starts downloading as would but! javascript stops responding, if I click another image my modal doesn't show up, if I reload the webpage even the "Document.Ready" script will not work, same problem. Everything goes back to normal when download completes, I tried with a hidden iframe and same problem, is there a correct way to download files without blocking my javascript code? Thanks in advance.
My site uses POST to retrieve data from PHP scripts, those scripts use the PHP sessions. My download script verifies with session if the user has rights to access the file, after you use the "session_start()" it will block access to session until script finishes, in this case, until download finishes. That's why when downloading big files, Javascript wasn't able to retrieve data, thus causing a block, to fix this I used the next code just before the "Readfile" code.
session_write_close();
This way, I manually close the session, freeing it and letting other scripts access the session data, thanks for your time mates!.

Images cut off after javascript refresh

I have a webpage which takes some user input and uses it to update an image by running a shell script through PHP. This image is then displayed to the user without refreshing the page they are on (using an ajax request). The general gist is:
User makes selection on web page
Web page sends ajax request to server
PHP (laravel) catches the ajax request and runs a shell script to update an image
PHP returns the ajax response and says whether the image was updated or not
If the image was updated, javascript refreshes the image for the user using the following code: $("#back_thumbdiv_med").find("> img").attr("src", url + "?" + new Date().getTime());
The problem is that the images don't load properly. Here is an example of a loaded image.
It's interesting to note that the part of the image that is showing is actually part of the old image not the new image. What could be causing this? How can I fix it? Could this be related to my site being run on a VM through vagrant?
Also, if the user navigates away from the page and back, the image will obviously return to the old version because it's cached. I'd like the images to be cached but to be able to force a refresh after the ajax request returns. What
This issue happened to be to do with running my Apache server under Vagrant (in virtualbox).
To fix the issue I just had to add the following lines to my apache config file (/etc/httpd/conf/httpd.conf or equivalent):
#Disable image serving for network mounted drive
EnableSendfile off
Note that it's worth searching through the config file to see if EnableSendfile is set to on anywhere else.

IE iframe download causing security warning

My application takes AJAX requests and responds with a URL to a download location on my website for the file they're requesting. Then the Javascript AJAX method for success of the response, dynamically creates an iframe on the page with the src set to the download location, to allow the file dialog to display so the user can download the file. The problem is IE displays the following security warning:
http://avnhelp.com/default_files/image004.jpg
The main reason this is a problem is because, when they click accept, it refreshes the page and the file download is lost (I'm assuming this is because it's in an iframe created dynamically).
I need a way to either:
disable this security dialog prompt
prompt the user when they visit the
site to accept any future file
downloads.
fix the fact that upon refresh (from
accepting) the file download is lost.
Here is my iframe code:
function create_iframe(url) {
frame = document.createElement('IFRAME');
frame.setAttribute('src', url);
frame.style.display = 'none';
document.body.appendChild(frame);
}
If someone could help me with this, that'd be great! Thanks.
You can't disable the security warning. The browser will act like that whenever a file attachment shows up in an HTTP response that's not related to an HTTP request made from a user-initiated event ("click" or form submit). You're getting the warning because you're making the HTTP request from the ajax response event handler, and the browser simply does not like that.
The only way to make the setup work is to make sure that you start the HTTP request from a "click" handler, or the "submit" handler for a form (or by having the actual form submit result in the file response).

How does a javascript download link work?

I've been using the Microsoft Technet site and you can download the ISO files by clicking a link on the page. The element is like this:
<a href="javascript:void(0)" onmouseout="HideToolTip()"
onmouseover="ShowToolTip(event,'Click here to download.')"
onclick="javascript:RunDownload('39010^313^164',event)"
class="detailsLink">Download</a>
I wasn't able to find the RunDownload() method in the scripts. And I wondered what it is likely to do. I mean usually when I provide a link for someone to download I provide an anchor to it:
download
But this is working differently what is the script doing? Because even when I ran 'Fiddler' I wasn't able to see the actual download location.
there's no such thing as a "javascript download" link. Javascript can open a new window, or simulate a click on a link.
What you have to find is which url the function triggered by this click will lead to.
here's an example of how to do it:
Suppose we have a:
<a id="download">download Here §§§</a>
then this jQuery code:
$('#download').click( function() {
window.location.href = 'http://example.org/download/ISO.ISO';
} );
will redirect to the URL http://example.org/download/ISO.ISO. Whether this url starts a download or not depends on HTTP headers and your browser, not on what javascript do.
Download location can be a url-rewritten path. This mean that maybe some parameters are given with HTTP Post and some HTTP handler in the Web server or web application may be getting some arguments from the HTTP request and write file bytes to an HTTP response, which absolutely hides where the file is located in the actual server's file system.
Maybe this is what's behind the scenes and prevents you to know the file location.
For example, we can have this:
http://mypage.com/downloads/1223893893
And you requested an executable like "whatever.exe" for downloading it to your hard disk. Where's the "http:/mypage.com/downloads/whatever.exe"? Actually, it doesn't exist. It's a byte array saved in a long database in some record, and "mypage" web application handles a request for a file that's identified as "1223893893" which can be a combination of an identifier, date time or whichever argument.
What I think the function RunDownload might do is that it might inform the server using get request to the server that another download is about to happen , or it might need to run the download background by setting the target attribute to an iframe so the user won't need to open another tab and download the file on the same page.
Download
JS
var runDownload=function(){
e.preventDefault();
increaseDownloadCountOnTheServer(location);
window.location.href="filelocation.exe";
}

Categories