how to store a file on mysql db

Question

When I upload a file on my app, I need it to be stored in a mysql db.

I tried to store it as a url, but I got error because it was too long; so I changed the type of the attribute in the db from string to blob, but now when I try to store the file, I get a 422 (unprocessable entity) error. I Think I should turn the url into an Object, but I don't know how. This is the code:

import React, { Component }     from 'react'
import PropTypes                from 'prop-types'
import { connect }              from 'react-redux'
import { bindActionCreators }   from 'redux'
import { withRouter, Link }     from 'react-router-dom'
import ProgressIndicator        from 'components/ProgressIndicator'
import * as assetActionCreators from 'core/actions/actions-asset'
import * as accountActionCreators from 'core/actions/actions-   account'
import { getString }            from 'core/libs/lib-asset-helpers'
import Controls                 from '../../components/Controls'
import { styles }               from './styles.scss'

class GenerateHashPanel extends Component { 
  constructor(props) {
    super(props) 
this.state = {
  assetUrl:'',
  nextBtnDisabled: true

   } 
  }

  componentDidMount() {
 const { actions, asset } = this.props

if (asset.assetHash === '') {
  getString(asset.stagedAsset, (assetUrl) => {
    setTimeout(() => {
      actions.asset.checkIfRegistered(assetUrl)
      actions.account.setAssetUrl(assetUrl)

      console.log("assetUrl", assetUrl)
    }, 2000) 
  })  
}


  }

  static getDerivedStateFromProps(nextProps) {
    const { asset } = nextProps

if (asset.assetHash !== '') {
  return { nextBtnDisabled: false }
} else if (asset.alreadyExists) {
  return { nextBtnDisabled: true }
}

return { nextBtnDisabled: true }
  }

  getControls = () => {
    const { nextBtnDisabled } = this.state
    return (
      <Controls
        prevDisabled={false}
        nextDisabled={nextBtnDisabled}
        handleNext={this.proceed}
      />
    )
  }

 proceed = () => {
   const { history } = this.props
    const {assetHash, owner, public_key, examDate, exam, assetUrl} = this.props.account
    assegnaUri(null, null, null, null, null, assetUrl)

    history.push('/register?panel=3')


 }

 render() {
   const { asset } = this.props
    const { alreadyExists, assetHash, error } = asset
let content

if (alreadyExists) {
  content = (
    <div className="notification">
      <h2>Spiacenti, questo documento è già stato registrato</h2>
      <span className="action"><Link to="/upload">Carica un nuovo documento</Link></span>
    </div>
  )
} else if (assetHash) {
  content = (
    <div>
      <h2>Codice univoco del documento</h2>
      <span>Premere "Avanti" per registrare il documento</span>
      <div id="unique-hash">{assetHash}</div>
    </div>
  )
} else if (error) {
  content = (
    <div className="notification">
      <h2>Spiacent, c&apos;è un errore!</h2>
      <span className="action"><Link to="/upload"> Hai effettuato l'accesso a Metamask <br /> e questo sta puntando sulla rete corretta??</Link></span>
    </div>
  )
} else if (asset.stagedAsset) {
  content = (
    <div>
      <h2>Sto generando un codice univoco per il documento...</h2>
      <div id="hash-progress-indicator">
        <ProgressIndicator type="linear" />
        <span className="blink">Attendere...</span>
      </div>
    </div>
  )
} else {
  content = (
    <div className="notification">
      <h2>Per favore, carica un documento da registrare</h2>
      <span className="action"><Link to="/home">Upload an asset</Link></span>
    </div>
  )
}

return (
  <div className={styles}>
    {content}
    {this.getControls()}
  </div>
)
  }
 }

function assegnaUri(hash_referto, owner, public_key, data_esame,    tipo_esame, uri) {

  fetch('http://localhost:8080/api/REFERTOs', {
    method: 'POST',
    headers: { 
      Accept: 'application/json',
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      "hash_referto":hash_referto,
      "owner":owner,
      "public_key":public_key,
      "data_esame": data_esame, 
      "tipo_esame":tipo_esame,
      "uri":uri
      }),
});
} 

GenerateHashPanel.propTypes = {
  actions: PropTypes.shape({}).isRequired,
  asset: PropTypes.shape({}).isRequired,
  account: PropTypes.shape({}).isRequired,
  history: PropTypes.shape({}).isRequired
}

function mapStateToProps(state) {
  return {
    asset: state.asset,
    account: state.account
  }
}

function mapDispatchToProps(dispatch) {
  return {
    actions: {
      asset: bindActionCreators(assetActionCreators, dispatch),
      account: bindActionCreators(accountActionCreators, dispatch)
    }
  }
}



export default withRouter(connect(mapStateToProps, mapDispatchToProps)(GenerateHashPanel))

Any advice?