React Js fine uploader component

Question

How we can customize fine uploader in React JS and use form to submit the file along with certain fields on the form, instead of choosing the file and upload.

Also Can somebody tell me how to pass token in headers when uploading files in React JS

Thanks!!

score 0 · Answer 1 · answered Jul 25 '17 at 15:23

Depending on which fine uploader methods you're using, you can pass custom headers via the customHeaders property when you create an instance of the fine uploader. This answer has some potential guidance for you, but not knowing which methods you need the headers for means I can't be more specific: FineUploader - add authentication in header

Your first question is harder to answer, as it depends on how you're trying to use fine uploader and where you're sending your uploads. You could capture your files in a normal HTML file input, and then pass the files to the fine uploader when you submit the form, but that raises the question of why you would use the fine uploader in the first place.

score 0 · Answer 2 · answered May 09 '18 at 10:06

Hi to choose file and upload file you need to create two event for select file upload file

import React, { Component } from 'react';
import { withStyles } from 'material-ui/styles';
import TextField from 'material-ui/TextField';
import Button from 'material-ui/Button';

const styles = theme => ({
    ChooseButton:{
        background: '#86c5f7',
        margin: 1,
        float: 'left',
        '&:hover': {
          background: '#0078d7'
        },
      },
    FileSelecter:{
        display:'none'
    },
    FileNamer:{
        overflow: 'hidden',
        paddingleft: 10,
        height: '2.5rem',
        width:'67%'
      },
    
});

class FileChoose extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          fileName: '', 
        }
      }

    handleClick=(event)=>{
        this.fileInput.click();
    }

    handleChange = (event) => {
        var name = event.target.value;
        var lastIndex = name.lastIndexOf("\\");
        if (lastIndex >= 0) {
            name = name.substring(lastIndex + 1);
        }
        this.setState({ fileName: name});
    }
    
    uploadHandler = (event) => {
  const formData = new FormData()
  formData.append('myFile', this.state.selectedFile, this.state.selectedFile.name)
  axios.post('my-domain.com/file-upload', formData, {
    onUploadProgress: progressEvent => {
      console.log(progressEvent.loaded / progressEvent.total)
    }
  })
}

    render() {
        const classes = this.props.classes;
        return (
            <div>
                <Button className={classes.ChooseButton} onClick={this.handleClick}>
                    Choose File
                    <input  
                        ref={fileInput => this.fileInput = fileInput} 
                        type='file' 
                        className={classes.FileSelecter} 
                        onChange={this.handleChange}/>
                </Button>
                <TextField  
                    className = {classes.FileNamer}
                    placeholder="No file chosen"
                    value={this.state.fileName}/>
                    
                <Button onClick={this.uploadHandler}>Upload!</Button>
            </div>
        );
    }
}
export default withStyles(styles)(FileChoose);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

React Js fine uploader component

2 Answers2