How can we simply upload folder in reactjs? - javascript

I am looking here for upload folder in reactjs.I have folder in that doc and docx files are there I just want to upload folder when user click in browse button.where I have to not allowed user for selecting single file. Can someone please give me simple example of folder upload or folder select where user can only select folder not file. Actually I am looking in react-dropzone library but not understanding how can I use this for folder select or upload. If someone can guide me or give me simple example where it showing folder upload example that will be great help.Thanks in Advance.

You can allow folder upload by adding these attributes empty "webkitdirectory directory" into your react-dropzone input.
like this.
<input {...getInputProps()} directory="" webkitdirectory="" type="file" />
by using this user can't select a single file.
its work for me :)

You can allow folder upload by adding theses attributes "webkitdirectory mozdirectory directory" to your input :
<input type="file" webkitdirectory mozdirectory directory />
but you can't disable the user ability to upload only one file.

If you're looking for uploading a folder using d&d I recommend react-uploady:
Its drop-zone supports file and folder drop upload out of the box.
It can even be used to upload child folders recursively:
import Uploady from "#rpldy/uploady";
import UploadDropZone from "#rpldy/upload-drop-zone";
const MyApp = () => (
<Uploady destination={{ url: "my-server.com/upload" }}>
<UploadDropZone
onDragOverClassName="drag-over"
htmlDirContentParams={{ recursive: true }}
>
<span>Drag&Drop File(s) or Folder(s) Here</span>
</UploadDropZone>
</Uploady>
);

Based on Zaif's answer, you can customize a file upload event via the getFilesFromEvent prop, as described in the react-dropzone documentation.
UPDATE:
This is a semplified example taken from the official documentation.
import React from 'react'
import { useDropzone } from 'react-dropzone'
function Plugin(props) {
const {acceptedFiles, getRootProps, getInputProps} = useDropzone({
getFilesFromEvent: event => myCustomFileGetter(event)
})
return (
<section className="container">
<div {...getRootProps({className: 'dropzone'})}>
<input {...getInputProps()} />
<p>Drag 'n' drop some files here, or click to select files</p>
</div>
</section>
)
}
export default Plugin
async function myCustomFileGetter(event) {
const files = []
// Retrieves the files loaded by the drag event or the select event
const fileList = event.dataTransfer ? event.dataTransfer.files : event.target.files
for (var i = 0; i < fileList.length; i++) {
const file = fileList.item(i)
files.push(file)
}
// files returned from this function will be acceptedFiles
return files
}

Related

custom JavaScript(index.js) isn't working on my WordPress website

hi guys I'm building a WordPress website from scratch I'm trying to work on search bar but I found a problem when using JavaScript classes. i have a folder on my theme folder with name src (working with the folder build using node.js). in that folder i have another folder with name modules. i call the JavaScript files from modules using index.js (import example from ....). the custom JavaScript file is not working at all .i look at console no problem detected, i checked network the index.js is loading just fine but the JavaScript I'm writing is not working at all .
index.js :
import Search from "./modules/searchengine"
const search = new Search()
searchengine.js
import $ from "jquery"
class Search {
constructor(){
this.searchinput = $(".search-submit") ;
}
events(){
this.searchinput.on("click", this.typingLogic.bind(this));
}
typingLogic(){
console.log("test")
}
}
export default Search
function.php
function logistics_js_files()
{
wp_register_script('main_scripts', get_theme_file_uri('/build/index.js'));
wp_enqueue_script('main_scripts');
}
add_action('wp_enqueue_scripts', 'logistics_js_files');
HTML code :
<div class="widget widget_search">
<div class="search-form">
<label>
<input class="search-field" placeholder="Search …" type="search">
</label>
<input class="search-submit" value="Search" type="button">
</div>
</div>
i tried a lot nothing seems to work what do you think guys ?

Getting file from MaterialUI Upload Button to React Hook and uploading to Firestorage?

