How to get all files from a directory using ReactJs - javascript

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.

Related

Will multiple data files cause website to run slower, even if they aren't being used by web app?

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.

How can I show a .txt file contents in a meteor (blaze) app?

I am trying to read the contents of a .txt file and show them in a Meteor app.
The problem is that I need the file loaded without the need of an input from the user and also that file is being updated almost every 3 seconds from another program. I can't access to the file if it isn't inside the server folder using
file///C:/path/to/file/file.txt
but if I use a script to copy that file to the server's folder every X seconds, then Meteor starts to rebuild the whole app interrupting any user filling forms.
Any help is greatly appreciated.
EDIT: I tried inserting the file in "public" but client keeps refreshing after file.txt is edited. I ended up using Collections inserted from the server and loaded from the client, but now I will check how to detect file changes that update the Collection automatically.
Put the file in the /public directory and then you can serve it from a relative path starting at that point. For example:
/public/dynamicFiles/file.txt
Can be served from your app as
/dynamicFiles/file.txt
Files under /public do not cause app rebuilds and are directly accessible (no security).
If you need your file to be secured or you don't want to be copying it all the time then you'll want to use fs.readFile on the server to access it directly from its original directory (which can be an absolute path).

How to view local files in web browser by displaying and creating a link to local files stored in your computer in your webApp?

I have created a webapp using JSP,Html and Javascript which currently runs on my localhost using apache webserver. I want to display the files and folders and of a directory in local computer. I also want to create a download link or view link of those so that when anyone click on it it will be viewed in new tab or become downloadable as it happens in any ftp server. I know similar type of question has
been asked but none of them worked for me.
To create the download link I used
Download
this does not work as it is not in my webapp path and download attribute also does not work in internet explorer.
I'm not sure why you are exposing your local drive contents on the web but here's an option:
On the page that should display the files, in java code, list all
folders and files then for each file/folder show a link to some page
(for example "navigateLocalDrive" that sends the path of the clicked
file/folder like this:
Download
Now in that jsp, check if the GET variable is a path for a file or a directory,
if its a file, just send it back in the response, if its a
directory, list all files/folders and do the same as in step 1
Please note:
How I encoded the file path in the href in order to work properly.
The Access permissions for the webserver should allow write/read to that path (I'm already doing it on my Tomcat server on local host with the default setup no change needed)
For your reference, here are some helpers for this task:
How to list contents of a server directory using JSP?
Downloading file from JSP/Java
I am not sure if this is possible. In general the access rights are limited to the src and webContent Folder (for your html coding mentioned above for sure) . This is also reasonable, because you do not want to access or change data on your Computer in general, because after local development you want to deploy your web application to a server.
To make a test copy some file to the webContent and you will be able to download it. Within your Java coding you can use some IO package like java.io.File to navigate over folders and files. However keep in mind, that you will get some exceptions like
java.io.FileNotFoundException: C:\WeatherExports\export.txt (Access is denied)
if you want to access files outside the server.

File upload with AWS and javascript

Is there a file select library, similar to drop zone, that just manages the file selection process and lets me control how the files are uploaded? It seems to me, unless I have missed something - most of these libraries require you to identify a server side file that will handle the upload. Currently, my set up is such that files are sent to my server and then to S3 - which is far less efficient than sending them directly to AWS via the javascript API.
I like how dropzone lets me select files from multiple directories - adding to the list of files to upload on the fly.

How can I upload files, given their paths, using Javascript?

So I want to be able to upload a file, parse the file, and then upload some more files that are listed in the first file. Is this possible?
Say I upload 'animals.csv' which contains a list of animals and some information about them, including the paths to their images. Can I parse this file and get the images listed?
I know how to upload a file using an but is it possible to automatically upload some more files given their paths?
I'm afraid not. Here's a similar question:
upload file from client to server without openFile dialog
The main issue is security. The browsers don't want to be a vector for viruses that would steal files from people's machines.
Your choices are limited to having users drag and drop files or select them from a dialog. Chrome also has a feature which will let users drag and drop folders not just files (upload file from client to server without openFile dialog), but i think still only Chrome supports that and the user still has to at least choose or drag the folder.

Categories

Resources