Input value not updating with custom input in react-admin

Question

i have looked around at some other examples and this works right up to the point where i would want it to update record-form in the redux dev tools.. This is my first shot at a custom input so i am not surprised but figure maybe someone can give me a heads up... The uploader input does show up as a registered field in redux... This is my input class

import React, { Component, PropTypes } from 'react';
import { addField } from 'react-admin';


class CloudinaryInput extends Component {
  static propTypes: {
    label: PropTypes.string,
    onUploadSuccess: PropTypes.func,
  }

  static defaultProps = {
    label: 'Upload Image to Cloudinary'
  }

  processCloudinaryResult = (error, results) => {
    if (results && results.event === 'success') {
      const result = results.info;
      const { secure_url, path } = result;      
      this.props.onUploadSuccess({publicUrl: secure_url, cloudinaryId: path});      
    }
  }

  componentDidMount(){
    this.openCloudinaryUploader();
  }

  openCloudinaryUploader = () => {
    //const { cloud_name, unsigned_upload_preset } = this.props.cloudinarySettings;
        let cloud_name = 'some_cloud_name';
        window.cloudinary.openUploadWidget({
            cloud_name: cloud_name,
            upload_preset: 'some_upload_preset',
            showAdvancedOptions: true,
            inline_container: '#inline_container',    
            cropping: true,    
            multiple: false,   
            defaultSource: "local",
            sources: [    "local",        
                            "url",
                            "camera",        
                            "image_search",        
                            "facebook",        
                            "dropbox",        
                            "instagram"    
                    ]
        }, this.processCloudinaryResult
    );
  }

  render() {
    return (
        <div id="inline_container"></div>        
    )
  }
}

export default addField(CloudinaryInput);

and a container as follows:

import React from 'react';
import CloudinaryInput from './CloudinaryInput'

class CloudinaryInputContainer extends React.Component {
    onImageUpload = ({publicUrl, cloudinaryId}) => {
      /* do something with the just uploaded image id/url. */ 
      console.log('URL: ' + publicUrl);
      console.log('ID: ' + cloudinaryId);   
    }

    render() {
      return <div>
        <CloudinaryInput source='uploader' onUploadSuccess={this.onImageUpload} />
      </div>
    }
  }

  export default CloudinaryInputContainer;

All i am really interested in is having the url cloudinary result populate in my form values so that i can write it into the db so i am not sure what i am missing here. There may be an easier way than this but not one i came across while looking at examples. The console.log lines do print out the proper values

score 0 · Answer 1 · answered Jul 14 '20 at 10:41

Here is my component that use react-select in react-admin.

You should use useInput instead addField

import * as React from 'react'
import { Labeled, useInput } from 'react-admin'
import AsyncSelect from 'react-select/async';

const SelectAsync = props => {
  const {
    input: { name, onChange, value },
    meta: { touched, error },
    isRequired
  } = useInput(props);

  const customOnChange = (option, type) => {
    if (type.action === "select-option") {
      onChange(option.value)
    }
  }

  return <Labeled label={props.label} fullWidth>
    <AsyncSelect {...props}
      name={name}
      value={value}
      onChange={customOnChange}
      error={!!(touched && error)}
      helperText={touched && error}
      required={isRequired}
    />
  </Labeled>
};

export default SelectAsync

Input value not updating with custom input in react-admin

1 Answers1