Hey guys I am using MaterialUI's Upload Button from here: https://material-ui.com/components/buttons/
As you can see below I have copy pasted that button and now I want to upload it to Firebase Firestorage using my hook. By pressing on the button it class changeFoto
<input
accept="image/*"
className={classes.input}
id="contained-button-file"
multiple
type="file"
onChange={(e) => changeFoto(e)}
/>
<label htmlFor="contained-button-file">
<Button className={classes.fotoButton} component="span">
Foto
</Button>
</label>
Here you can see the changeFoto function:
(setFoto is a hook in this case and foto the variable of the useState)
const changeFoto = (e) => {
setFoto(e.target.files[0]);
const pflegeengelRef = storage.child(
"pflegeengel/" + pflegeengelDocumentIDs[selectedIndex]
);
pflegeengelRef.put(foto).then(function (snapshot) {
console.log("Uploaded a file!");
});
};
And indeed something gets uploaded when I go look into the storage there is a file. But it is not my image file it was some weird file format that only had the text "undefined" in it. So that is my problem I guess
This happens because setFoto is an async function. It doesn't update foto immediately - it triggers a render with the new foto as the new value.
When you try to upload foto, it hasn't updated yet. Using put(e.target.files[0]) would solve your problem.

How to allow all excel formats in my file input field

I have the following input field which prompts the user to upload the given file formats.
<input name="file" type="file" id="inputGroupFile01" accept=".xls, .xlsx">
But there are many other file extensions too like XLSM, XLTX, XLTM and maybe more. Is there a way to allow all types of excel format without writing each one individually.
.
Also, keep in mind I'm invoking a JS function when a file is selected to make sure the selected file is of the correct extension
var fileType = $('#inputGroupFile01').val().split('.').pop();
if (fileType != 'xls' && fileType != 'xlsx'){
*error msg*
}
Thanks for the help.
you should try a mask
<input name="file" type="file" id="inputGroupFile01" accept=".xl*">
You can find list of all excel extensions here: https://learn.microsoft.com/en-us/deployoffice/compat/office-file-format-reference#file-formats-that-are-supported-in-excel. Then copy-paste it to json file, and then load file with js.

Copy files from one folder to another on client side

I can select two folders as below.
<input type="file" id="file-input-one" webkitdirectory="" directory="">
<input type="file" id="file-input-two" webkitdirectory="" directory="">
I want to copy/move all files from 1st folder to 2nd. I can read files inside first directory as below. I can also get the full path of the second directory as well. How do I copy files?
jQuery(function($) {
$('#file-input-one').on('change', function() {
$.each(this.files, function(i, file) {
//move each file to second folder.
}
})
})

Anyway to bind an upload from multi upload box to input file?

I am using the Drag and drop Multi Importer script I found online, below my div containing the drag and drop is an input type="file"..
Currently if you click the Browse files button from the input and add an image then it shows in the Multi Upload div (and of course the input file section as well) However not everyone is going to use the browse files button, they are going to drag and drop so is there a way to reverse this behavior? Where when the client drags a file in the multi upload div it will show in the input file tag as being added?
I hope I wasn't too confusing there.
Here is what I have:
<div id="dragAndDropFiles" class="uploadArea">
<h1>Drop Images Here or Click to Upload</h1>
</div>
<input type="file" name="thumbnail" id="thumbnail" multiple />
<script type="text/javascript">
var config = {
support : "image/jpg,image/png,image/bmp,image/jpeg,image/gif", // Valid file formats
form: "primaryPostForm", // Form ID
dragArea: "dragAndDropFiles", // Upload Area ID
}
jQuery(document).ready(function($){
initMultiUploader(config);
$('.button').click(function () {
$('#primaryPostForm').submit();
});
$('#dragAndDropFiles').bind("click" , function () {
$('input#thumbnail').click();
});
});
</script>
Ultimately it would be great just to hide the input file type section but still have it in my markup because I have other functions that take that file and create products from it.

Categories

Resources