How to find all files in directory? (HTML JavaScript) - javascript

How to find all files in directory? I have HTML page in some directory. Using JavaScript I want to get all existing files in some subdirectory ( get all file names or relative links to them, on a local machine)

Unless you have your server setup/defaulted so that you can go to a index-less directory and be presented with a list of files and directories that reside in that directory then that information isn't public.
You might want to try writing a short server-side script to retrieve a list of the files in your directory and make an AJAX call to it?

Javascript which runs at the client machine can't access the local disk file system due to security restrictions. Otherwise one would be able to upload files in a hidden form unaskingly using Javascript.
If you like to access the client's disk file system, then look for the solution in a different corner: an embedded client application which you serve up from your webpage, like an Applet, Webstart, Silverlight or something like that. If you like to access the server's disk file system, then look for the solution in the server side corner using the server side programming language like Java, PHP, etc, whatever your webserver is currently using/supporting.

Related

Automatically list directory contents in client side Java Script?

I need to create an HTML page that will generate a list of hyperlinks to the contents of the client side directory in which it resides.
This would allow HTTP browsing of a local NAS, where no web server involved and contents can change dynamically.
This might be extremely useful to anyone serving content on a LAN. We need this feature in an educational setting, where directory contents will change frequently. Making manual links would be prohibitive, and file browser access is also needed.
Our Digital Media program will be much obliged to anyone who can help us with a solution.
Without any kind of server/back-end code, an in-browser NAS file explorer is not possible. Client-side JavaScript only interacts with the client. It's possible for client-side JavaScript to contact a server, however, and retrieve information about that server's directory structure, but, of course, that would require a server where you say you can't have one.

How to access filename from a folder using JavaScript

I am trying to build a simple website with just an index file and a folder full of icons for our internal purpose. I am making this so that anyone in our team can just access the link and download the icons whenever needed without our help. I am trying to read the icons file name from the folder automatically, so every time we update the folder with new ones we don't have to edit the HTML. I know only JavaScript. Please help me.
An alternative could be to produce a filelist of the files via a script or batch file (depending on OS, something like - in psudeo - ls path/to/images > filelist.txt) which redirect the output to a file that ends up in the same root as the index and images.
This file could then be read via fetch() or XMLHttpRequest() and parsed on client side to provide the basis for the links to the updates files.
This would require an extra step in the pipe-line of course, but could easily be automated using a listener for the image directory that triggers the script, part of your project setup and so forth.
This is not possible. In your case Javascript is running in the browser (client-side). It has no access to the servers filesystem. You need a server-side dynamic web-service (php, node.js, ...)

Access folders and files for creating a html page

I am new to HTML. I need to create a webpage that reads system path from user and display the statistics about folders and files in a table format. And i want to do the following things
1) Read for folders under path
2) To access sub folders under folder
3) Read the files under a path
4) To get the path of files (to create hyperlink)
For Example, I need to go to the system path given by user in a webpage and read folders in it. For each folders i have to read subfolders and files in it and create a table that displays the name of subfolders under the parent folder and other information about files
So in addition to html what should i learn to do these things. Thanks in advance.
First of all, HTML is used to define and format the presentation of text, images, and other web content, only. And therefore, in order to handle user input and execute server side commands (like listing directory/sub-directories content), you need to write server side code.
Server side languages allow you to create dynamic web content; in your case, code that would:
process the user input,
execute server side command to list system files,
and generate the tables and their content from the return result of the executed command.
php is straightforward easy-to-begin-with language. You can find a basic introduction to php on W3Schools. PHP 5 Tutorial - W3Schools
If you choose to go for php, check the following php function scandir. This php built-in function allow you to list files and directories inside a specified path.
Nodewebkit or Electron both can give you ability to write HTML/CSS/Javascript that will be executed in client machine with access to users filesystem. Check them and see if they fit your scenario.
In short, you will have to compile your HTML/CSS/Javascript as a standalone executable file (various Operating systems are supported) and provide that executable to the client so he/she can run it.

