onFiles never called.

[wordyallen]

const Overlay  = ({removeComponent, index, changeImage}) =>
  <View  style={{position: 'absolute'}} >
    <UploadField  onFiles={files=>console.log('dfs')}  >
      <View  style={[s.overlay, s.size]}>
        <Text style={s.replace}>Replace</Text>
      </View>
    </UploadField>
    <CloseIcon index={index} removeComponent={removeComponent}/>
  </View>

[zackify]

Sorry about this! Do you think you could post a code snippet that I can paste into create-react-app that reproduces this issue?

[wordyallen]

Its all good. I'm on it now.

[wordyallen]

I figured it out. The onMouseLeave={()=>this.setState({hover:false})} unmounts the component before it can call the files. So I have to leave the component mounted during upload. Below is my solution. Please advise. Thanks!

parent

  state={hover:false, uploading: false}

  handleUpload = () => this.setState({uploading:true})

  render(){
    return(
      <View
        style={s.container}
        onMouseEnter={()=>this.setState({hover:true})}
        onMouseLeave={()=>this.setState({hover:false})}
        >
          <View >
            <Image style={[s.image, s.size]} source={source} />
            <CheckIcon />
          </View>
          { this.state.hover || this.state.uploading 
            ? <Overlay handleUpload={this.handleUpload}  .... 

child

const Overlay = ({removeComponent, index, handleUpload}) =>
    <View onClick={handleUpload}  style={{position: 'absolute'}} >
      <UploadField  onFiles={files=>console.log(files)}  >
        <View  style={[s.overlay, s.size]}>
          <Text style={s.replace}>Replace</Text>
        </View>
      </UploadField>
      <CloseIcon index={index} removeComponent={removeComponent}/>
    </View>

[zackify]

Ah okay, glad you figured it out. The UploadField can actually handle the hover stuff for you. I'd recommend wrapping the whole upload area inside it like this:

<UploadField onFiles={files => console.log(files}>
  {hover => (
    <div className={hover ? 'hovering' : ''} />
  )}
</UploadField>

If you can't accomplish exactly what you need doing that, I'm up for making another component to fit your use case. I want this to be the only set of components you need.

[wordyallen]

Can I ask a quick follow up? Is there a way to set only a single upload?

[zackify]

Do you mean allow a user to only upload once? That would be something you implement on your end

[wordyallen]

a single file not multiple

[zackify]

It should only do one file by default. You can set whatever values you want on the file input by passing data to uploadProps:

uploadProps={{
  accept: '.pdf,.doc,.docx,.txt,.rtf',
}}

[wordyallen]

oh cool. awesome. thanks for the awesome component

[zackify]

Sure! Glad it's all good for you. You'd have to pass multiple: true to uploadProps for it to allow more than one.