How to display folder names on html page using java script? - javascript

Is it possible to list the files in a directory using only javascript? To clarify, I mean list the files on the server, not the files on the clients computer. For instance:
www.domain.com/files/
contains 4 images (.jpg)

What you asked for:
fs.readdirSync("./")
For example, in Express:
router.get("/someFiles", function(){
return "<ul>"
+ fs.readdirSync("/path/to/someFiles")
.map(function(fName){
return "<li>"+fName+"</li>";
})
+"</ul>"
;
});
What I understand you are searching for:
Express Serve-Index

No, it isn't possible to get the local directories of the client for obvious security reasons. If you want to receive a file, then use a file input field.
Neither is possible to get the server files natively, because JavaScript is a client side language.

Related

Search through files in path using only javascript

I'm coding a webpage that needs to read some data from different csv on a path depending on the country of the user.
the path is something like this:
./csv/m2-2022-10-25_13_45_55_es.csv
m2-2022-10-25_13_45_56_fr.csv
m2-2022-10-25_13_46_04_it.csv
etc
And those files will be replaced regularly, the only that we'll always have is the country code (es, fr, it, etc).
So, what I need is to list all the files on the path to an array, and loop through the array to find if the last characters of the filename are $countryCode + ".csv", and there run some code.
But I can't find how, all the solutions I find are using Node.js, but are there a solution using only Javascript (or jQuery)?
Regards!
You cannot use pure Javascript to do that, because if you wanted to search files in your computer only using javascript, it would be a huge security breach.
You must use node.js to open files but you can make an API to your nodejs file from your javascript and you can send as a response the content of your file.
Here some links that might help you :
FS : https://nodejs.org/api/fs.html
NodeJS api : https://medium.com/swlh/how-to-create-a-simple-restful-api-in-node-js-ae4bfddea158
You can check a similar question here:
Get list of filenames in folder with Javascript
You can't access to filesystem from the frontend, this it would be a huge security breach, because anyone could access to your filesystem tree.
You have to do a function in backend to build the array you want and send it to frontend.
If you create a function in backend file that returns the array of files in the folder, you can call it from the frontend via XMLHttpRequest or Fetch to get the array in frontend and be able to use in your js file.

How can I get a list of files in a directory?

I'm trying to make a simple webpage that you can input a directory path in and it lists all the files in that directory. Is there a way I can do that directly in the .html file with js script? I have the path as a variable.
I'm very new to these programmin languages and don't know much about these.
A webpage does not have access to a client's file system. No website can see your files.
However, if you're talking about server side javascript, that's different. Server side javascript file listing can be achieved through this:
var fs = require('fs');
var files = fs.readdirSync('/assets/photos/');
Reference: Get list of filenames in folder with Javascript
Hope that helps
EDIT 1 (upload files with html):
You need to be more specific. But i will supose that you want to navigate into files for upload some file on your webpage:
You could do this and when you press the button you will can navigate in your files and select as you want:
<input type="file" name="" id="">
EDIT 2 (using server languages for working with files):
First step: you need a lenguage server as php or nodejs (it use internally javascript chromev8). I recomend you to use nodejs becose its easier for people who already know javascript.
If you wanna nodejs, install it:
https://nodejs.org/en/ .
If you wanna php you can install apache xampp that also install a version of mysql database:https://www.apachefriends.org/index.html
Second step: working with files:
php https://www.php.net/manual/en/intro.dio.php
nodejs: https://nodejs.org/api/fs.html#fs_file_system (you will need to know about synchronous and asynchronous programming).

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

NodeJs: Listing the file names and directories present on a remote file server

I have a file server located at say http://myshare.com. This server is used to just host all my files. My file server has a directory named 'myfiles'. So my URI looks something like this: 'http://myshare.com/myfiles'. This location has say 10 files.
First question: How do I get the names of all the files located on this remote file server using Node.js?
Second question: If 'myfiles' directory has sub-directories, how do I traverse all the sub-directories and list all the files in them using Node.js?
Any help would be appreciated. Thanks
I suppose that the files are on the same machine, since you can always mount them with cifs or similar and then it would be the same than local files, making live easier since is OS who manages them instead of your code.
First, you have to familiarize with node's file object anf the function "readdir" either on its async or sync version.
http://nodejs.org/api/fs.html#fs_fs_readdir_path_callback
Then you parse the array of files returned .
For subdirectories you have to code a recursive function that calls itself on every directory. For every file you have to check the fsstats and check the property isDirectory() over the returned object.
getting fsStat object http://nodejs.org/api/fs.html#fs_fs_stat_path_callback
fsStat object http://nodejs.org/api/fs.html#fs_class_fs_stats
As a sample, you can check this answer https://stackoverflow.com/a/5827895/1680125
Hope it helps

Getting subfolder names with javascript

I've been looking around for quite some time now and I cant seem to find a way to get a list of subfolders from a specific directory.
An example would be, if I'm at www.mysite.com/projects and inside projects there are several folders containing individual project files.
the reason I want to do this is I was going to make a script that would add new project's names to a menu using the sub folder names.
Am I missing something ? Is this even possible with JQuery or JavaScript ?
I've gone as far as getting pathnames and locations and also had a look at ActiveXObjects but cant get anything to work on either my PC or on the server.
Any help would be appreciated.
There is no such thing as a directory in HTTP. Only resources.
Some of those resources might be an HTML document that lists some other resources (which are in a particular directory on a file system on a computer running the HTTP server). Most HTTP servers will generate such documents for you automatically.
You need to have your server generate a suitable response for a suitable request. Then use (since you mention jQuery) the ajax() method to make that request.
Then you need to parse the response. You can either use the default directory index page and then parse the HTML returned, or you can write a server side program to generate the data in a nicer format (such as JSON).
That said…
the reason I want to do this is I was going to make a script that would add new project's names to a menu using the sub folder names.
You would almost certainly be better off doing that on the server. You'll get more reliable, faster and search engine friendly results.
ActiveX is a technology enabling JScript (the Microsoft implementation of JavaScript) to have more access to the clients computer and it only works on Internet Explorer.
Folders on the server are not like folders in a filesystem. Any folder/subfolder has the potential to contain an index.html which outputs some text (not necessarily the list of subfolders it contains).
Also most webserver configurations have an active options of not showing the subfolder list even if there is not index.html present.
What you can do is place an index.php file in that folder with the following code:
<?php
$directories = scandir('.');
header('Content-Type: application/json');
echo json_encode($directories);
And you can receive this content as such:
$.getJSON('http://domain.com/path/to/folder/', function(directories) {
do_something(directories);//
});

Categories

Resources