upload button should not allow upload if fields are empty

Question

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>

A logical test that each of the 3 fields is valid, combined with an and function. Have a look here: https://stackoverflow.com/q/30187781/4961700 — Solar Mike, Jun 26 '23 at 06:55

Tapan Sharma · Answer 1 · 2023-06-26T07:30:41.577

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.

score 0 · Accepted Answer · answered Jun 26 '23 at 07:16

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!! ^^

im using material ui dropzone not a button – Bruno Jun 28 '23 at 15:38 — Bruno, Jun 28 '23 at 15:38

upload button should not allow upload if fields are empty

2 Answers2