Meteor React Dynamic Data Loading & File Upload Issues

help
1

Hi all,

I am using the Meteor React withTracker function to load the data.

**I am facing two issues with the below mentioned code. **

  1. After creating the Activity object, Page is not loading with new data.
    enter image description here
  2. While creating the Activity, During the Image file upload option, getting the below exception, Although I am able to insert the data and image into DB.

Exception:

Uncaught DOMException: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.

How to solve the above issues ?

Below is the code.

ActivityContainer.js

const ActivityContainer = withTracker(() => {
 const subscribeHandles = [];
  subscribeHandles.push(Meteor.subscribe("activities"));
// onSubmit() method code 
-----
-----
// end of onSubmit() method code. 
return {
    loading: subscribeHandles.some((handle) => !handle.ready()),
    activities: Activities.find({
      editObject : {name, description , date, price },
      official: true,
      createdBy: Meteor.user()._id,
    }),
    onSubmit,
  };
})(ActivityList);

export default ActivityContainer ;

ActivityList.js

class ActivityList extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }


// editObject
 componentDidMount() {
    this.setState({
      name: this.props.editObject.name, 
      // ----- other properties(price, date etc)
    });
  }

  fileUploadButton() {
    let fileInput = null;
    return (
      <input type="file" value={this.state.imgURL} ref={(input) => { fileInput = input; }}
        onChange={() => { this.setState({
            image: fileInput.files[0],
            imgURL: URL.createObjectURL(fileInput.files[0]),
          });
        }} />
    );
  }

render() {
const { activities, onSubmit } = this.props;

return (
<div> 
{/* Form object to crate and Edit  */}

 <Form>
  <Form.Field>
	<label>First Name</label>
	<Form.Input	width="16" type="text"	  name="title"	  placeholder="Enter the club name"
	  value={this.state.title}
	  onChange={this.onFieldChange}
	/>
  </Form.Field> 
-- other fields 
   <Form.Field width="8">
		{this.fileUploadButton()}
		{this.state.imgURL && (
		  <img src={this.state.imgURL} width="80" height="80" />
		)}
	  </Form.Field>

	  <Button
		labelPosition="right"
		type="submit"
		onClick={this.onSubmit}
	  >
		Submit
	</Button>
</Form

----
-----
------
{/* Below displays activity Cards  */}
  <Card.Group itemsPerRow={3} stackable>
  {activities.map((act) => (
    <ActivityCard activity={act} />
    ))}
  </Card.Group>
</div>
)

}