Scenario: I am creating a personal home page that i plan for using in safari/chrome/Firefox and I have a folder with images. I want to display a random image as the background of the page.
My solution to this was to create an array with all the images as separate links as the objects of the array. My JS works with a pre-made array of links but I have no clue on how to create an array from a directory.
I don't mind using jquery if required but i cant have server side php (or anything else) since i am linking the local html file to the new tab page.\
The html file is in the directory / and the images in /img .
This can't be done. You're going to need something on the server side to read the directory that is on your server. Javascript (including jQuery) running on the user's browser doesn't have access to list directories on your server.
Related
I have a create-react-app application that has a page where it allows the user to select a .csv file to upload, this file has many columns, one of these columns is a path to a folder with a bunch of pictures.
I want to be able to access this folder and upload all this pictures using js on the client side, apparently all solutions involving the fs library do not work anymore as it's been removed from webpack.
Since the files are hosted in the client side, I need to be able to grab those files programmatically using the js running on the cliente browser, it needs to happen without the user interaction because that CSV file has thousands of lines (there will be thousands of paths to grabs the images from), so the user can't be manually opening the file browser and selecting a directory for each line of that csv file.
To be clear, the only user interaction allowed is the csv file upload, the rest needs to be handled automatically.
How can this be done? And if it can't be done, what would be a work around this issue?
Thank you.
Let's say I have a web application, and its function is to display data from a fairly large JSON file. The web page is one folder on my desktop (a data folder storing JSON files, HTML file, CSS folder storing CSS scripts, and JavaScript folder storing JS scripts) that I've pushed onto GitHub. Very straightforward.
"My application folder"
- css folder
-style.css
- data folder
-json1
-json2
-json3
-json4
-json5
-json6
- javascript folder
-main.js
-index.html
My question is this: will storing many large JSON files (each has different data) in the data folder cause my website to run slower, even if only one JSON is being rendered by the webpage at any given time? Does the loading time of the page increase if there's more data files in the data folder, regardless of whether they are actively being used by the web app and loaded into the DOM?
I'm asking because I'm thinking of storing many JSON files in the data folder, and dynamically loading different JSON files into the webpage based on what the user does. But - I don't want to use this approach if it's going to cause the webpage to load extremely slowly.
Yes - I know I could use a database in the cloud like PostGres, etc. But for now, I would like to avoid using a database if possible.
It will not slow your website because the files are not in use other then taking up space which could affect performance if the disks starts be coming full.
I am trying to develop a simple app using node.js and express.js that works as follows. Attaching the screen shot of my app for reference
The user basically enters a location in his computer where image files are stored and then I dynamically generate the HTML file that displays those images as thumbnails. I am almost done except that Express is not serving my images and they appear as empty square boxes. Need help in trying to address this.
Before people mark this question as duplicate I would like to point out that this is not static web content where I can use the static middleware to sort this out. The user can input any directory on his computer and if there are any image files present then I need to display them.
EDIT:
This is how the standalone HTML page looks like. There are no problems with respect to paths in img
When you are opening standalone html in the browser, the protocol of the opened page is FILE. When you run a server on your localhost, the protocol is http or https. Modern browsers, do not allow to cross from the http protocol to the file protocol, that is why you are getting error:
Not allowed to load local resource
I can suggest you to create a buffer directory under the server directory root, and copy all the images from the desired folder there. That will allow you to show the images without any restrictions.
I have a location on server hosted by node.js /public/imagedepot which contains subfolders and image files. I want to create an admin page which can select the selective images or complete subfolder from the imagedepot from the filebrowser on the html page and then on submit the array with the location of the images selected can be posted to the server.
For this purpose, is there any library or extension in the javascript present which can provide me with the gui of the folder and file picker in the tree format and can have multi select which then returns the array with the selected images and their paths.
This would be easy if an open source framework is available.
I am using expressjs node.js and javascript
I dont want to upload the file to the server only the user can select the name of images from the browser and then it provides a array with the selected filename and path.
I think most file pickers are going to want to select from files on the client machine. To allow the client to select a file on the server I would populate a list of file choices on the server side. This should get you started: How do you get a list of the names of all files present in a directory in Node.js?
Next I would display the choices to the user like this example:
Expandable Tree Menu List
I would recommend CKFinder. Whether you already have the images on the server or they should be uploaded, that would be the best fit. http://cksource.com/ckfinder
Moreover, you can integrate their HTML WYSWYG editor (CKEditor) with it.
I'm developing an application which runs on a localhost server.! In this application I do ajax calls and get items from a local h2 DB! Using the response I create dynamic elements using jQuery. The elements use an item image as background and the requirement is that I should get the images from a local folder. ( The folder is created when the server is first started and the images are synchronized from a main server over the intranet. ) The folder hierarchy is shown below.
c:/----
|
zharaimages/ -----
|
[item id]/-----
|
[image].jpg
The image can contain any name for it but will be a jpg. How can I read the file system using jQuery to get the necessary image file when the item is dynamically loaded. I thought of this method but for that I can only read a file with a static name. I want to write a method where the image name can be anything.
clone.css('background-image','c:/zharaimages/' + items[i].itemId + '/image.jpg');
Any ideas or plugins are welcome.
Thank you.
update
This is a deployable application which uses an embedded jetty server. The folders are in the same computer as the application is!
Unfortunately a big NOOOOOO...
javaScripts cannot read or write files on users' computers (File API - not currently supported by many browsers - allows files to be read by scripts if the user specifically chooses to allow it),
though they can cause the browser to load remote pages and resources like scripts or images, which the browser may choose to cache locally.
They cannot create files on the server (except by communicating with a server side script that creates files for them).
You have to make a server request(many ways...) for the resources.
I'm not sure weather its possible with HTML5 or not
jQuery runs on the browser.
The files are on the server.
The only way that jQuery can read the files on the server is if it makes an AJAX call to the server, and your web server enumerates them.