Styling input[type=file]

[damianobarbati]

Probably due to the css framework or some resetter I have the input with the following styles:

    top: 0px;
    right: 0px;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    position: absolute;

This means that wherever I click the upload is triggered.
How can I apply styles over the <input/>?

I tried with <UploadField style={{ width: 0, height: 0 }} without success.

[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 :)