import React, { useEffect, useMemo, useState, useCallback } from 'react'
import { Icon, Upload, Button } from 'antd'
import { fetch, apis } from '@/utils/request'

const postMiniApp = fetch(apis.mp.miniapp)

export default props => {  
  const customRequest = useCallback(({file, onError, onSuccess}) => {
    const data = new FormData()
    data.append('file', file)

    postMiniApp({ data }).then((res) => {
      props.onChange(res)
      onSuccess(res.url, file)
    }).catch(onError)

    return {
      abort() {
        console.log('upload progress is aborted.');
      },
    }
  }, [])

  return (
    <div>
      <Upload
        name="file"
        accept=".jpg, .jpeg"
        customRequest={customRequest}
      >
        <Button><Icon type="upload" /> 上传</Button>
      </Upload>
    </div>
  )
}
