List files in website directory without index.html - javascript

If a directory on a webserver doesn't have any html files (e.g. index.html), then when you navigate to that url, typically you just see a list of the files in that directory (unless .htaccess was changed to prevent this). Is it possible to get a list of these files in javascript?

you can do it with a get_files function
var files;
function getFilesInFolder(folderServerRelativeUrl) {
var context = SP.ClientContext.get_current();
var web = context.get_web();
var folder = web.getFolderByServerRelativeUrl(folderServerRelativeUrl);
files = folder.get_files();
context.load(files);
context.executeQueryAsync(Function.createDelegate(this, this.OnSuccess), Function.createDelegate(this, this.OnFailure));
}

Any time you write code to display something on the web, you are using a server-side language. HTML is a server-side language, but has extremely limited programming capabilities - can't read the server file system, cannot loop, etc.
So, to do what you are asking you need a server-side language. Either PHP or node.js or Python etc. Almost all webhosts already include PHP, but you can now find some (a2, webhostpython) with the other two. There are TONS of tutorials online for doing what you want with PHP. Tons.
So, to be clear, if you want to code your server-side in javascript, you need to have node.js installed on that server. To use PHP, it's almost certainly already there.
PHP files are identical to HTML files, except they end in .php instead of .html, which allows them to process PHP code between the <?php and ?> tags. Generally, PHP files are either pure PHP-only, OR they are a mix of HTML and PHP, with the PHP code included on the page between these tags.
Here is a basic tutorial to give you an idea how it would work:
https://daveismyname.blog/creating-an-image-gallery-from-a-folder-of-images-automatically

What you can do is create an endpoint that would point out all the files that you need to display and make an API call to the endpoint using JS

Related

Compile PHP application to HTML with variations

I have a simple PHP application branded to one company and it contains a few pages. The php pages are then compiled to static HTML using a Gulp plugin and the HTML files are then deployed to a production server.
I'm now looking to create a variation of this compiled application with new branding. It will just involve changing some of the colours and logo. Ideally I want to use the same codebase so I'm not duplicating code and work effort but just using conditions to replace the logo and stylesheet for each company. Each application should compile in to separate folders to be deployed.
Does anyone have any suggestions on how I can achieve this? Handlebars JS or some other templating tool perhaps?
If the application is written in PHP, I recommend Twig.
Extensible, easy-to-use and powerful.
Can be installed with composer :)
I think you are looking for something like very simple pipeline. I would recommend you to just write some shell script (or modify existing php script) with arguments (logo path, output directory) to make existing engine produce different output to different directory.
ok, I edited the post, to show the idea.
I was thinking about something like the following:
<?php
$logo = $argv[1]; //take commandline arguments
$name = $argv[2];
$dir = $argv[3];
mkdir($dir);
$path = $dir.'/template.html';
$template = '<img src="'.$logo.'" alt="logo"><h1>This is '.$name.' site</h1>'; //here you could run your templating engine with some names and paths replaced with variables
file_put_contents($path, $template);
Then, you can run this proof of concept script from your commandline like so php createTemplates.php company1.jpg company1 company1 and you will get template.html with company1.jpg logo and company1 headline in company1 folder.
I have no idea how does your templating engine work or how advanced it is, but for the simple use (few html pages) it should be enough.

JavaScript and CSS dynamic versioning

I had a question regarding dynamic versioning of JavaScript and CSS file references in HTML files. For example:
script src = "test.js?v=1234"
And similarly with CSS references. I have done this in the past using ASP.NET, where I can call a function from the server side to generate a random number everytime the page loads ex:
"test.js?v=<%= myrandomfunc() %>"
I basically don't want the browser to get a cached copy of the css or js reference. I wanted to know if I can do this in JavaScript or jquery without using a server side language like asp or php etc.
Any help is much appreciated.
Thanks !
This is called file revving and it depends on what build system you're using. For Grunt, there's grunt-filerev, for Gulp, there's gulp-rev and gulp-filerev-replace.
If you don't yet use a build system, you might also want to check out Yeoman which will generate just about everything you need, including file revving.
I wanted to know if I can do this in JavaScript or jquery without
using a server side language like asp or php etc.
Yes.
var script = document.createElement('script');
script.onload = function() {
//do your stuff here
};
script.src = "http://whatever.com/the/script.js?v="+(+new Date());
document.getElementsByTagName('head')[0].appendChild(script);
Another option is to send the right headers :

