CODEWITHSUNDEEP
javascriptreactjsecmascript-6
Brad
Brad

Reputation: 133

How to set Add two functions to 'onchange's in ReactJS

i am new to Reactjs, Still struggling to learn react. I have some problem related how i can call two functions in one onChange Event, I tried alot but did't get idea how it would be possible. Could You please help me. Thank You

Function 1

handleChange = ({ fileList }) => this.setState({ fileList });

Function 2

handleUpload = e => {
    const reader = new FileReader();
    const storeUser = JSON.parse(localStorage.getItem('user'));
    reader.onload = function(upload) {
      fetch(`http://..../api/s3/uploadtoaws`, {
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json',
        },
        method: 'POST',
        body: JSON.stringify({
          userId: storeUser._id,
          type: 'employee',
          content: upload.target.result,
          key: e.file.name,
          oldKey: '',
        }),
      })
        .then(response => response.json())
        .then(res => {
          console.warn(res);
        });
      // .done();
    };

    reader.readAsDataURL(e.file.originFileObj);
  };

Event Implementation

    <Upload
            listType="picture-card"
            fileList={fileList}
            onPreview={this.handlePreview}
            onChange={this.handleChange}
          >

Upvotes: 0

Views: 53

Answers (1)

kind user
kind user

Reputation: 41893

Just call the function inside JSX with specified argument, however it's important to use your handleUpload function as a currying function, so you will have access to both event and fileList.

onChange={this.handleUpload(someObj)}

handleUpload = ({ fileList }) => (e) => { // fileList is a field in someObj
    this.setState({ fileList });

    const reader = new FileReader();
    const storeUser = JSON.parse(localStorage.getItem('user'));
    reader.onload = function(upload) {
      fetch(`http://..../api/s3/uploadtoaws`, {
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json',
        },
        method: 'POST',
        body: JSON.stringify({
          userId: storeUser._id,
          type: 'employee',
          content: upload.target.result,
          key: e.file.name,
          oldKey: '',
        }),
      })
        .then(response => response.json())
        .then(res => {
          console.warn(res);
        });
      // .done();
    };

    reader.readAsDataURL(e.file.originFileObj);
}

Upvotes: 2

Related Questions