React JS Ant Design Upload - Default Directory - reactjs

Is there a way to specify the default directory that the Ant Design Upload (https://ant.design/components/upload) component opens to? For example, if I want it to default open to some directory on a mapped drive like 'E:/dir/name', how would I do that? None of the options seem to fit that but there's got to be someone who has done this already.
Let me try to give some context, in an attempt to avoid the obvious vanilla web security responses: using react.js + antd with electron.js to build desktop apps out of the web tech stacks we all love. Using Node fs library to allow users to interact with the filesystem on their local machines. I would like to know whether it is possible to have it open to any directory I tell it to. I understand why this is terrible in the context of an app hosted on the good old intertron but this use case is much different as the user base is limited in scope and they actually want this behavior.

Actually that's impossible because of security reasons with HTML/Javascript. The ant design Upload component is not more than a simply styled HTML upload input

Related

How can i save a file on react folder from a url

Hello guys i need to download files from my database or my Onedrive and save them into react, this files is for my 3d models and the types is obj and mtl. For can i load dinamyc objects from database i need this feature, how can i do this ? I'm using three.js in this project.
Today the project is loading the files stored in project but i like to find a away to pick this from a database or a storage provider.
I tried to do using fetch or something like else but i can't find a away to do this correctly. I don't now if three.js supports url files i try to find but i don't see anything can help me.
Unless three.js provides a feature to take input from memory (in which case you can simply download the file into memory and pass it to three.js), doing this solely from a react app isn't possible. You will need to host your website on a server to have dynamic access to the public directory serving the react website.
Standalone react builds have static assets and can't be updated without creating another build

Deep Linking in React without React-Native or React-Navigation

I have a request from a client to implement deep linking in our React application whereby clicking a link will take them directly into the installed app (potentially to a certain point but not sure on that yet).
To my understanding react-native and react-navigation both handle this as part of a feature set within "Linking" that they offer. However it seems excessive to import a framework just for deep linking (perhaps not though).
After googling I can only really find references to deep linking on react-native or react-navigation.
What is my best course of action?
Let's get to some basics first, then it will be clear.
In modern SPA's, say with React, it's common for the SPA to handle navigation itself. You need to use browser's history API. It's because your SPA is just a single index.html with bunch of js code, so it sort of virtual, every page is constructed by your app. In order to not reinvent a wheel, its easier to use some library for that, say react-router-dom.
But then everything works as expected, and you have deployed your app. When user wants to get some deep page, say, https://my-awesome-app.com/deep/page/1, browser will just send a request to a server, asking: "Please, server, give me a page 1.html, in folder page, in folder deep". But server doesn't have that file, because it has literally one index.html, because its a SPA application. Then we need to tell the server to re-write all deep routes to index html, here is an example for my app hosted on Netlify:
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
When user will ask for that page, server will 'redirect' that request to the index.html and my react-router-dom will figure out which 'PageComponent' to render based on that path.
So, you can implement routing in your app yourself, probably using browser's History API, but I guess it might be easier to use library. But it's your call.
On the other hand if your app is not an SPA, the story might be different, because say in NextJS routing is implemented in framework itself, and if used deep linking would require different setup depending on how app is deployed.
Deep-linking is handled largely by Apple and Google server-side
https://www.adjust.com/blog/dive-into-deeplinking/
React-native provides extended functionality for deep-linking within mobile apps but normal web-applications there is no need to implement it there. Use universal links or Google specific links as standard linking within your web app to enable deep linking

What is a possible way to create an in app PDF viewer with React Native and Expo?

I'm working on an app for a financial company. They want the statements which are in PDF be accessible within the app for viewing. I'm having a hard time finding a solution since any libraries with a PDF reader would require ejecting from expo which I need to avoid.
I've been trying to use the expo-web-browser hoping I can keep it contained within the app kind of like how it works with authentication.
Any insights?

is it wise to create separate app for admin pages in react?

For normal functions, I think it is okay to incorporate all pages in to one react app using routes.
But when it comes to admin page, I think it is wise to create a separate react app which will compile into a different .js bundle and serve this not though react route but a totally different html along with the separately created js bundle.
I think if we bundle admin and normal functions into one file and serve through react router, there is a risk where the client can look into the js file and decipher admin pages. Couldn't this be a security risk?
If I'm overthinking please let me know. Other feedbacks are also welcome
Assuming that whatever backend is serving your React application has properly-implemented authentication, it's not technically a security flaw; a malicious actor can't negatively affect your product purely based on the admin page source being bundled with everything else.
That said, it does make it easier to see how your admin tools work, and gives someone nefarious a good indication of where they need to look for exploits.
Personally I'd never serve up a consumer-facing application and admin-facing application in the same codebase. Even though it's not exploitable directly, it makes it easier to find a potential exploit. Security through obscurity is largely a fallacy, but it never hurts.
You can use lazy loading, not to send whole pages in one bundle. but if they are totally different with no functional overlap, it's better to separate them, better responsibility separation, cleaner git history, etc ... And unless you are not exposing valuable data like hard coding api key, reading js source isn't a problem. The security breach happens in the back- servers and the back end services should be using some sort of authentication to respond, check OAuth, OpenID workflow. Its a very common pattern and used by tech giants.

Electron portable build not saving content locally

Use case
I'm building an app that has support for translations. The way I imagined it is that the app will come with English by default and will be sent around to different places. When it arrives in Germany (for example) a user will add German as a translation and then send it to France. The French user will be able to see both the original language (engligh) and German.
Background
The app is a React web app wrapped in Electron.
For the use case I implemented the localStorage API to store content changes and switch between different translations.
Problems
After building the app as a portable exe and testing it I started noticing that the content doesn't carry over to a new PC.
It seems like the data is stored on the system or something else is happening (like localStorage gets wiped when moving the portable exe to another machine).
In my view, because I'm using localStorage and Electron bundles the Chromium browser with the web app I was expecting localStorage to be saved within the portable app.
Would love to hear your opinion on this
Thanks a million.
The localStorage is not saved to your app's binary files but rather to a file on your account's part of your PC's file system.
On Linux, for example, Electron creates a directory for your app in ~/.config and stores your localStorage data there. I imagine that you might find a directory for your application in %APPDATA% (C:\Users\YourUsername\AppData\Roaming\ or similar) on Windows.
What you could try is to write your data to a file in your app's resources bundle which would be preserved while re-distributing, but that's another question and answer.

Resources