Q:

How to get the url to insert as a data with Redux Form?

I was able to get the url in the attachment field but for the redux form it was empty, how is possible to pass the value of the url to the redux form? Below is the code and the screenshot:
<div className="FileUpload">
   <Dropzone
     onDrop={this.onImageDrop.bind(this)}
     multiple={false}
     accept="image/*">
<div>Drop an image or click to select a file to upload.</div>
   </Dropzone>
</div>
   <div className="form-group">
     <label htmlFor="attachment">Attachment:</label><br />
       <input className="form-control" focus placeholder="attachment" type="text" name="attachment" ref="attachment" value={this.state.uploadedFileCloudinaryUrl} />
        {this.state.uploadedFileCloudinaryUrl === '' ? null :
        <div>
          <p>{this.state.uploadedFile.name}</p>
            <img src={this.state.uploadedFileCloudinaryUrl} alt="" />            
        </div>}
        </div>
        <div className="ui small image">
          <img src={this.props.workrequest.attachment} alt="" />
        </div>

the url in the attachemnt field
The first one is using the React Dropzone to get the url but for the Redux Form it was empty. May I know how to do that to get the url inserts at Redux Form here? Thank you

A:

import React from 'React';
import { connect } from 'react-redux';
import { change, reduxForm } from 'redux-form';
import Dropzone from 'react-dropzone';

class UploadForm extends React.Component {
  onDrop = (accepted) => {
    if (!accepted.length) return;

    // start uploading
    this.setState({ isUploading: true });

    const formData = new FormData();
    formData.append('file', accepted[0]);

    axios.post('upload', formData).then(
      (res) => {
        this.props.dispatch(change('uploadForm', 'url', res.url));
        this.setState({ isUploading: false });
      },
      () => {
        this.setState({ isUploading: false });
      }
    );
  };

  render() {
    return (
      <form>
        <Dropzone onDrop={this.onDrop} />
      </form>
    );
  }
}

export default connect()(
  reduxForm({
    form: 'uploadForm',
    initialValues: {
      url: ''
    }
  })(UploadForm)
);

Please use this.