Accessing files from mounted file system vs local files on web server (production vs dev)

I have a Django web application that requires accessing audio wav files. I have a file server containing the wav files which is mounted onto my web server which stores my web application files. I then downloaded the files onto my local filesystem so my web application can access it when I'm developing it locally.
My question is about how to access those files from my web application on production versus local. I'm thinking in my Javascript I'd need to have two different configurations that check if my web application is in production or development. If in production, I'd use the path to the mounted file server, and if in development, I'd use the path to the local filesystem on my computer. Does Django or Javascript provide a way of doing that somehow? And is this the right way of approaching getting files from the web application?
The other option I can think of just uploading the wav files along with my web application to the web server so I can access it locally on production and not have to access it from the mounted file system, but I'm not sure how this affects performance and that might cause headaches of having to upload the files every time a recording gets added or removed.
Would that approach be better or would the first approach be better?
Your goal is that users can listen to the audio files when they are using your web application. This is mostly not Django specific.
I recommend that your Django project should have a setting, for example settings.AUDIO_FILES_URL that points to the place your audio files are served from. It might be convenient to use a context processor to add that setting to your template rendering contexts as AUDIO_FILES_URL, or you can do it explicitly. It's a good convention to include a trailing slash in the variable's value (that's how STATIC_URL is usually used.) Set the value correctly in each settings file, whether test or production.
Then in your HTML template you can build a URL for a particular audio file. You might do something like this:
<span data-audio-file-url="{{ AUDIO_FILES_URL }}{{ audio_file_path }}">{{ audio_file_description }}</span>
Finally, your JavaScript code can read the url and create whatever interface you like. Notice that the javascript doesn't need to know whether it's a production system or not. (You could instead avoid javascript and make an HTML5 audio element, if you like.)
In production, Django should only know the base url for the audio files, it should not be involved in serving them. Serving them is something you need to configure the web server to do, i.e. Apache, Nginx or whatever you're using. You could even serve the files from a different host - perhaps making your file server also a static file web server.
Also, I think it would be kind to your users to serve .mp3 instead of .wav!

Javascript: Listing File and Folder Structure

As I have read, it is not easy for JavaScript to modify files on client PC. I am working on a web based file manager and would need to know the following:
Can JavaScript list files and folder structure on a client PC?
Can JavaScript list files and folder structure on a server?
If your answer is no, that Java Scipt can not list files and folders say on client's or server's C:\ drive, than would CGI script be the only solution?
Browser JS reading client PC's files: Depends
For a security reason, you can't access the files on the user's PC without the user's consent.
That's why the FileReader API is created around the file input box <input type="file"> and a drag-n-drop area since the whole idea is to "access the file with user's consent". Without the user intentionally putting the file for access, you can't access it at all.
Server-side JS reading own server's files: Yes
As for server, if you meant access the server using server-JS (NodeJS or Rhino), yes you can (How else would it serve webpages anyway?).
Browser JS reading own server's files: Depends
Accessing the server from the browser using JS works if you have an API to read files from it.
Browser JS reading other server's files: Yes, with a catch
To access other server's files without some API, you could resort to creating a web scraper or a web-spider that runs server-side (since browser can't cross domains due to the same origin policy) and have an API exposed to your browser.
However:
you can't crawl to all files as some may be restricted from outside access.
the public appearance of the structure could be different from the internal structure, especially if the site uses segmented url scheme
sites using query strings to generate pages cannot be crawled easily due to the number of permutations it could make, thus some pages might be unreacheable.
CGI won't be a solution either, as it only has access to the filesystem of your server, not that of the client visiting your site. The only way to access your client's filesystem from javascript seems to be the File API, which apparently is not implemented by many browsers.
It's a cludge but you could resort to a java applet or the dreaded active-x control.

Categories