Styling input[type=file] about cj-upload

[zackify]

Can you show your full code? Whatever components you have inside of UploadField will be clickable as a file input:

import { UploadField } from '@navjobs/upload'

  <UploadField
    onFiles={files => //files object here}
    containerProps={{
      className: 'resume_import'
    }}
    uploadProps={{
      accept: '.pdf,.doc,.docx,.txt,.rtf',
    }}
  >
    <div>
      Click here to upload! This can be an image,
      or any component you can dream of.
    </div>
  </UploadField>

The div inside will be clickable everywhere. You should only place it around what you want clickable.

[damianobarbati]

Here's the code.

            <UploadField
                onFiles={([file]) => importXlsx(file)}
                uploadProps={{ accept: '.xlsx,.csv' }}
                containerProps={{ style: { boxShadow: '0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12)' } }}
            >
                <Button raised={true} onClick={() => console.log('ciao')}>Import</Button>
            </UploadField>

The button is rendered ok, here the screen with the computed final styles (input full screen, button is ok):

[zackify]

Ah, I think I see. The upload field spans 100% height and width. You need to wrap it inside of something that is constrained to the height and width of your button. So like:

<div style={{width: '50px', height: '50px'}}>
<UploadField
    onFiles={files => //files object here}
    containerProps={{
      className: 'resume_import'
    }}
    uploadProps={{
      accept: '.pdf,.doc,.docx,.txt,.rtf',
    }}
  >
    <div>
      Click here to upload! This can be an image,
      or any component you can dream of.
    </div>
  </UploadField>
</div>

[damianobarbati]

Doh!

[zackify]

Let me know if you need any more help, I'll close this :)