HTML/Javascript: Enabling folder access from a subdirectory - javascript

I have a simple HTML file with some JavaScript that I would like to run locally (as opposed to deploying to a server). It is embedded inside a larger project whose file structure I would like to maintain. For example, the structure is something like this:
project level folder > src folder containing folders & files I would like to probe
> separate, non-project util folder > HTML & JS files I would like to run against src
I am aware that certain browsers do not allow this for security reasons (as pointed out here), but since I control all of the files - is there a way for the src folder/files to somehow indicate that they will allow the 'separate, non-project util folder' to access them? Maybe some kind of project-specific settings somewhere? I am aware that this can be done in server settings, but as I mentioned above I'd like to be able to run it locally without the need for a server.
The JavaScript that is attempting to access the src files uses RequireJS, in case that helps.

Here is what I ended up doing:
I wasn't able to provide full access exactly this way, but instead I setup a dummy HTML page in the project level folder that clicks itself to redirect to the HTML file located in the separate, non-project util folder. This allowed me to keep everything but that one, very small file separate but not have issues with file access.

Related

How to store data with nodejs outside of the project folder?

I am using ExpressJs and i want to save my files outside of the project like this.
im using this code for upload and its ok
my files uploaded correctly but i can not show them in the app cause route will be like this
http://localhost:8000/../../fileArchive/1661839542935/name.jpg
nut when i set this to src of an image, the src doesnt show my image
This is because express is trying to protect your project files from getting exposed on a malicious request. By default you cant access any of the files in your project or other directories. You can define a directory that can be accessed using the express.static method.
This will define a directory as a static directory which can be accessed (see express.static). After you added this you can also drop the any path in your URL. Express will check for any files matching the name in one of your static directories.
// This would allow the user to access the files in that directory
// ../fileArchive will be considered as the fileRoot e.g. localhost:8000/test.txt would look for a test.txt file in ../fileArchive
app.use(express.static('../fileArchive'));
// if you want to keep fileArchive as part of the url you can do that like so
// however I would recommend to exclude the `..` to keep the url readable and also the exact file path on the server should not concern the user just where he can find it
app.use('/fileArchive', express.static('../fileArchive'))

How to set image src to some "randomName.png" file available in current directory?

I have this scenario to reproduce an HTML implementation for 100+ images of different names.
myPackageDirectory
- index.html
- some_name.png
- script/css files
Currently, I have to manually do the following
pick each image file from pool,
place it into the
packageDirectory, then
rename it to static img.png, then
package(zip) the iteration.
I wish to skip renaming part from xyz.png --> img.png by something like <img src="*.png" /> kind of thing.
"Client-side method"
I've used python to automate iterations, but am looking for some html/js way to pick file just by extension
It seems you want to obtain a list of file names on the server with the .png extension.
If your server allows directory listing, you can do this with client side JavaScript. Otherwise, you'll need a server side solution.
See the answers here: Easiest way to get list of files in the server directory

React JS - Reading environment configurations from external property file

Problem :
I am new to React JS, and looking for an option to read environment configs from an external property file. This problem is more specific for one of my clients, who is looking to have an option to change the environment files dynamically. E.g. change the hostname/port dynamically whenever there is a change. The build process is not owned by my client. I create a minified final package, which my client deploys it on tomcat/web server.
Tried Solution :
With some read-outs, I have configured .env files for different environments and able to successfully read configs from these files. However, these are more of a build process environment files. And, I am trying to find a way to read the configs from an external source after my package is created.
Possible solutions : Here is one possible approach I can think of -
Read external property file using libraries like "properties-reader". I will provide the property file as part of my release bundle (i.e. build folder). My client can change this property file whenever required.
Please suggest if this is the correct approach or is there a better solution to this problem?
A Solution which worked for me !!
1) Create a "config.js" file inside public folder of react project. Sample Content of the
"config.js" file -
window.env = {
API_DOMAIN_ADDR: "http://localhost:8080"
};
2) Refer "config.js" file inside index.html. Code for index.html will be -
<body>
<div id="root"></div>
<script src="%PUBLIC_URL%/config.js"></script>
</body>
3) Now, content of the config.js file will be accessible to react code. Sample code to retrieve the value of config.js variables -
window.env.API_DOMAIN_ADDR
Add this code wherever variable value needs to be accessed. I added this in my service class which is making ajax call.
I would suggest using something like Firebase Realtime DB. I had a similar requirement for pointing the App builds to production or development server APIs for my company. For this, we use to load a Firebase Config and from there the UI used to pick up the host server endpoint.
Advantages:
This saves you from deploying your build folder every time.
This is realtime and less prone to errors.
FirebaseDB is free for small stuff like this.
The second option is to create two environment files which I see you have already done.

