how to upload image in react-admin graphql

Question

i saw example dataprovider in react-admin docs that is handle image upload and convert it to Base64 but i cant use this for graphql dataprovider anyone can help me? actually i want piece of code that handle image upload in react-admin graphql dataprovider

Answer 1

You have to create another client to convert images (or files) to base64 and wrap your graphQL client around it. Like this one:

upload.js

import { CREATE, UPDATE } from 'react-admin'

/**
 * Convert a `File` object returned by the upload input into a base 64 string.
 * That's not the most optimized way to store images in production, but it's
 * enough to illustrate the idea of data provider decoration.
 */
const convertFileToBase64 = file =>
  new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file.rawFile)

    reader.onload = () => resolve(reader.result)
    reader.onerror = reject
  })

export default dataProvider => (fetchType, resource, params) => {
  if (resource === 'Photo' && (fetchType === CREATE || fetchType === UPDATE)) {
    const { data, ...rest_params } = params
    return convertFileToBase64(data.data).then(base64 => {
      return dataProvider(fetchType, resource, {
        ...rest_params,
        data: { ...data, data: base64 }
      })
    })
  }
  return dataProvider(fetchType, resource, params)
}

data.js

import buildGraphQLProvider, { buildQuery } from 'ra-data-graphql-simple'
import { createHttpLink } from 'apollo-link-http'
import { ApolloLink } from 'apollo-link'
import { onError } from 'apollo-link-error'
import { AUTH_KEY } from '../authentication'
import { data } from '../schema'

const customBuildQuery = introspection => (fetchType, resource, params) => {
  return buildQuery(introspection)(fetchType, resource, params)
}

const httpLink = createHttpLink({ uri: process.env.REACT_APP_GRAPHQL_URI })
const middlewareLink = new ApolloLink((operation, forward) => {
  operation.setContext({
    headers: {
      Authorization: `Bearer ${localStorage.getItem(AUTH_KEY)}` || null
    }
  })
  return forward(operation)
})
const errorLink = onError(({ networkError }) => {
  if (networkError.statusCode === 401) {
    // logout();
  }
})
const link = middlewareLink.concat(httpLink, errorLink)

export default () =>
  buildGraphQLProvider({
    clientOptions: {
      link: link
    },
    introspection: { schema: data.__schema },
    buildQuery: customBuildQuery
  })

App.js

import React, { Component } from 'react'
import { Admin, Resource } from 'react-admin'

import buildGraphQLProvider from 'data'
import addUploadCapabilities from 'upload'
import dashboard from 'dashboard'
import User from 'resources/User'
import Event from 'resources/Event'
import Photo from 'resources/Photo'

class App extends Component {
  state = { dataProvider: null }

  componentDidMount () {
    buildGraphQLProvider().then(dataProvider => this.setState({ dataProvider }))
  }

  render () {
    const { dataProvider } = this.state

    if (!dataProvider) {
      return (
        <div className='loader-container'>
          <div className='loader'>Loading...</div>
        </div>
      )
    }
    return (
      <Admin
        dashboard={dashboard}
        title='Admin'
        dataProvider={addUploadCapabilities(dataProvider)}
      >
        <Resource name='User' {...User} />
        <Resource name='Event' {...Event} />
        <Resource name='Photo' {...Photo} />
      </Admin>
    )
  }
}

export default App