How to display and delete .gif download when uploading a file?

Question

I have a button, when clicked, it is necessary to upload the file by submitting the form using POST. [ Edit to clarify: The download file is dynamically generated through a PHP script based on values ​​in a hidden form (which I modify through jQuery, depending on the click of a button). This file is an Excel file. I would prefer not to use GET if possible, as I do not want people to refer directly to the file.]

I cannot use $.post to submit the form because it does not work the way I would like. Although the view runs fine, it does not display the download dialog in the browser. As far as I understand, the contents of the file now exist in JavaScript, and there is no way (which I know) that allows you to send this to the browser from JavaScript for download. So, other solutions (for example, How to use jQuery or Ajax to replace the background image after submitting the form? ) Will not work in this particular case.

The solution I found was to use $("#someform").submit(); to launch a hidden form when a button is clicked. The page does not reload, and a save dialog appears on the screen.

Code example:

 $( "#button" ).click( function() { $(this).removeClass( "button" ); $(this).addClass( "loading" ); $( "#form" ).submit(); } ); 

However, since it might take a few seconds to create the file, I wanted to display a gif to load the animation to the user. This now poses a problem that I can display the animation, but I cannot delete the animation after the form is submitted.

If this cannot be done with this method, is there a better solution someone can offer?

Answer 1

You must either specify the URL in .gif or pass it as Base64

Answer 2

When you submit you will form the entire page that will be updated, the download image will be deleted if you do not add it to another place when the page loads.

Answer 3

I posted an answer in this question that demonstrates how to do this. See the Demo at http://tomsfreelance.com/stackoverflow/imageDownloadLoading/main.php and the source files at http://tomsfreelance.com/stackoverflow/imageDownloadLoading/

Answer 4

I did this with 2 librairies. MIT licensed: BinaryTransport and FileSaver . In this example, I upload a server file with Excel files.

HTML (in title):

 <script src="/E1/js/jquery.binarytransport.js" charset="UTF-8"></script> <script src="/E1/js/FileSaver.js" charset="UTF-8"></script> 

Javascript:

 function ExportToExcel(urlExcel, fileName){ $("body").css("cursor", "progress"); $.ajax({ url: urlExcel, type: "GET", dataType: 'binary', headers:{'Content-Type': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet','X-Requested-With':'XMLHttpRequest'}, processData: false, success: function(blob){ $("body").css("cursor", "default"); saveAs(blob, fileName); }, error : function(result, status, error){ $("body").css("cursor", "default"); } }); } 

For a custom loading animation, just call it where I change the cursor type in these lines:

 $("body").css("cursor", "progress"); $("body").css("cursor", "default");