How to download a file via URL then get its name - javascript

This is for a userscript I'm making with JS+jQuery. I'm wondering if it's possible to find the filename given the URL.
It's in the form of:
http://example.org/download.php?action=download&id=1234
and then that link downloads a file such as "cat.jpg".
How do I find out what the file name is called? I don't need to actually save the file on the users computer - just need to find the name of the file.
I'm open to using any JS library - but I need to make sure that the file isn't actually saved in the users computer (or maybe it's just saved in a temp folder somewhere).

The simple thing you can do is to make HEAD request, so that you don't actually download the file but only response headers. From there you get Content-Disposition header which contains filename field.
Something like this in jQuery:
$.ajax({
type: "HEAD",
url: 'http://example.org/download.php?action=download&id=1234',
success: function(message, text, response) {
var header = response.getResponseHeader('Content-Disposition');
console.log(header);
}
});
header variable will be something like attachment; filename="image.jpg". Now it's easy to extract filename part:
var filename = header.match(/filename="(.+)"/)[1]; // image.jpg

Related

How can we download the dynamically generate file from server?

I want download the file from server (I knew that we can't use AJAX, and serve is Servlet) and which dynamically generate according to the parameters.
Now I have the parameters in format JSON, like:
{"limitTo":"name","searchFor":["AAA","BBB","CCC"],...}
So, how can we send the request to the server with those paraleters? Do we need create some inputs?
Thanks, I found the solution which uses dojo/request/iframe, without window.open
And the code likes :
require(["dojo/request/iframe"], function(iframe){
// cancel the last request
iframe._currentDfd = null;
iframe("something.xml", {
handleAs: "xml",
data : "your json"
}).then(function(xmldoc){
// Do something with the XML document
}, function(err){
// Handle the error condition
});
// Progress events are not supported using the iframe provider
});
And then we can see download window.
Here is an article about dojo/request/iframe

how to change url for javascript in opencart

i have been working on the opencart frontend. And i want to make a frontend structure such that products uploaded by a particular vendor is shown. For that i use the url 'user/vendor_name'. And i have made changes in htaccess file for such url and after that i have changed the link function in url.php file for such cases. So now if a user clicks anywhere in the website the url will show 'user/vendor_name/index.php......'. But the url in javascript doesnt use $this->link function and those changes of url.php file doesnot take effect and thus it redirects to the original url.
Please help me out on this.
You would have to modify the controllers for each template containing such URLs and make sure You are setting a vendor name to a PHP variable accessible by the template:
$this->data['vendor'] = $vendor_information['name'];
supposing the vendor name is stored in a variable $vendor_name under the index name. This is only an example. Now in each template identify such URL with the JS part:
$.ajax({
url: 'index.php?route=checkout/cart/add' // + ...
// ...
});
and change it to:
$.ajax({
url: 'vendor/<?php echo $vendor; ?>/index.php?route=checkout/cart/add' // + ...
// ...
});
This should solve your problem.

partially download a file with Javascript

we're actually working on a Remote Music Library organizer using javascript and I'd like to know if there's a way to download using js the last 128bytes of an MP3 file in order to get its ID3 Tags. thanks.
You can't do that with just JavaScript. You'll need something on the server (what exactly depends on your server-side technology) to read the relevant part of the file. Then in JavaScript you can just call that server-side part.
Update 1
The HTTP protocol has support for downloading files in parts (which is what the). But of course HTTP knows nothing of MP3 files, so you'll have to know what range of the file contains the ID3 tag in your JavaScript.
Update 2
It seems way more feasible than I initially expected to download just a chunk of a URL in pure JavaScript:
xhr = new XMLHttpRequest();
xhr.open("GET", "http://<your domain>/");
xhr.setRequestHeader("Range", "bytes=-256");
xhr.send();
This requests the last 256 bytes of the remote file.
Note that of course your request is subject to the usual same-origin limitations, so you can only use it to retrieve files from the server that contains your original HTML/JavaScript.
Withouth using a server-sided programming language: no.
You could use Ajax and PHP (or any other programming language) to get the ID3 tag.
With jQuery it looks something like this:
function getInfo(func) {
$.ajax({
url: "mp3info.php?file=" + url,
dataType: "json",
ready: function(result) {
func(result);
}
});
}
And you use it like this:
getInfo(function(mp3info) {
alert(mp3info.id3);
});
Then your PHP file looks something like this:
<?php
$info = array(); //The MP3 info array
echo json_encode($info, true);
?>

how to export csv file with filename

I want to export the exist data into csv file. I try to use this code:
var uriContent = "data:text/csv;charset=utf-8," + encodeURIComponent(data);
var myWindow = window.open(uriContent);
myWindow.focus();
it works but I can design filename. I can only get the dialog with name like "MVeAnkW8.csv.part" which I don't know where the name come from.
How can I assign filename in the first dialog? Thanks in advance.
update:
I am now using rails. Actually I have a method in server side names export_to_csv. In end of this method, I use code like that:
send_data(csv_string,
:type => 'text/csv; charset=utf-8;',
:filename => "myfile.csv")
It works and I can specify the file name.
For now, I want to use ajax to get more csv files(that is the reason why I want to use javascript, because a normal http request can only get one file to be downloaded).
I use js code like that:
$.post("export_to_csv",
function(data) {
var uriContent = "data:text/csv;charset=utf-8," + encodeURIComponent(data);
var myWindow = window.open(uriContent);
myWindow.focus();});
It get the data from server side and I try to transfer it into csv. I can get a file but can't specify the file name.
As I know, you can specify the filename only in chrome 14+.
Take a look at this question: Is there any way to specify a suggested filename when using data: URI?
Update!
If you want to download multiple csv files "at once", you can zip them together, or save each file on the server separately (each file now has a url that points to it - if you place them inside the 'www' folder).
Then send the file names and their path/url to the client via ajax (use a json encoded list for example).
In the ajax callback function: take the list of the files and open each file-url in a separate popup.

Generating file with ajax and allow user to download it?

I have very similar problem as this: Allowing users to download files - ASP.NET , but in my case I am generating xlsx file with ajax, and on ajax-called aspx page I am using:
Response.Clear();
Response.ContentType = "application/octet-stream";
string filename = User.Identity.Name + "_Report.xlsx";
Response.AddHeader("Content-Disposition", "attachment; filename=\"" + filename + "\"");
Response.WriteFile(AppDomain.CurrentDomain.BaseDirectory + "Reports\\" + filename);
Response.End();
When this file is generated, control is returned to ajax calling page and from there I wan't to show save file dialog based on this ajax response and allow user to download this generated file. I don't want to save file on disk with ajax called page and then redirect ajax calling page to that file, because of popup blocker in IE. I am using jquery for ajax calls:
$.ajax({
type:"POST",
url: "AjaxReport.aspx",
data:dataString,
success: function(data) {
//don't want to use this
// $('#RedirectIFrame').attr('src','Reports/Report.xlsx?cache='+Math.random());
//want to use data variable containing ajax response (bytes of Report file) showing
//save dialog to download this file from browser
}
});
How to do this?
Currently JavaScript can't access to the user's file system, meaning you can't prompt users to save a file coming from a network stream.
In other words. You'll need to do that redirect and write your file stream to the HTTP response and let the user decide what to do :)

Categories

Resources