How to create a popup window to select a file in a local directory?

I want to create a popup window that shows me all the files in a certain directory like ex a /functions directory. I want to be able to click a file in that directory, click ok, and store it's info in variables (not upload it), How would I do this?
I've tried using a form as:
<form action="" method="post" enctype="multipart/form-data">
But with that I can't specify a directory to open specificlly, I have to manually navigate to that directory.
I've tried using window.open()
window.open("file:///" + "home/user/Desktop/demo/functions");
I've tried using an onclick link mechanism:
<a onclick="file:///+ "home/user/Desktop/demo/functions"">Open folder</a>
None of these seem to work, any ways I could approach this problem?
In JavaScript, file handling gets a bit messy. The only way to grab the contents of a folder from JavaScript would be to connect to a server and have a serverside code in a different language relay the folder information back to JavaScript.
The only way I can think that we could be able to fake this result is by placing an index.html file inside of the target directory. This index.html file would then have the names of all the files in the folder within it. However, they would have to be manually plugged into the HTML file. (if you know how to use PHP, it can scan a directory and push the contents to the HTML file)
When a web browser has to navigate to a folder, it asks the server for an index file (usually this will be an HTML or PHP file). This index would then have the contents of the folder inside of it.
If the folder is indeed on the local computer, however, there is one final way we can do this...
If the page navigates to a folder using a window.location of something akin to file:///C://Users/USERNAME/Desktop/My%20Folder/, chrome (or whatever browser you are using) will navigate to the directory and display the contents of the directory. However, since you can't put JavaScript into this browser-generated index page, you won't be able to manipulate it.
The <input type="file"> is probably your best bet, but you can't set a default directory with it (at least not without some JavaScript voodoo, and even then there are security issues between the web and the local user).
I don't know why you would want to do that, anyway, since directory structures are going to be different between different users, and the specification of paths is different between different OS's.
Instead of doing this I will suggest you copy that picture in project/image folder after clicking the upload button.

http url for js file inside a war?

Suppose a WAR layout like so:
foo.war
-->/WEB-INF
-->/classes (..)
-->/js
-->bar.js
-->index.jsp
-->web.xml
Now suppose the WAR's virtual directory is /blah on server example.com (i.e. http://example.com/blah).
What is the HTTP URL of bar.js, one that would be used in a <script src=""> tag that index.jsp might serve up? http://example.com/blah/js/bar.js doesn't seem to be working.
You must NEVER put a JS inside WEB-INF directory.
As written in Servlet specifications, whatever you put inside WEB-INF directory will never be directly available to the external world. Only local application resources go there.
So if you want some JS file accesible from outside, put it directly at WAR's ROOT. Something like this:
foo.war
-->/js/
-->bar.js
-->/WEB-INF
-->internal resources here
The URL to access JS will be something like:
http://YOUR_IP:8080/foo/js/bar.js
This of course could vary depending on how you setup your war deployment on your application server.
You do however put JSP files inside WEB-INF directory, only to invoke them from Servlets (you can't directly access them either) with something like:
RequestDispatcher dispatcher = getServletContext().getRequestDispatcher("WEB-INF/index.jsp");
This is a common practice if you don't want people accessing directly your JSP files from outside.
There is no URL that will point to this. Everything within WEB-INF is not exposed to the outside world.
Rather, if you organised the WAR layout like this:
foo.war
-->/WEB-INF
-->/classes (..)
-->web.xml
-->/js
-->bar.js
-->index.jsp
Then you could access your Javascript as http://example.com/blah/js/bar.js.
P.S. You won't be able to access index.jsp either, the way you have things set up at the moment.

Categories

Resources