React - File Uploader

Question

So I have been using this https://github.com/FineUploader/react-fine-uploader. Is there a way to add cursor: pointer to FileInput element's style.

What I tried is:

     <FileInput
        uploader={this.uploader}
        className={{ cursor: 'pointer' }}
        style={{ cursor: 'pointer' }}
      >
        <span>{this.props.children}</span>
      </FileInput>

then it generated:

<input type="file" class="react-fine-uploader-file-input" style="bottom: 0px; height: 100%; left: 0px; margin: 0px; opacity: 0; padding: 0px; position: absolute; right: 0px; top: 0px; width: 100%;">

without the cursor: pointer property

Answer 1

You could implement using CSS. You need to create one css and need to provide on file input className="file-upload".

See this working stackblitz demo.

CSS

.file-upload input[type='file'],::-webkit-file-upload-button {
  cursor: pointer;
}

FileInput Component

import React, { Component } from 'react';
import { render } from 'react-dom';
import './style.css';

import FileInput from 'react-fine-uploader/file-input'
import FineUploaderTraditional from 'fine-uploader-wrappers'

const uploader = new FineUploaderTraditional({
  options: {
    request: {
      endpoint: 'my/upload/endpoint'
    }
  }
})

const fileInput = (
  <FileInput multiple accept='image/*' uploader={uploader} className="file-upload">
    <span class="fa fa-upload file-label">Choose Files</span>
  </FileInput>
)

render(fileInput,document.getElementById('root'))

Answer 2

Pass style for your span element. Use proper class name and do not pass the styles directly into the className.

     <FileInput uploader={this.uploader} >
        <span style={{cursor : 'pointer'}}>{this.props.children}</span>
     </FileInput>