REACT js dropzone -=-- paano mag palabas nung data na nilagay

[neko021403]

Good day po . .
tanong ko po kung paano po mapalabas sa ALERT yung DROP/DRAG DATA po ditu sa
React-dropzone po ..
nag ONCHANGE PO AKO SA INPUT .. '
salamat po

 

[M14EBR]

TS ikaw din ba yung sa reactjs philippines group sa FB?

 

[kabutops]

Capital "Sample" talaga yung variable ng useState mo?

 

[neko021403]

Capital "Sample" talaga yung variable ng useState mo?

opo
const [Sample,setSample]

 

[kabutops]

console.log(Sample) ka nga bago mag return.
Tapos check mo kung may value sa console

Tsaka wait text input ba yan? or file input?

 

[neko021403]

console.log(Sample) ka nga bago mag return.
Tapos check mo kung may value sa console

Tsaka wait text input ba yan? or file input?

import React from 'react'
import '../styles/About.css'
import {useDropzone} from 'react-dropzone';
import * as AiIcons from 'react-icons/ai';
import * as FaIcons from 'react-icons/fa';
import * as FiIcons from 'react-icons/fi';
import { useState } from 'react';
function About({props}) {
const {acceptedFiles, getRootProps, getInputProps} = useDropzone({useFsAccessApi: false});
const [Sample, setSample] = useState('');
const files = acceptedFiles.map(file => (
<li key={file.path}>
{file.path} - {file.size} bytes
</li>
));

const samplesubmit=()=>{
alert(Sample)
};
return (
<div className='about-container'>
<div className='main-container'>

<div className='dropzone-container'>
<p style={{fontWeight:'bold'}}>Upload your File:</p>
<div {...getRootProps({className: 'dropzone'})}>
<input {...getInputProps()} onChange={e=>setSample(e.target.value)} />

<div className='add-icon'>
<FiIcons.FiUpload />
</div>
<p>Drag & drop files here <br/>or click to select files</p>

<div className='filename'>
<h4>File name:</h4>
<p style={{color:'gray'}}>{files}</p>
</div>
</div>
<button onClick={samplesubmit}>
Submit
</button>
</div>




</div>

</div>
)
}
export default About;

di ko po alam ano gagawin . . pero sana may nakakaalam kung paano .. salamat po

 

[kabutops]

wait try ko code mo

Mali code mo ts e.

import React, {useCallback} from 'react'
import {useDropzone} from 'react-dropzone'
function MyDropzone() {
const onDrop = useCallback((acceptedFiles) => {
acceptedFiles.forEach((file) => {
const reader = new FileReader()
reader.onabort = () => console.log('file reading was aborted')
reader.onerror = () => console.log('file reading has failed')
reader.onload = () => {
// Do whatever you want with the file contents
const binaryStr = reader.result
alert(binaryStr); // eto nag aalert
}
reader.readAsArrayBuffer(file)
})

}, [])
const {getRootProps, getInputProps} = useDropzone({onDrop})
return (
<div {...getRootProps()}>
<input {...getInputProps()} />
<p>Drag 'n' drop some files here, or click to select files</p>
</div>
)
}
export default MyDropzone;

 

[M14EBR]

Parang ganto yung error sa ginagawa kong anime site kanina.

NextJS ba yang component mo? or ReactJS (CRA) lang?
kung sa NextJS yan, for sure hindi talaga gagana yung alert kapag hindi async yung function mo.

try mo gawing
const sampleSubmit = async () => alert(Sample)

 

[neko021403]

Parang ganto yung error sa ginagawa kong anime site kanina.

NextJS ba yang component mo? or ReactJS (CRA) lang?
kung sa NextJS yan, for sure hindi talaga gagana yung alert kapag hindi async yung function mo.

try mo gawing
const sampleSubmit = async () => alert(Sample)

nag appear alert naman kaso pumapatong pag drag ... pag click hindi naman pumapatong pag nag console.log ako .. pumapatong kasi yung file pag nag drag ako . pero pag click naman okay naman .. pag drag lang talga pumapatong sya ..

till now wala pa din solusyon ...

gagamit na lang siguru ako ng html drag and drop . .di na dropzone ng react js .. .


reacjt js lang po alam ko .. wala po ako alam ano anong next js .. js js na iba iba po react lang po

 

[M14EBR]

nag appear alert naman kaso pumapatong pag drag ... pag click hindi naman pumapatong pag nag console.log ako .. pumapatong kasi yung file pag nag drag ako . pero pag click naman okay naman .. pag drag lang talga pumapatong sya ..

till now wala pa din solusyon ...

gagamit na lang siguru ako ng html drag and drop . .di na dropzone ng react js .. .


reacjt js lang po alam ko .. wala po ako alam ano anong next js .. js js na iba iba po react lang po

sinundan mo lang ba yung implementation mo jan ng dropzone?
baka kasi hindi naka strict mode yung tut na sinundan mo.
default na kasi sa react18 yung strict mode. which results in 2x rendering ng component.

 

[neko021403]

sinundan mo lang ba yung implementation mo jan ng dropzone?
baka kasi hindi naka strict mode yung tut na sinundan mo.
default na kasi sa react18 yung strict mode. which results in 2x rendering ng component.

sinundan ko lang poyung nasa tutorial, pati yung documentation sa react js org ba yun .. bali madami nga din way on how to do it , kaya try ko na lang din yung ibang way pa , ... pero if ndi gumana , balik html drag and drop ako . yun na lang siguru ..

parang nahihirapan ako sa mga dropzone, react table ng react js .. mga ganyan ganyan ..

anyway, hanapan ko pa din ng paraan ..aaralin ko .. di ko lang talga mahanap yung paraan kung paano ..

 

[M14EBR]

Eto siguro solution sa problema mo.
<input {...getInputProps()} onChange={e=>setSample(e.target.value)} />
Yung onChange mo, ipasok mo sa getInputProps()
magiging ganito dapat.
<input {...getInputProps({ onChange: e => setSample(e.target.value) )} } />

di ko sure kung mafifix. ahahahah try mo nalang.

 

[neko021403]

Eto siguro solution sa problema mo.
<input {...getInputProps()} onChange={e=>setSample(e.target.value)} />
Yung onChange mo, ipasok mo sa getInputProps()
magiging ganito dapat.
<input {...getInputProps({ onChange: e => setSample(e.target.value) )} } />

di ko sure kung mafifix. ahahahah try mo nalang.

View attachment 2503916

alam ko ginawa ko na toh .. nilagay ko pa nga sa yung isang props na meorn class name .. .. pero sige try ko din uli ..

lahat naman kasi ng suggestion tina try ko talaga .. dami ko din natututunan , mga ideya .. salamat po ..

 

[erictilus]

gusto mo bang e multiple paps ang input yun ba ang ibig mong sabihin?