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

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'))

Related

Can anyone explain me why we use a public folder to hold css and image folder?

Can anyone explain to me why we use a public folder to hold CSS and images folder?I am new to node js and trying to learn in-depth about it.
As the name suggests "public", it is to serve static files (which don't change) like CSS, JavaScript, images, etc.
We keep these files in the public folder and expose the entire folder through proper means.
Now, whoever requests these files (The browser) which are present in this public folder can access the files . Note that you can have any name and expose it , the "public" is just a proper and common name.
Also, by default your folder will not be accessible. You need to enable that.
From express documentation,
For example, use the following code to serve images, CSS files, and JavaScript files
in a directory named public:
app.use(express.static('public'))
Now, you can load the files that are in the public directory:
http://localhost:3000/images/kitten.jpg
http://localhost:3000/css/style.css
http://localhost:3000/js/app.js
http://localhost:3000/images/bg.png
http://localhost:3000/hello.html
https://expressjs.com/en/starter/static-files.html Check this for more info, if you use express.
Lets say you don't keep the files in a folder that is not made public or exposed, what will happen is the browser or any client that tries to retrieve the image or CSS will not be able to access. In this case you need to enable separate routes for these files independently and for all the public files, which is time consuming and complex.
Let me give you an example, consider your webpage has an image of cat in an tag in html. What browser does is it will make a get request to get that image from the server, if the image is not in the public folder or there is no route setup to handle this file, the browser will not be able to display the image in the webpage.
Note: This is why private pictures are not saved in a public directory, you better have a dynamic route that handles those pictures. Only authenticated users will be able to access. If you place private pictures in public folder, anyone can access it.
Nodejs is simple a server side scripting language. Its main work is to process data that comes from the client side (i.e HTML) or frontend and store it to database. After the data from the html are processed then it is needed to be sent back to the browser. On sending data from server to the client , the rendered element need to have different styles and js and image as well. These things are to be made available publicly because the browser should be able to access it and process in client side. so for this and images, css, js and docs as well, we use public fonder.
or putting it simple, those static (constant) files which are accessed by the browser (not server) are kept in the public directory.

File upload - Node Js(Express) to React Js. How to get correct image path?

I'm working on local system and developing file upload feature in node js. Currently my file structure is like below.
Project
..client
.... source code of React App
..Server
....uploads
......avatar
........image.png
....index.js
Here server is Node js code and Client is React js code.
So I've developed one API to upload image into 'server/uploads/avatar'. As you can see there is one image named 'avatar.png' is there in 'uploads' folder.
My Question is that what path to show to access that particular image with full domain path? I want this kind of result in API.
Ex.
{ avatar: "http://192.168.1.100:3000/*" }. Consider * as remaining image path. But i'm not able to access image on client side. I don't know if this is the correct way.
May be i need to set static path for Nodejs in index.js file. Not sure.
You should set static folder path in express configurations like below:
app.use(express.static('public'))
ofcourse you will need to create new folder with this name and then you can put all the assets in that, after that you will be able to access files like below:
http://localhost:3000/kitten.jpg

How to tell gulp-connect to use a specific base URL?

Can I tell gulp-connect to use a specific base URL that does not relate to the folder structure it is serving from?
I am trying to serve the app directly from the src folder and therefor set gulp-connect's root to 'src'. The src folder contains the index.html.
When I browse to "localhost:< port >". It shows the index.html, but because of internal use of a JavaScriptvariable set to the production base URL, the internal routing and script loading does not work. That's why I want to tell gulp-connect, to behave as If the production base URL would be left out.
For example: Browsing to 'localhost:8080/MyApp/index.html' should basically do the same as browsing to 'localhost:8080/index.html'.

InAngularJs, ng-src for img doesn't show for local files

I have an ng-repeat that, among other thing, outputs on image:
<div class="installation" get-products install-index="{{$index}}" ng-repeat="installation in installations track by $index">
...
<img ng-src="{{installation.logo}}" />
...
</div>
When my app starts it downloads needed images and stores their location in a local database. When the page is viewed the installations are populated:
<div class="installation ng-scope" ng-repeat="installation in installations track by $index" install-index="43" get-products="">
...
<img src="C:/Users/.../AppData/Local/Packages/.../LocalState/installations/.../...png" ng-src="C:/Users/.../AppData/Local/Packages/.../LocalState/installations/.../...png">
...
</div>
(dots used to hide person and client data)
If I paste the src location into my browser I see the image so I know it's saved at that location. However, in my app it's not showing. This is a constant issue through the app with the downloaded files. I know the image are in the correct area and the src location is correct but none of them show.
--- EDIT ---
I do have white listing applied as I was getting an unsafe for file:///. Also, when I was using a relative path it was working fine. I had a preloaded database that pointed to file inside the app files.
I don't think it's an access issue since I have a .db file at the same location that all my data is being pulled from.
--- EDIT ---
I set it as file:///C:/... and I'm having the same issue.
I also tried file:///C:/... , http://localhost/..., http://localhost:/..., http://localhost:C/..., C:/..., and file:///.... None of witch give me anything. The first two localhost items do give me a broken image icon, that's about it. I'm not running a local server, just thought I'd try it.
You can do this in two different ways:
1) Use the file protocol
2) use a local host server to store the picture and access it from the local host
for security reasons you cannot use your file system path for images. you shouldn't even use it at all, because when your app gets hosted, you wouldn't be accessing the image via such paths.
method 1:
just add file:/// in place of the c:/. file is the protocol for your file system, just as http or HTTPS is a web protocol.
NB: I haven't tested or used this before so I'm not really certain. I'm posting this from a small mobile device. but I believe it should work.
method 2:
start your wampserver or python server or any local server you have. put the image in a folder where your server can access (if wampserver, this would be a folder or directory in your WWW). say the name of the folder is "my_images" and your wampserver is running on localhost.. you can access the image like so:
http://localhost/my_images/image_name
use this path for your ng-src.
Because I Cordova File and Windows weren't playing nice using the call for cordova.file.dataDirectory didn't work. Instead I used the fs object returned by window.requestFileSystem(...,function(fs){...});
When generating my save to path as well as the path to create directories and location data I used fs.winpath which returned C:/.... The web (which Cordova basically is) won't allow you to have access to local files not associated with the site/apps structure, which is now obvious.
I dug in to the fs object and found fs.root.nativeURL points to ms-appdata:///local/. Switching everything over to this still downloaded all files and directories to the same location but stored that to the database as the file location. When the app loaded the ms-appdata path instead of the C:/ path the images displayed.
oh, a Cordova app.. why don't you place the file in an images folder In your project. since all files will be loaded using index.html (I assume). you can easily refer to the file relative to the location of index.html. how I would normally organize my project is that, my index.html and folders containing resources like js, CSS etc would be on thesame level, so I can easily get the image files using ng-src="img/image_name". so I could have a structure like this
index.HTML
img
..image_name.ext
..image2.ext
css
..style.css test it in a browser location if it works, it will work on the device. Cordova would know how to translate d into something it can recognise.
This is some sample code, i quickly put together. I tested it and it worked. Firstly i create a directory using file plugin and then download to this directory using file transfer. Replace the url parameter of file transfer with the url you wish to download from.
$ionicPlatform.ready(function() {
$cordovaFile.createDir(cordova.file.externalDataDirectory,
file_location,false).then(
function(success){
return success;
},function(error){
return error;
}).then(function(value){
var url = material.file_uri;
var targetPath = cordova.file.externalDataDirectory
+ "/" +file_location + "/" + file_name;
var trustHosts = true
var options = {};
$cordovaFileTransfer.download(url, targetPath, options, trustHosts)
.then(function(result) {
console.log(result)
}, function(err) {
console.log(err)
}, function (progress) {
$timeout(function () {
console.log(Math.floor((progress.loaded / progress.total) * 100));
})
});
})
})

HTML/Javascript: Enabling folder access from a subdirectory

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.

Categories

Resources