Searching a folder directory for a file and retrieving file path's in a web application

Note: I have never used PHP in my life.
I have come to the point in my mobile web application that I need to find out of a file exists in a structure like:
-Folder
-SubFolder
-file.html
-SubFolder
-file.html
...
-Folder
-Subfolder
-file.html
...
I care to see if this html file exists for a certain subfolder so that if it does I can display its html contents.
I have written the rest of my mobile web application using solely html and javascript but from what I've read it seems this is not doable with javascript alone. ( :( )
So I have a few questions as I sit here looking up everything I need to implement this in PHP (since this is the most common thing I am seeing when looking up how to do this).
Currently all I have been using in this application (simple application) is
index.html
style.css
code.js
any image files I use or text files I read from using javascript
Would the PHP code go in the HTML file? Currently the way I have it set up is my index.html file calls a initialization() function that is called when the page loads, and the rest of the application is run from the code.js file that just updates the elements of the html file. How can I add this PHP to the HTML file to be run when I need it to? Can PHP go into a javascript file? Pretty much after a bunch of logic in the JS file I get to a point where I decide if I need to or not need to search the file structure for a file.
So now on the actual code on how to do it in PHP, from what I've found..
<?php
$filename = '/path/to/foo.txt';
if (file_exists($filename)) {
echo "The file $filename exists";
} else {
echo "The file $filename does not exist";
}
?>
I pulled that from php.net. One thing about my folder structure is I will know the paths of the files ahead of time. So I feel like it may be easy to follow that format and see if file_exists($filename). My question is instead of echoing a string like in the example can I echo the actual path to the html file? Where does "echo" return the value?
Again this is all new to me, and if this is doable in any easier way (jquery?) I would love to know. My main concern is where to put this php code or how to call it when I want to and have it return something that I can use in my javascript code.
Thanks

How to load file contents from another domain using just JS?

I'm thinking of doing some online file manipulation for mobile users, the idea being that the user provides a URL to the file, then the file contents are modified by the JS, and can then be downloaded. But I haven't been able to figure out how to get the file when it's on a separate domain using just JS.
Is this possible? If so any hints or examples would be appreciated.
Just wanted to add that part of what I wanted to do was make it available without my hosting it. I'm thinking of something like a a file they can host somewhere,and then all of the bandwidth is their own...and that of wherever they are getting the file from of course.
The only way to load contents of a file on another domain is from within a <script> tag. This is how JSONP works. Look into getting your target file into this format.
The other way would be to use a local proxy. Create a web service method that loads and returns the contents of the file, then call that locally using your favorite JavaScript framework.
Depending on how you think of public webservices, and within some limitations I'm still mapping, you can do this using an ajax call to YQL, like so.
(will expand the answer later).
http://query.yahooapis.com/v1/public/yql?q=select%20%2a%20from%20data.uri%20where%20url=%22http://t3.gstatic.com/images?q=tbn:ANd9GcSyART8OudfFJQ5oBplmhZ6HIIlougzPgwQ9qcgknK8_tivdW0EOg%22
One of the limitations of this method is file size, it currently tops out at 25k.

Open web directory to simple webpage

This is a fairly simple problem, I'm just not sure exactly how to approach it.
A friend of mine has an open directory on his webserver, and he asked me to make a simple webpage for him which would just display all of the file names, rather than the dates/file sizes/etc. The page would also update when a new file is added into the directory.
So, I guess I'm just looking to be pointed in the right direction on this one. My first guess was just to throw a simple HTML/Javascript page together which would extract all of the file names from the directory with Javascript, then display them on the webpage while linking to the file. Or am I going able this all wrong?
Thanks,
aqzman
JavaScript is a client-side language and really has no way of enumerating files and directories on a web server, without the aid of a server-side script anyway. You need to look into server-side scripting languages such as Python, PHP, and ASP.NET (Windows Server only), to name a few.
These languages are processed on the server and make changes to (or even create from scratch) a page before it is sent to the client/browser.
You could use Apache's built-in directory listing feature. With javascript this can't really be done (exception: there's a pattern within the filenames that would let you send HEAD requests to see if files exist - see this site where I had to use this technique).
You can do this pretty easily with PHP -
$files = scandir($_GET['dir']);
foreach ($files as $file) {
if (is_dir($_GET['dir']))
echo ''.$file.'<br />';
else
echo ''.$file.'<br />';
}

Categories