I'm making a game in JS with Phaser.io and using Web2Executable to run it on desktops. I'm making a lot of test files during development and every time I add a file or remove one I have to manually add/remove code. Is there a way I can just get a list of all the files in my working directory/subfolders? I can then load them up by file extension no problem... but I've been googling for half an hour and I can't work out how to get a filelist without making everything crazy complicated.
Client-side Javascript cannot read the contents of a directory.
I think is the best form to read directory is a back-end language like php and return a object json then you acess this page with ajax and get this object
Related
Let's say I have a folder of about 100 images on my website called "IMG"
Now let's say I have a div element: <div id="templateDiv"></div>
Using javascript, how would I add all images from "IMG/" into that div without adding <img src="IMG/IMGNAME.jpg"> for every image?
Sorry, I'm not very good at explaining.
Just ignore the fact that would take ages to load.
EDIT
Ok my bad explanation skills have made me change my question.
How do I automatically make array of all files in website directory?
Okay, your question is incredibly unclear, but from reading all your other comments and things, it seems you simply want to get an array that contains the filename of every file in a directory? If that's what you want, then it won't be possible (I don't believe) since only the server knows which files are where, and you can't request the contents of a directory from a server using JavaScript.
However if you were using Node.js on a local directory, then it could be done. But I don't believe that's your case.
That being said, you have three alternative options:
Name every image file 1.png, 2.png, 3.png, etc. Then use a for loop and get each one using (i + 1) + ".png"
If you can't rename the files, but the files are named via user input, you could collect the user's input at the time of file creation and add the name of the newly created file into another file/an array/localStorage so that it could be retrieved later.
If you can't rename the files, but the filenames are also never known to the program that needs them, then you could create an array of all the filenames (manually) and iterate over that to find all the files that you want.
Please, somebody let me know if I'm wrong and if there actually is a way to make a request to a server that tells the client all the files in a directory. That seems incredibly unlikely though.
Another potential solution just came to mind. You could write a PHP script (or Node.js or any server-side language, really) that scans a directory, creates a list of all the filenames there, and then sends that back over HTTP. Then you could simply make an XMLHttpRequest to that PHP file and have it do the work. How does that sound?
I have a local JSON file. I want to create an object of that file using JS.
I tried finding some solutions and they are simply too complicated
An answer suggests that "Being able to read a local file from your browser would be a major breach of security..." so does that mean that there is NO simple way to read a local file without using FileReader or XMLHttpRequest !?
I am very disappointed as I come from a Python background and there, you can simply use a one liner "open" function to read a file.
(PS: Please do not use any AJAX or jQuery in your answers/comments)
EDIT: Somewhat more detailed description.
I have 4 files in a folder. An HTML, a CSS, A JS and one JSON file. What I want is whenever, I try to load the HTML page in a browser, my JS creates a JSON object of my local JSON file which I can display in my HTML body.
I want to make a local HTML application read and update a JSON file and use its content to display HTML content. Alas, I'm stuck at the very first step, as I can't seem to setup any sort of test file that simply notices and reads a JSON file. From what I see online, I need to use other libraries. I attempted to use require.js but I can't make it work and the documentation doesn't help me.
I imported the require.js with a tag and attempt to launch something out of what I got from the documentation, but there's nothing to do. It doesn't look like it's willing to take .json files.
requirejs([
'example'
], function(example) {
const config = require('./config.json')
});
My issue is to get the program to read the file. From there I believe I can make the display of it, but this JS thing is all alien to me.
The recommended way would be to run a web server or use something like Electron and build a desktop app (as #chrisG points out in the comments). But if you wanna do this in the browser without an web server you could do something like:
Run Chrome with the --allow-file-access-from-files (or however you allow local file access in your browser of choice)
Put your JSON in a js file and load it (to just do this you don't need the flag, but if you want to use absolute path you'll need it)
I'm trying to store HTML files in the browser for an app built on NW.js or Electron.
Long story short: I want to make something like Sublime Text using a WYSIWYG editor (I don't know exactly how it works, so I will make a guess)
Creating a new TAB, all content inside the #editor is store in
localStorage/IndexedDB/NeDB/PounchDB/LimvoDB/... as the user is
writing.
When the user needs to save the file, it stores the content in the
browser window, and then it creates the file.
If the file already exists, the localStorage content overwrites it.
All the magic must happen around the browser DB.
You might be wondering why I'm not using files directly, and it's because the first request: We don't know if the user will save the file, but we don't want to lose all the content if the app is closed.
Searching the web, I find that is bad practice to pass HTML content through JSON, but I can't think of any other solution.. I'd have to use encodeURI and decode when retrieve the data to the #editor or the file saved.
I'm using:
Electron
Angular
I don't know yet what DB should I choose
Digging around, I also saw the sync function in PounchDB -> CouchDB and it blew my mind away ─it's a function to synchronize offline and online data using the named DB's.
Is it possible to store .HTML files in PounchDB and then synchronize it with CouchDB?
Is all this bad practice?
How would you do a Notepad - Sublime Text or a «MS Word» editor using PounchDB, or NeDB, or LimvoDB using Electron/NW.js engine?
Ended up using PouchDB, which also happen to handle very well html-strings.
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.