I need to create a component in Reactjs which lets user select a directory from his system. I tried using
input name="myFile" type="file"
it lets user select files.
I want something like this
Do you want to upload the file?
if your target is that you can simply do it with any third party components which they already have written.
for files you can do this :
<input type="file" onChange={ (event) => this.handleChange(event.target.files) } />
handleChange(selected: FileList)
{
console.log(selected);
}
You can use a package for this pathnpm i path
This package is installed by default in node projects, this is used to read file extension, file basename and also we can use this to find the parent directory name (which you asked for) and much more we can do.
You can install this in react as well for reading Directory name Check this method to read the Directory/folder name or Check this Site
But you must give the file path
Also, check Ant-design bootstrap to get access for file path easily Ant-design component Link you can get the path in onChange function.
Related
I am using FileBase64 react component for uploading files (images), but I have a problem. When I try to upload the same named image twice in a row the file uploader doesn't even trigger. I also tried to upload an image and then change the name of it and try again and then it worked. So I am guessing that the problem is with the file uploader which is not triggered when you try to upload the same NAMED file more times in a row. I have also the function addImageToBase which is just calling an endpoint to send images to the server. I tried to print something on the first line of that function so I can be sure that the problem is not with the function, and the function wasn't triggered at all, so it is a one hundred percent problem with the file uploader.
<FileBase64
type="file"
name='image'
id="file-upload"
multiple={false}
accept="image/*"
onDone={(e) => { setFieldValue("image", e); addImageToBase(e) }}
/>
I don't think that this code is important, but if it will help, here you go. Can anyone tell me how to fix this problem?
My upload form needs to be able to select multiple files, show the upload progress, and show the files uploaded below the upload button, user will be able to delete the upload displayed also. I know there are libraries to execute this, point me in the direction of good ones that i can manipulate the css or provide useful links on how to build from scratch. Thank you
You can hide the file input and trigger the upload with the button or something.
const addFile = () => {
document.getElementById('fileElement').click()
}
<input type="file" id="fileElement" style="display:none">
<button onclick="addFile"></button>
i want to restrict user from selecting files from select dialog other than .xml extensions.
i have code like below,
<input type='file' accept='.xml' onChange={handleselectedfile}/>
Now with this user can still change from .xml to All files and select the file.
How can i make sure or restrict user from selecting files other than .xml extension types.
could someone help me with this. thanks.
You can try to add a validation onChange
something like this for Javascript
var fileName = document.getElementById('file').value.toLowerCase();
if(!fileName.endsWith('.xml'){
alert('You can upload xml files only.');
return false;
}
I have a component that represents a "badge". There are hundreds of types of different badges. Every badge is an individual SVG file. The badge component receives a slug for the badge it would need to use. The slug matches the file name. For instance: best-cheesecake would hint we need to display best-cheesecake.svg in the badge control.
Up till now, I've been loading svg images using:
import TestSVG from "../../images/test.svg";
and displaying them using:
<img height="50px" width="50px" alt="my-test-svg" src={TestSVG}/>
It's critical to understand I'm using WebPack and all images get their filenames hashed.
My question is about the best practice if my control needs to load one of the hundreds of SVG files. can my import dynamically using the filename string as it's given to the control via the props where those files get a hashed filename by webpack? Is there a better way? Obviously there has to be a way other than importing all SVG files in the folder...
use require.context concept you can import all the files located in a directory.
Below is the reference to what I have used earlier -
function importAll(r) {
let images = {};
r.keys().map((item, index) => { images[item.replace('./', '')] = r(item); });
return images;
}
const images = importAll(require.context('path/to/the/folder', false, /\.(png|jpe?g|svg)$/));
Now you can retrieve a particular image by its file name as below
<img src={**images[svg]**} className = {imgClassName} alt = {svg} />
where svg is filename with extension, ex. file1.svg
My solution was this:
I moved my 500+ badge SVG files from /src/images, where I keep all images into /src/images/badges
I have no explicit reference to any of the badge SVG files in my code so WebPack ignores them when creating the dist folder (both dev and production).
I installed WebPack's CopyPlugin and I use it to force the copy of /src/images/badges/*.svg into a badges under my default dist folder (it doesn't care they're not explicitly used in my code)
In my code, I can now use this successfully <img src={"/badges/" + this.props.badgeName + ".svg"}/>
Using the ng file upload directive I'm using ngf-accept to specify a list of allowed file types. This has disallowed many file types and they appear grey in the upload dialog but I'm still able to upload any files with a .js or a .sh extension.
I've added the directive to the following link, with the list of allowed files.
<a ng-model="file" data-nodrag ngf-select="openUploadModal($file, this)" ng-show="this.$nodeScope.$modelValue.type === 'folder'" ngf-accept="'image/*,video/*,audio/*,.pdf,.txt,.doc,.docx,.xls,.xlsx'">
The problem comes from the .txt allowed value. If I remove the '.txt' extension the .js and .sh files are also disabled. Apparently this is due to a bug affecting Mac users only, but is there any way around this?
Rather than ngf-accept, try ngf-pattern and then you can use '!' to explicitly disable certain file types:
<a ng-model="file" data-nodrag ngf-select="openUploadModal($file, this)" ng-show="this.$nodeScope.$modelValue.type === \'folder\'" ngf-pattern="'image/*,video/*,audio/*,.pdf,.txt,.doc,.docx,.xls,.xlsx,!.js,!.sh'">