Question 194245 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – upload button should not allow upload if fields are empty

I have three input fields and an upload button.i want the upload button to be disabled and enabled if other three fields have been filled. i don’t know how to go about this. i have attached the section of my code that contains the fields

the upload button is the last field in the code. how do I write this logic?

 <div className='product'>       
                    <>
                        {apiFetched && relatedPartyDetails?.map((party, index) => (
                            <Row key={index}>
                                <>
                                    <Col lg={3}>
                                        <Autocomplete
                                            options={names}
                                            getOptionLabel={(option) => (option.details?.name)}
                                            id={"disable-clearable-buyer-" + index}
                                            label="Party"
                                            renderInput={(params) => (
                                                <TextField {...params} label="Party 1" variant="standard" />
                                            )}
                                            onChange={(event, newValue) => {
                                                console.log('test1');
                                                // names.forEach((ele) => { 
                                                //     console.log(ele.details.name);
                                                //     console.log('hurre',party.buyer==ele.details.name);
                                                    console.log(party.buyer);
                                                // })
                                                // console.log(names.find((ele) => ele.details.name == party.buyer))
                                               
                                                handleParties(event, newValue,index,'buyer');
                                            }}
                                            disabled={isView}
                                            value={names.find((ele) => ele.details.name === party.buyer)}
                                            disableClearable
                                        />
                                         {error && error?.buyer && <span style={{ color: 'red' }}>{error.buyer}</span>}
                                    </Col>

                                    <Col lg={3}>
                                        <Autocomplete
                                            options={names}
                                            getOptionLabel={(option) => ( option.details?.name)}
                                            id={"disable-clearable-shipper-" + index}
                                            label="Party"
                                            renderInput={(params) => (
                                                <TextField {...params} label="Party 2" variant="standard" />
                                            )}
                                            onChange={(event, newValue) => {
                                                handleParties(event, newValue, index,'shipper');
                                            }}
                                            disabled={isView}
                                            value={(names && party.shipper) && names.find((ele) => ele.details.name === party.shipper)}
                                            disableClearable
                                        />
                                         {error && error?.shipper && <span style={{ color: 'red' }}>{error.shipper}</span>}
                                    </Col>

                                
                                    <Col lg={4}>
                                        <div className='d-flex align-items-center Related_parties'>
                                            <p className='mb-0 title-color'>Relation</p>
                                            <Autocomplete
                                                className='ms-3 mb-3'
                                                options={[...parties]}
                                                getOptionLabel={(option) => option.label}
                                                id={"disable-clearable-relation-party-" + party.party_relation}
                                                label="Party Relation"
                                                renderInput={(params) => (
                                                    <TextField {...params} label="Party Relation " variant="standard" />
                                                )}
                                                defaultValue={relatedPartyDetails.party_relation}
                                                getOptionSelected={(option) => option.label === 'test'}
                                                onChange={(event, newValue) => { handleRelation(event, newValue, index); setRelation(parties); console.log('parties', parties);console.log('party', party); }}
                                                value={parties.find((ele) => ele.value == party.party_relation)}
                                                disableClearable
                                            />
                                        </div>
                                        {error && error?.party_relation && <span style={{ color: 'red' }}>{error.party_relation}</span>}
                                    </Col>
                                    {relation && <Col lg={2}>
                                        <div className='drag-and-drop'>
                                            <DropzoneArea
                                                Icon="none"
                                                filesLimit={1}
                                                showPreviews={true}
                                                defaultValue={relatedPartyDetails.upload_evidence}
                                                showPreviewsInDropzone={false}
                                                useChipsForPreview
                                                previewGridProps={{ container: { spacing: 1, } }}
                                                dropzoneText='Upload Evidence'
                                                previewText=""
                                                onChange={(file) => handleChangeFile(file[0], index)}
                                            />
                                        </div>
                                        {error && error?.upload_evidence && <span style={{ color: 'red' }}>{error.upload_evidence}</span>}
                                    </Col>}


                                </>
                              
                            </Row>
                        ))}
                    </>

              


            </div>
        </div>
Tags:

2

Answers


  1. 0

    if you are using material-ui-dropzone, it actually creates an uncontrolled Material-UI Dropzone. If it is uncontrolled, you are not getting any out of the box support for disabling the component but instead you can apply a css property on the parent div of DropzoneArea

     <div className='drag-and-drop' style={{ pointerEvents: checkIfConditionIsFulfilled? "none" : "all }} >
 <DropzoneArea
     Icon="none"
     filesLimit={1}
     showPreviews={true}
     defaultValue={relatedPartyDetails.upload_evidence}
     showPreviewsInDropzone={false}
     useChipsForPreview
     previewGridProps={{ container: { spacing: 1, } }}
     dropzoneText='Upload Evidence'
     previewText=""
     onChange={(file) => handleChangeFile(file[0], index)}
 />
</div>
style={{ pointerEvents: checkIfConditionIsFulfilled? "none" : "all }}

    You will need to write checkIfConditionIsFulfilled on the basis of your states.

    Login or Signup to reply.
  2. 0

    Add a state variable to hold the field values and an initial state where the upload button is disabled

    const [fieldValues, setFieldValues] = useState({ party1: '',party2: '', partyRelation: '', isUploadButtonDisabled: true });

    Update the handleParties and handleRelation functions to update the field values and check if all fields are filled:

    const handleParties = (event, newValue, index, partyType) => {
  setFieldValues(prevValues => ({
    ...prevValues,
    [partyType]: newValue ? newValue.details.name : ''
  }));
};

const handleRelation = (event, newValue, index) => {
  setFieldValues(prevValues => ({
    ...prevValues,
    partyRelation: newValue ? newValue.value : ''
  }));
};

    Update the JSX:

    <Button disabled={ fieldValues.party1 === '' || fieldValues.party2 === '' || fieldValues.partyRelation === '' }> Upload </Button>

    Hope it helps!! ^^

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search