Build URL to data file download with link to folder - javascript

I have a web application that triggers actions at the server side which result in the generation of data files.
The so generated data files are stored within a folder at drive different from the one where the Web application is.
What I tried so far is to create a shortcut (Windows Server) next to the Index.html, where the shortcut points to the folder at the second drive.
This solution does not appear to work:
If I copy the data file to the same folder where the Index.html file is and enter navigate to the URL httm://127.0.0.1:324324/Data_File.xlsx I get the file downloaded.
If I enter httm://127.0.0.1:324324/MyShortcut/Data_File.xlsx (where MyShortcut points to a folder in drive D) the attempt fails.
How can I achieve this?
The need to access files in the different drive is essential.

You need to configure your server to serve that folder under different location. The only reason you are able to see your app and access that folder is cause server is set up to serve it ATM, not because you are making the right calls from the front or cause the front is asking nicely.
Don't know what Windows server version you are using and IIS version that goes on it, or are you even using IIS (you most probably do) but depending on what you use you need to do something in a lines of this:
IIS7 config
What you probably wanna do is create virtual folder in IIS. Try looking into it, then if you fail ask a question with proper tags according where are you stuck.
I don't see how this is connected to front-end at all so front end tags wont get you far.
EDIT:
Oh, in that case get a second file server running for that folder? This should be the fastest way, use what you can from this list: list

Related

Can a Chrome Extension Dynamically Add JS Files to Local Extension Directory? User Upload or Saved From the Web?

I'm wondering if it's possible to for certain JS files to be added to the web extension directory later?
Like say I have an app where users can select certain settings from within the app and those files (js and html files, images or blobs) are somehow added into the extension from the web. Like some sort of ondemand updater without using any native apps but it seems that upgrades are done by the appstores automatically.
I'm reading the files using ajax and adding them to indexeddb but because it could be more than one file that's getting messy.
Say a user wants a certain feature on the extension and there's an html page, js files and images then this gets downloaded to a certain folder inside the installed extension.
function download() { //only saves to downloads directory
var imgurl = "https://www.google.com.hk/images/srpr/logo11w.png";
console.log('download');
browser.downloads.download({url:imgurl},function(downloadId){
console.log("download begin, the downId is:" + downloadId);
});
}
I also tried the chrome download function above but that only works for the downloads folder not the extension folder.
Is there any way to make a custom updater?! I know we can't save to disk but any leniency or workarounds for the extension folder?! Even something silly like making a shell call to some dos (and linux/mac) thing that saves the file to the extension folder. I can fetch the files, just not save them.
Ok so I'll put it as an answer. This is the solution I'm leaning on which works for my scenario and I've listed some alternatives below:
Having the other files as separate extensions and giving the user an install link instead where they can install that extension, then those child extensions talk to the mother extension and they know the address to the resources in their child extension folder, so the mother gets the just the file locations from the children to load those assets from that folder. The child extensions are like bundles of those html and js with a background script which sends the addresses of these items to the mother.
https://developer.chrome.com/extensions/messaging#external
The drawback is that I'll have to see how that affects the urls like if I inject the html page from the child extension folder into the main interface using ajax then I can't use relative url's to any images in that 'cos the urls are relative to the mother extension folder.. I'll have to rewrite the child extension urls with the absolute paths into the html page to load images and js from the child extension html code which has relative urls.
Pros:
Cleaner and more persistent than indexeddb.
Files can be loaded normally from disk.
Cons:
User has to install separate extensions.
URL structure might be a bit confusing, need to rewrite urls if loading html from child. However this is only for image src's and where the javascript is loaded from so it's not such a big deal.
Other Possible Solutions:
Indexeddb which I'm already doing seems to be the preferred way of doing this but I really do not want to store every html asset in indexeddb. The upside is that while extensions need to be installed, this method can be done silently fetching and adding files without user interaction and indexeddb seems to be somewhat persistent. Might still end up using this because it is silent but having to load each asset from a database sounds like a nightmare.
The File Handle Api might have worked if I was working on Firefox only https://wiki.mozilla.org/WebAPI/FileHandleAPI
I haven't tried the shell copy, maybe if I fetch with ajax and then save to disk using some dos function and then doing different save functions for different OS systems.
Filesystem Api only saves to downloads and doesn't work for extensions anyways, so that's useless.
UPDATE
In windows there isn't any sudo, but this worked without admin priveleges for a subfolder (not on the C:\ root though). It would work for a linux only app very nicely. If I just wanted to save a file to a windows machine this might work.
Shell copy method would be to grab the contents of file with ajax from the local or remote location, output to DOS as a stream to save to file on windows. And do this for every operating system with a shell exec command or detect the OS and do that command. This way I can even put the files in the exact folder location.
Like say I make this sort of command from the contents:
//To append you can use >> instead of >
//folder seems necessary, can't save to root without admin
echo the content I want to save > C:\folder\textfile.txt
I thought of calling it using shell exec that only works in nodejs, so digging through the other answers on
How to execute shell command in Javascript
//full code to save file using javascript on windows
var shell = WScript.CreateObject("WScript.Shell");
shell.Run("echo content to save > C:\folder\textfile.txt");
The shell command doesn't seem to work. i can't find what this is for. There doesn't seem to be a shell command in regular javascript for windows. It seems to require IE ActiveX. Doesn't work with Firefox or Chrome.
Extensions can't modify their sources because the browser verifies them and resets/disables the extension if they change. Also, in Firefox the extensions aren't even unpacked.
The solution is actually quite trivial: save the code in any storage (localStorage, chrome.storage.local, IndexedDB) as a string and then add it in your extension page as a standard DOM script element. You'll have to relax the standard CSP a bit for that.

How to access filename from a folder using JavaScript

