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.
Related
With Express, I am trying to acess relative path (css/..., assets/...) inside HTML file.
I can't use express.static() because the HTML file is located in a dynamically generated folder, with a hash as its name.
There are many folders with a different set of files inside, these folders are in "public/assets/template/file/tmp".
The server is trying to access these files based on what was defined in express.static, which was "path.join(__dirname,'public')", in order to handle other files in the project.
The public folder (which is in the project root) looks like this:
The index.html head:
I couldn't think of anything to do in this current situation, perhaps set a different express.static when accessing files in the dynamically generated folder, but it doesn't look like the best approach (not even sure if it's possible).
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.
I'm trying to use Swagger to create API documentation for an API we're building and I've never used it before.
The documentation on Github says that the Resources Listing needs t be at /api-docs and the various resource files need to be at /api-docs/books etc.
This makes naming files and folders very tricky. I think they expect the files to have no file names, rather than having a folder called /api-docs it has to be an extension-less file, then you can't put the resources in an api-docs folder because you can't call the folder that, so they suggest using a folder called /listings.
This folder doesn't appear in the URL structure of your documentation though, it's kind of invisible because you set the baseURL in your resources to the proper path, but it looks like that has to be an absolute path, which is awkward if you want to have it on several servers (local and production).
Maybe I just don't get it but this all seems to be absolutely nuts.
So, I have 2 questions.....
1) Can I give my resource listing file and my resource files a .json extension? This would make sense as it's a JSON file.
2) Can I use a relative path to the resource listing file in the baseURL in my resource files?
Ideally, my file structure would be flatter, like this...
/api-docs
resources.json
books.json
films.json
Is Swagger flexible enough to do this?
It's an IIS server if that makes any difference (if the solution requires routing for example).
I was able to put model files into a folder under the web root and could reference them like this.
$ref: '/models/model.yml#/MyObject'
Relative paths also worked without a leading slash.
$ref: 'models/model.yml#/MyObject'
Inside the model.yml, I can reference other objects int eh same file like this
$ref: '#/MyObject2'.
However, I could only get the main swagger file to import model files. I could not get one model file to cross-reference another model file.
I was using a Tomcat web server but the principle will be the same.
:image => StorageRoom::Image.new_with_filename(path)
I have to get the path of the image. So far i have specified the path manually and it worked and now i have put in heroku but it shows Load Error - No such file present.
How can i get the path value of the local system using browse button.
Your problem may not be related to path names, but to the fact that Heroku has a read-only file system. If you try to write files onto disk in a Heroku app, it simply doesn't work -- the file will not be saved.
The exception is the "temp" directory. You can save files there, but they are not guaranteed to persist for longer than the duration of a single request.
Is the file you are trying to open actually saved in your Git repo? If so, it will be on the disk in your Heroku app, and you should be able to open it.
To see what the filesystem layout looks like on your Heroku instance, you can create a controller method like:
render :inline => Dir['**/*'].inspect
File.expand_path
Reference : http://saaridev.blogspot.com/2006/11/ruby-finding-absolute-path-of-running.html
You don't need the full path. As far as file path in the client machine is concerned for file uploads, the path is irrelevant as it poses security risks for the user.
Most modern browsers don't send the file path for file uploads. You could get the path using Javascript or Flash but still I don't see the logic behind doing this.
When a user clicks on the submit button the browser should at least send you the file name with the file data together with a bunch of other information like the mime type. Your web server would either write the file to disk or process it in memory assuming you have near infinite memory resources. Look at the RFC 1867 for file uploads for more on this.
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).