how to get file extension from url - javascript

I am trying to create a js file downloader module. Right now I stumbled on some file urls like - https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTA_Rg2GwJVJEmOGGoYFev_eTSZAjkp_stpi4cUXpjWbE6Wh7gSpCvldg.
My question here is how to get the proper extension of the file knowing only the url ?
The only idea I have is to use this module to check the file after I download it.

As suggested by #melpomene you can make HEAD request for file, get Content-Type from response headers
fetch("https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTA_Rg2GwJVJEmOGGoYFev_eTSZAjkp_stpi4cUXpjWbE6Wh7gSpCvldg", {method:"HEAD"})
.then(response => response.headers.get("Content-Type"))
.then(type => console.log(`.${type.replace(/.+\/|;.+/g, "")}`));

Related

Can't open a local JSON file from a local HTML file [duplicate]

This question already has answers here:
Fetch request to local file not working
(11 answers)
Closed 4 years ago.
I have searched and searched, but all results I found are for a webpage on a server, not a local file which should be legal to lookup. Whenever I do this:
var music = fetch("playback.json").then(response => response.json());
I get this error:
Fetch API cannot load file:///C:/[removed path]/json_store/playback.json. URL scheme must be "http" or "https" for CORS request.
Folder structure looks like this:
/json_store/
/index.html
/script.js
/playback.json
My HTML/JS file are in the same directory as the JSON file, but it seems this is still giving me an error for some reason. Also according to Mozilla's docs this IS legal to do, as they even provide an example for it. Is there something I am doing wrong, or was this feature removed?
I would rather serve the file using an HTTP server than fetching the file.

Downloading File After Renaming Using HTML Or JavaScript

I want to download file from external server but after renaming it. Let's say http://playtictactoe.atwebpages.com/logo.png is an image file I want to download. I have used the following HTML:
<a href="http://playtictactoe.atwebpages.com/logo.png" download="myName.png">
Download File
</a>
But this doesn't rename the file. I've read somewhere that this is because of Response Header on server. Is there any way to ignore Response Header on client side? Else guide me any other solution.
You can download the file as a buffer and resave with the file api like descriped here:
HTML5 File API downloading file from server and saving it in sandbox
Or lookup FileAPI and XMLRequest to Buffer. You download the file as binaryBuffer save it with fileAPI and rename it. This should also work in Firefox. But this is not the simple solution you are searching for. Even though it works ;-)
You can then rename the file like you want.
Cheers

Chrome Extension access Files

I want my chrome extension to access a sqllite file which is part of the extension. I looked up the chrome.storeage api, but it doesnt really help me! And my JavaScript knowledge isnt enough to access a file and read its content.
Also is it possible to start my extension when a specific file type is loaded?
This is how I read a json file named env.json in the root of the extension directory.
Add the following configuration to the manifest.json. You need to add your sqlite file in this configuration.
"web_accessible_resources": [
"*.json"
],
I defined a function to load json file. You need to tweak the response data, cause the sqlite file is a binary data file instead of a text file.
// the path is relative to the extension directory
let loadData = async path => {
let url = chrome.runtime.getURL(path);
let resp = await fetch(url)
let json = resp.json()
return json
}
Usage example
// Use the above function to load extension file
let conf = await loadData('env.json')

Download generated file with jQuery POST

I need to download file from javascript. I send json with $.post, Rails server generates xls file and sends it back with send_data. Response has nex headers:
Content-Disposition:attachment; filename="preflist.xls"
Content-Transfer-Encoding:binary
Content-Type:application/ms-excel
How can I download this file after post request?
As I understand it you need to trigger normal browser file download after posting data to the server.
There are two ways of doing this:
After success of post you redirect your browser to an URL where the posted file is located
If the only source of the file is on the response of the post you will have to use the FileReader API, though that is not supported by all browsers. You combine reading the file from the result of the post with readAsDataURL(). The result of this is something you can combine with a hyperlink and the download attribute:
Then use javascript or jQuery to click that hyperlink.
http://blog.teamtreehouse.com/reading-files-using-the-html5-filereader-api
Hope this helps!

how to get pdfJS to render a pdf from URL?

i am using PDFJS to render PDFs files using their URL after scanning the current page a js snipet return the urls. then it passes them to pdfJS. until now everything works the problem show when the PDF is already open in the browser . i take the URL (*.pdf) and pass it the same way as before the difference is that the file is not downloaded and i have this response.
Warning: Unhandled rejection: Unexpected server response (0) while retrieving PDF "http://geekographie.maieul.net/IMG/pdf/progit.fr.pdf".
(just for the record i dont have CORS issues).
Try this "http://mozilla.github.io/pdf.js/"
Installation
download and unzip file.
put "PDF" file in this folder.
config in "viwer.js", edit var DEFAULT_URL.
upload folder to server.
Have fun!

Categories

Resources