I am trying to build a simple website with just an index file and a folder full of icons for our internal purpose. I am making this so that anyone in our team can just access the link and download the icons whenever needed without our help. I am trying to read the icons file name from the folder automatically, so every time we update the folder with new ones we don't have to edit the HTML. I know only JavaScript. Please help me.
An alternative could be to produce a filelist of the files via a script or batch file (depending on OS, something like - in psudeo - ls path/to/images > filelist.txt) which redirect the output to a file that ends up in the same root as the index and images.
This file could then be read via fetch() or XMLHttpRequest() and parsed on client side to provide the basis for the links to the updates files.
This would require an extra step in the pipe-line of course, but could easily be automated using a listener for the image directory that triggers the script, part of your project setup and so forth.
This is not possible. In your case Javascript is running in the browser (client-side). It has no access to the servers filesystem. You need a server-side dynamic web-service (php, node.js, ...)

Why can't Js load image files from my web service directory?

I have a domain www.foo.com and wish to host a JAX-RS/Maven/Jersey web service there. Currently, I'm packaging the Java code into a .war file and deploying it on an Apache Tomcat 8.0 web server for testing on my local machine.
In /apache8/webapps/ROOT/index.html (localhost:8080/) I have script tags within which an XMLHttpRequest object makes a get request to localhost:8080/apiIndex/webapi/resource - which searches a resource folder in my web service directory that contains 150 or so images. The the full path names to those images are returned to my Js code, and that Js code attempts to create images out of them to be drawn to a canvas.
The problem is, I'm getting a network error saying that Js can't find/load the images.
How do I map an index.html file to my domain from within my web service directory, so that when I forward requests from my domain to port 8080 of my server I can access those images from code within my web service package? Is this the reason the Js code in the tomcat webapps folder can't load the images from my API's src/java/resources folder?
First of all: /apache8/webapps/index.html does not sound like something that's mapped to localhost:8080. I'd rather expect the / (root) webapplication to be deployed under /apache8/webapps/ROOT (and the index.html file within that folder).
I'm assuming that your web application with the images is deployed under /apache8/webapps/apiIndex. If that generates, as you say "the full path names" of your images, that can't be found: What are those full path names, and where do you expect them to be? Do you get 404 error codes or something else - like 500? Please post URLs and your expected places in the folder.
(this is posted as an answer instead of a comment because I hope that the initial description help you find the root of your problem yourself, while the second part is effectively asking for more information)
Edit: Following your comment: IMHO your webservice should rather return a http or https reference to an image, rather than a file reference. If anything else, you might need to prefix it with file:///home/... in order for the browser to consider getting it. However, if your browser shows a http document, it might not even cross that domain and embed local file resources for security reasons: Why would any webserver reference material on your local disk?
Have your images somewhere where you can reference them through http and the problem should be solved.

Do not restart IIS when map files changes

I debug a site on the local IIS (localhost).
I use a tool (Gulp) to generate minified JS files directly from "dev" to the "dist" folder that is used by the server.
Gulp watches the dev/my.js file and once modified genetates the
dist/my.min.js
dist/maps/my.min.js.map
This should permit to see directly the modifications on the server, without rebuilding/redeploying the entire site, there is need just to refresh the page...
The problem is the generated map file.. The local IIS thinks that this is a binary file change, and restarts/recycle the server once binary files are changed...
So in order to see my change is JavaScript I need to wait until the local server is refreshed (so it removes any advantage of generating files with GULP)...
Is there a way to say to IIS do NOT recycle itself when .map files are changed?
Hopefully for the .css files the trik works, because there is no map files associated with the .min.css files
I don't know of a way to disable the IIS refresh only for .map files only (this seems to be an all or nothing proposition), but in your site's web.config, go the httpRuntime element and add fcnMode="Disabled". So, you'd end up with a line looking like this:
<httpRuntime fcnMode="Disabled" />
What that does is tell IIS to stop looking for file changes in the site directory, which means that changes to no code and the web.config will be ignored until the site unloads. (Either via you manually starting/restarting or IIS shutting it down after a period of inactivity.)

How to access local image when setting the background image in javascript

My goal is to set the background image from a local image on my computer.
I have two lines of code, one that works and one that doesn't:
(the local one does not work)
_html.style.backgroundImage = 'url("urlsourceblahblahblah")';
_html.style.backgroundImage = 'url("/~/Content/images/Image1.jpg")';
When I try running the second one (the local one), this is the error that I get:
GET http://localhost:23433/~/Content/images/Image1.jpg 404 (Not Found)
I can verify that the image path is correct, even if I put the image file in the same directory to make things simple. I know from documentation that the backgroundImage property in JS requires url(). Is there any reason why this wouldn't work?
This is a tricky one... I can think of some problems this can have:
The server doesn't know what ~ refers to (are you running windows?)
The user running the server is not the same as the one you are logged in as. (~ stands for home directory, and when server evaluates it'll lead to user running the server home directory).
The server is configured to ignore every request which is above it's www / html / localweb folder. (Altough in this case it would be weird to reply with a 404, a 403 would make more sense)
By the way, this is only possible if the server and the client are on the same machine. I don't know why you want it, but if you pretend to upload a website and have its background set to some field on the client machine, then simply forget about it.
The ~ abbreviation for your home directory is not recognized by the browser. However, expanding it will only help if the image is in a directory that is being served on local host. I don't know what you are using for a web server, but you'll need to find out what directory it is expecting to serve as its root
You can't refer to an image from the users machine. The browser does not have access to the users file system, otherwise, any website you visit would be able to access your "Pictures" folder for example.
The image you use needs to be in your website directory or another public url. If you need to use a picture from the users machine, then you should do so with a file uploader.

Categories