I have a directory full of text files that I need to read in my react web app
-resources
|-file1.txt
|-file2.txt
|-file3.txt
I would like to store this resources directory somewhere in the app such that the contents of resources can be listed, and individual files can be iterated over on a line-by-line basis.
currently, I'm stuck on listing the files. I'm storing them like this
-node_modules
-public
|-resources
||-file1.txt
||-...
-src
But I really don't care where the resources directory is located. I tried using list-react-files based on this, but got Module not found: Error: Can't resolve 'fs'.
for further context, I was thinking the code to scan for files would be in in App.js, such that the scanned files could be used to populate certain components.
import React from "react"
import './App.css';
...
function App() {
//searching for files
var files = [...];
return(
//create components which can list and work with the files
...
);
}
export default App;
So, to summarize the question, how can I list files in reactJS?
p.s.:
this project was made with create-react-app
part of the point is that it should be easy to add new files to this directory, but I see no reason this process has to be "dynamic"
When people are using your react page, it is "running" on their computer and the software does not have access to all the files and data you'd like to use.
You will need to do this at "build time" when your service is being packaged up, or "on the server".
When you are building your react app, you can hook into processes that can find files and perform operations on them. Gatsby might be your best bet. Look at how people add "markup" files to their projects, built a menu from them and then render them as blog articles. NextJS, Vite, and other frameworks and tools will work, you may just need to learn a bit more.
The other approach, to do this "on the server" means when you are running code on the server you can do almost anything you like. So, your react app would make a call (e.g. rest request) to the server (e.g. NodeJS), and the code running on the server can use fs and other APIs to accomplish what you'd like.
From what you describe, doing this as part of your build step is probably the best route. A much easier route is to move this data into a JSON file and/or a database and not crawl the file system.
Looks like its a client side rendering app and not server side (node app). Resources folder you trying to list is residing in server and react app (javascript) running on browser can't access it directly.
To whom it may concern, I spent more time than I should have working on this. I highly recommend converting everything to JSON files and importing them. If you want to be able to scan for JSON files, make a JSON file that includes the names of all your files, then import that and use that for scanning. Doing things dynamically is a bare.
If you don't reformat, you'll likely need to use Fetch, which is asynchronous, which opens up a whole can of worms if you're using a framework like React.
If you're just importing json files, it's super easy:
import files from './resources/index.json';
where index.json looks like
{
"files":[
"file1.json",
"file2.json"
]
}
if you need to import the files more dynamically (not at the very beginning) you can use this:
var data = require('./resources/'+filename)
this will allow you to scan through your files using the index.json file, and load them dynamically as needed.
I have a MERN Stack in which the user upload one of the 4 types of files: .pdf, .jpeg, .psd, .ai and I used FileReader to save it as buffer to mongoDB Database. I want to render it back to my React app (automatically download the file) on click. 'react-pdf' didnt help because the data which comes back from the database is buffer type and hence it shows 'Failed to load PDF' How do I solve this issue for all file types?
What I think there is nothing wrong with your client-side part the main cause of this is how you are storing it into DB
To store files in MongoDB you should try to use GridFS
You can find some tutorials about working with GridFS (example).
Check your MongoDB Driver's API and try to implement it in your project
I am having problems importing two ontologies in Protégé. These ontologies are stored in the following links Onto1 and Onto2 and are also in the W3ID.ORG URL re-direction service (Onto1Redirection and Onto2Redirection).
I tried to import both of them using Protege's Direct Import => Add => Import an ontology contained in a document located on the web option. I tried introducing both the original OWL file's and the redirection URL.
However, after saving the ontology and loading it, imports are not correctly done (i.e. one or the other is not imported).
Any guidance in this matter will be appreciated.
I'm trying to create script for auto data import from one drupal site to other.
I have site foo.com and bar.com I'm trying to import everything from bar.com into foo.com.
So far I've managed to write script that imports all content types, nodes, blocks, etc. All that left is to import page with content. CTools module has clear function to export page data (panels, varants and etc...) but i cant find import function. (in admin panel there is way to import exported page, but import goes through a lot of functions, its too difficult to track all the way)
Is there an easer way to import page programmatically?
If you want to import anything from one site to another you are doing a site synchronization. And the best tool for this is Drush and commands rsync and sql-sync. See at Using Drush to synchronize and deploy sites.
If you want to import only Panel Pages you may use the Panel Import and of course Features.
An alternative option is Demo module to create site snapshots. Then a custom module can be used with a button to enable a demo snapshot.
And a more alternative idea is to create some feature modules (that add content, views, panels etc) and then a simple module that will have all these modules as required.
Can anybody tell me whats the format of CSV file which we can import to CMS Made Simple's Product Import function.
If a sample could be provided, that would be more helpful.
Thank you.
When you download the module, look in the root folder.
You'll find a "test_import.csv" file which guides you in detail about all kind of fields you can import !
However this is the basic syntax:
#FLAG|#name|#sku|#details|#price|#create_date|#modified_date|#taxable|#status|#weight|#HIER|#CAT:new|#CAT:surplus|#FIELD:image:Image|#FIELD:textarea:Notes|#ATTRIBS