Develop Reference

downloading application/zip file with javascript (with file-saver)

I am trying to download a zipfile that my webapp receives my backend in javascript.
I am using the file-saver library, just because I use it in another part of the app, but I would also be ok, doing it with vanilla js (creating a blob, attaching it to hidden a element...). I tried out all I could find on the web about it, but it still doesn't work.
The file is downloaded, but it cannot be opened, my archive manager just says there is an error...
However, I know that the file coming from the server is ok. When test the endpoint of the api, that delivers the file, in swagger I can download and open the file normally.
if (response.headers["content-type"] === "application/zip") {
const filename = response.headers['Content-Disposition'].match(/filename="(.+)"/)[1]
FileSaver.saveAs(new Blob([response.data], {type: "application/zip"}), filename)
}
If anyone has any tip, on how I could go about debugging this, I would be very thankful :)

How do I download contents in Anchor tag via WebClient?

I am trying to use System.Net.WebClient to download a file from a website. I am able to download specific files in general just fine using this method: The general idea is to use the following:
WebClient Client = new WebClient();
Client.DownloadFile("https://www.Example.File.xlsx", #"D:\MyDirectory\MyFile.xlsx");
But my problem is that I am not downloading a visible file per se from the website. Instead the file I need to download is embedded inside of an anchor tag with javascript as below:
Export File
So the piece I am missing is how to convert this anchor tag into a proper file to feed into my WebClient DownloadFile process. Does anyone happen to know the missing step here?
I am building this in a C# console app, so the solution will need to be compatible with this.
Thanks in advance.

How to open a file in filesystem: from a link

I have created a file using the FileSystem API. I can't open it from a simple link. However, I can open the page placing the URL manually in the browser (filesystem:http://localhost:8100/temporary/log.csv)
I'm testing only on google chrome for now.
window.open("filesystem:http://localhost:8100/temporary/log.csv")
I expect it to open in a new window.
UPDATE:
This issue was fixed by using window.URL.createObjectURL()
so the link will be something like blob:http://localhost:8100/7aa5685c-ca4f-485a-8bf8-d1c95e6257ab which works

If you know where in your filesystem is the root folder of your webserver (for example: d:\apache\www_root\temporary\) then copy your csv file to there.
Once its done, you should be able to open it from your Javascript by using:
window.open("http://localhost:8100/temporary/log.csv")

Same issue.
Using FileSystem API since the product is Chrome only.
How did you turn the FileEntry into the objectURL?
Figured it out
// turn fileEntry to file
fileEntry.file((f) => {
console.log(window.URL.createObjectURL(f));
});

Cordova - Saving/ Downloading a backup JSON file that is dynamically generated

I am building an HTML5 phonegap application. This app exports data so that the user can backup and restore any time. I'm doing this exporting with the following javascript code:
var dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(this.data, null, "\t"));
var dlAnchorElem = document.createElement('a');
dlAnchorElem.setAttribute("href", dataStr);
dlAnchorElem.setAttribute("download", "data.json");
document.body.appendChild(dlAnchorElem);
dlAnchorElem.click();
This generates an anchor tag with an encoded file and clicks so it downloads. Works great on browser, but does nothing in a compiled Cordova application.
After doing some research, I found that the default solution would be to use a download plugin for Cordova, specifically this one: https://github.com/apache/cordova-plugin-file-transfer
I read the documentation, but it does not seem to take an encoded file as parameter, but an encoded URL for download. Also, it takes the save path on the phone, which I prefer would just default to the download folder.
My question is: What is the best way to achieve this, considering I'm dynamically generating the JSON backup file. Is there perhaps an AndroidManifest directive that allows for file downloads?

After some research and trying many different hacks, I came to the conclusion that it's currently not allowed natively with cordova or with the available plugins. My solution was to, instead of writing to the filesystem, use the web share api to let the user export the way he finds best (including file, if he chooses dropbox, onedrive or google drive).

Reading local XML file with javascript

I am new to HTML/Javascript, as well as coding in general so bear with me :). I am trying to create a "Spot the Difference" game in html5 using javascript. Everything is local (on my machine). I have two pictures, of the same size, one with differences. To generate data about the clickable fields, I have a java program that reads both of the images and outputs all of the positions in which pixels are different into a XML file. My plan was to then use this XML file with my javascript to define where the user could click. However, it appears (correct me if I'm wrong) that javascript cannot read local XML files for security reasons. I do not want to use an ActiveXObject because I plan on putting this onto mobile devices via phone gap or a webkit object. Does anyone have a better approach to this problem, or perhaps a way to read local XML files via javascript? Any help would be greatly appreciated, thanks.

If you are planning to put this into a smart phones (iOS and Android) and read local files, I have done similar things with JSON (yes, please don't use XML).
Convert your output to JSON
Put this as part of your application package. For example, in Android, I put it as part of the .apk in /appFiles/json
Create a custom content provider that would read the local file. I create mine as content:// but you create whatever scheme you want. You could leverage android.content.ContentProvider in order to achieve custom URL Scheme. iOS has its own way to create custom scheme as well. The implementation simply read your local storage and give the content
To read it from Javascript, I simply call ajax with the custom scheme to get the json file. For example content://myfile/theFile.json simply redirect me to particular directory in local storage with /myfile/theFile.json appended to it
Below is the sample to override openFile() in the ContentProvider
public ParcelFileDescriptor openFile (Uri uri, String mode) {
try {
Context c = getContext();
File cacheDir = c.getCacheDir();
String uriString = uri.toString();
String htmlFile = uriString.replaceAll(CUSTOM_CONTENT_URI, "");
// Translate the uri into pointer in the cache
File htmlResource = new File(cacheDir.toString() + File.separator + htmlFile);
File parentDir = htmlResource.getParentFile();
if(!parentDir.exists()) {
parentDir.mkdirs();
}
// get the file from one of the resources within the local storage
InputStream in = WebViewContentProvider.class.getResourceAsStream(htmlFile);
// copy the local storage to a cache file
copy(in, new FileOutputStream(htmlResource));
return ParcelFileDescriptor.open(htmlResource, ParcelFileDescriptor.MODE_READ_WRITE);
} catch(Exception e) {
throw new RuntimeException(e);
}
}
I hope it helps

I would suggest modifying your java program to output a JSON formatted file instead of XML. JSON is native to JavaScript and will be much simpler for you to load.
As for actually loading the data, i'm not sure what the best option is as you say you want to evenutally run this on a mobile device. If you were just making a normal website you could setup a web server using either Apache or IIS depending on your OS and put the files in the document root. Once you've done that you can load the JSON file via Ajax, which can easily be googled for.
Not sure if this helps any.

Since this is a local file, you can do this with jQuery
$.ajax({
type: "GET",
url: "your.xml",
dataType: "xml",
success: function(xml){
///do your thing
}
});
http://api.jquery.com/jQuery.ajax/