Independent "Submit" button for tabbed form in Create

Question

I already made 2 types of create page:

1. Create single record.

2. Import multiple records from xlsx file.

Now I want to implement 2 independent buttons:

1. Save
2. Import

meaning that when I click on button 1, only button 1 works.

Here is my code:

<Create {...this.props}>
            <TabbedForm toolbar="">
                <FormTab label="Single record">
                    <ReferenceInput label="Centre" source="centre" reference="centre" sort={{ field: 'name', order: 'ASC' }} allowEmpty>
                        <SelectInput optionText="name" />
                    </ReferenceInput>
                    <TextInput source="fullname" />
                    <TextInput source="serial   " />
                    <TextInput source="birthday" />
                    <TextInput source="join_date" />
                    <TextInput source="remark" />
                    <SaveButton label="Save" redirect="show" submitOnEnter={true} />
                </FormTab>
                <FormTab label="Import from xlsx">
                    <ReferenceInput label="Centre" source="centre_import" reference="centre" sort={{ field: 'name', order: 'ASC' }} allowEmpty>
                        <SelectInput optionText="name" />
                    </ReferenceInput>
                    <label id="customLabel">
                        <input id="upload" ref={(input) => { this.textInput = input; }} type="file" hidden
                               onClick={(event)=> {
                                   event.target.value = null;
                               }}
                               onChange={
                                   (event) => {
                                       this.fileName.textContent = event.target.files[0].name;
                                   }
                               }
                        />
                        <FlatButton primary label="Select file" icon={<ActionFile />} onClick={() => {
                            this.textInput.click();
                        }}/>
                        <span id="fileName" ref={(span) => { this.fileName = span; }}></span>
                    </label>
                    <SaveButton label="Import" redirect={false} submitOnEnter={true} />
                </FormTab>
            </TabbedForm>
        </Create>

Answer 1

The easiest way would be to keep a single button here. You may add a text inside the importation tab explaining that clicking on save will import the file.

However, you still have to deal with the redirection. To do so, you'll have to implement a custom SaveButton:

1. Copy the code of the default SaveButton into a SaveOrImportButton file.

2. Update its mapStateToProps function and use redux-form getFormValues selector to inspect the form values and determine whether its an importation.

3. Use this knowledge to customize the button:

   • You may update the label to Import if the user selected a file. The label will update immediately after the file field gets dirty.
   • You can change the redirect value at L22.

Use this button inside a Toolbar component and pass this component to the toolbar prop of the Create component.