change folder index to a HTML page within folder - html

I have seen a few examples with link to folder but i realy don't understant what it is or how to manipulate it or get it to set the specific html page within the folder.
My website is a basic one with only CSS and HTML
it is formatted as
[file]home.html // C:/Users/user/Desktop/mywebsite/home.html
[folder]Order // C:/Users/user/Desktop/mywebsite/order/
↳[file]ordersheet.html // C:/Users/user/Desktop/mywebsite/order/ordersheet.html
I want to try set the folder path C:/Users/user/Desktop/mywebsite/order/ as the file ordersheet.html C:/Users/user/Desktop/mywebsite/order/ordersheet.html how can this be done?

To set /order to ordersheet.html change the name of ordersheet.html to index.html
The index.html is the default file that the server will serve to the visitor when he visits that specific directory.
link text
link text = what you want it to say to the user
/Users/user/Desktop/mywebsite/order/ = directory path
Keep in mind that this will only work locally. If you have it up on a server, visitors don't have access to your full C:/ drive so you have to use relative links, i.e. just /order/

If I remebember correctly, you use something like this:
<a href="file:///C:/Users/user/Desktop/mywebsite/order/ordersheet.html>link to file on harddisk</a>
If you would want to have that anchor to a folder, you would just use this:
<a href="file:///C:/Users/user/Desktop/mywebsite/order/>link to a folder on harddisk</a>

Your browser is operating directly on your system's local filesystem, so you can't.
What you have been looking at is a function of a web server (I'll use Apache HTTPD for examples here).
A typical configuration of a web server would map the local part of the URI onto a directory on the local file system and just serve up the files there if they matched the local part of the URI.
If the local part resolves to a directory (rather than a file) then it would look for a file in that directory with a name that matched a list (typically including index.html) and serve up that file.
If none of the files on the list existed, then it would generate an HTML document containing links to all the files in the directory.
Since there is no web server involved when the browser is reading the local file system directly, there is no way to map the directory onto an index file, so you would need to explicitly include the filename in the URI (or switch to using a web server).

Related

ReactJS link to local HTML file from different folder/project

I'm using ReactJS to build a site, and I want to create a link (a href="relativepath") to a local HTML file so that when the user clicks on the link, it'll open up the html page. The local file is in a different folder X outside of the project, and I don't want to upload it into my src folder because the html file depends on a lot of other files in X. Is there a good way to do so?
I also want to upload a different local HTML file that is already within the src folder of my React App. I currently have something like this:
import htmlFile from "../links/htmlFile.html"; export default function Something(props) { return (<a href={htmlFile}></a>)}
and it says in my terminal that
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <html>| | <head> >
I already tried adding in webpack + an htmlLoader, but I think I followed the steps incorrectly as I wasn't able to get it to work. I uninstalled those packages, so I'm now back to square one.
Thank you so much!
Just linking to or importing from a local file in some other location won't work unless those local files are also deployed to the server in the same location relative to the app (and the web server has access to that location).
So you'll need to copy the file and its linked dependencies in a folder that will be deployed along with your react build, but not where it'll get treated as part of the react codebase so webpack will try to compile it (so not in src either).
If you used create-react-app to set up your application, for example, this would be the public folder; other webpack setups may use different names but the general concept is the same.

Can't change Apache2 shared folder's file

I'd like to change the page that shows what files I've uploaded. I never found the editable file. Can it be changed at all?? I have read a bunch article about this problem but I haven't found the solution.
I am talking about this page: Index of /--
Here is my shared folder: Location
Change the index file (probably: index.html or index.php) or add one yourself, if it does not exist yet. You can use .htaccess for example, if the directory or files inside should be access protected. You can also redirect the user when he is accessing the directory or a file inside.
The images that you have provided show the fallback display of a directory for apache.

image src attribute does not display locally-stored image

I have images stored as png files on the local server and only the filename gets saved to the DB. When rendering images to the client I combine the relative path of the image with the filename from the db as pass it in like so:
<img src='../../public/avatar-pictures/3fVZNShyQRAtBbipvzVrDwDD.png'/>
But it doesn't work. As a last attempt of desperation, I even moved the png file itself to the root directory of the client script and it still produced nothing.
what is causing this issue?
By default, node.js and Express do not serve any files. So, you can't give the browser a path to some location on your server's hard drive and expect the web server to send the files. It does not do that (unlike what people familiar with Apache might expect).
You will need a route on your server that points to the public directory. There are several ways to do it, but here's one:
<img src='/public/avatar-pictures/3fVZNShyQRAtBbipvzVrDwDD.png'/>
Then, on your server, you would use the express.static() middleware to create a route that looks for URLs starting with /public and will serve files from the public directory on your hard drive that match the path of the URL:
app.use("/public", express.static("../../public"));
The path you pass to express.static() needs to point to the public directory on your local hard drive. You don't disclose your local file structure so I can't tell you exactly what that should be. The example above will be relative to the current working directory when your program was started. It is perhaps more common to build the path yourself from the module directory. So, if the public directory is two levels above your module directory, you might do this:
app.use("/public", express.static(path.join(__dirname, "../../public")));
And, then it's wired more specifically to be relative to your module's directory and not dependent upon the current working directory which can be changed by code or by how your program is launched.
You can, of course, also use a fully qualified path:
app.use("/public", express.static(path.join("/someVol/users/me/myProject/public")));
Keep in mind that the express.static() middleware opens up the entire directory tree that you point it at for public access so you have to make absolutely sure that only public things are in there. By default, express.static() does not permit .. in the paths so a request can't get out of the directory you specify.

How would I access a back-end webpage?

These files I have uploaded to my host provider "hostinger". Now usually the index.html page would be the root page of the webpage itself by accessing it like SOMEPAGE.com. Also I have an admin.html file which is some sort of a settings page where want to be able to make changes into and access index.html page.
How would I be able to access that page the same way I would access the index.html or SOMEPAGE.com in the web in the link bar of the browser?
The URL can accept a path to a directory structure on your server starting at the web root, which in your case is the directory where index.html is stored. By default if the file name is omitted the web server will look for a file called index.html and try to display that in the browser. If you specify a different file name it will look for that file instead.
In your case to access admin.html you only need to specify the file name after the domain.
example.com/admin.html
If it was in another folder you can specify the folder path separate by /
example.com/somefolder/admin.html

how to embed pdf file in html with security?

I am using below code to display pdf file in HTML
<object data="data/file.pdf" type="application/pdf" width="300" height="200">
test.pdf
</object>
But In above code we have to specify path name and folder name so it is not so secure. Crawler can find this path, so using some algorithms(robot) it is very easy to download other file those are stored in that folder.
How to secure this, is there any option to prevent this from robots?.
You may do the following:
Password protect the page (with the server-side code).
Generate unique links like (/getpdf/some_random_string_or_md5_hash_of_random_string.pdf) for every PDF file (using server-side code) that will a) check for the current time and the validity of the random name generated (if it has expired or not) then b) will redirect to the source files (not really hiding the source because of the redirection) to be displayed or stream the PDF file content (this is more secure though could seriously add the load to the server).
Finally add robots.txt to the folder and hope that crawlers will follow restrictions it sets.
If the other files in the directory are not to be downloaded, ever, they shouldn't be in a directory that is available to the http server. You can use directory permissions in your http server (eg., config directives and .htaccess in Apache) to control access to directories. Only configure access for directories you need to expose to the web, and only store files in them that you want the web to access.
If you want to avoid including a path in the HTML, you will need to write some dynamic code (eg, php, asp, or any number of server-side options). Your code on the server would need to handle the request for the file and return the file's content manually.