ipfs.files.add(Buffer) function causing TypeError: Cannot read property 'add' of undefined

I am trying to upload an image to ipfs using ipfs.files.add() function
but it is causing me this error

Uncaught TypeError: Cannot read property 'add' of undefined
at App.onSubmit (App.js:70)
at HTMLUnknownElement.callCallback (react-dom.development.js:147)
at Object.invokeGuardedCallbackDev (react-dom.development.js:196)
at invokeGuardedCallback (react-dom.development.js:250)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:265)
at executeDispatch (react-dom.development.js:571)
at executeDispatchesInOrder (react-dom.development.js:596)
at executeDispatchesAndRelease (react-dom.development.js:695)
at executeDispatchesAndReleaseTopLevel (react-dom.development.js:704)
at forEachAccumulated (react-dom.development.js:676)
at runEventsInBatch (react-dom.development.js:844)
at runExtractedEventsInBatch (react-dom.development.js:852)
at handleTopLevel (react-dom.development.js:5025)
at batchedUpdates$1 (react-dom.development.js:19916)
at batchedUpdates (react-dom.development.js:2246)
at dispatchEvent (react-dom.development.js:5105)
at interactiveUpdates$1 (react-dom.development.js:19978)
at interactiveUpdates (react-dom.development.js:2267)
at dispatchInteractiveEvent (react-dom.development.js:5081)

The code:

captureFile(event){
 event.preventDefault();
 const file=event.target.files[0];
 const reader=new window.FileReader();
 reader.readAsArrayBuffer(file);
 reader.onloadend = () => {
 this.setState({buffer:Buffer(reader.result)});
 console.log('buffer',this.state.buffer);
 }

}
onSubmit(event){
 event.preventDefault();
 ipfs.files.add(this.state.buffer, ( error , result ) => {

 if(error){
   console.error(error);

 }
 else{
   console.log("success");
 }
this.setState({ipfshash : result[0].hash});
console.log('ipfshash',this.state.ipfshash);
 }

 );
 }