React-输入类型文件语义UI React

Question

我正在尝试实现文件上传，但是使用SUIR <Input>，按钮，标签等。

严格来说，这与渲染中元素的使用有关。

使用常规html <label>和<input>元素，此过程将按预期工作。

  <Form.Field>
    <label>File input & upload for dataschemas & datasources</label>
    <input type="file" onChange={this.fileChange} />
    <Button type="submit">Upload</Button>
  </Form.Field>

现在，我尝试使用SUIR <Input>元素以及带有该<Button>元素的一些道具来进行样式化。

  <Form.Field>
    <label>File input & upload </label>
    <Input type="file" onChange={this.fileChange}>
      <Button
        content="Choose File"
        labelPosition="left"
        icon="file"
      />
    </Input>
    <Button type="submit">Upload</Button>
  </Form.Field>

您可以访问此处的codeandbox ，以更好地了解我在说什么。

当我单击Choose FileSUIR实现示例时，它不会提示用户从其系统中选择文件，而常规html <input>会提示。我不确定如何获得<Input type="file ...>语义上相同的行为。

Answer 1

SUIR没有提供开箱即用的FileInput按钮解决方案。但是您可以轻松创建自己的此类按钮实现。例如，通常通过使用hidden文件输入和按钮来完成此操作，当用户单击它时，该按钮会触发隐藏的输入单击：

  <Button
    content="Choose File"
    labelPosition="left"
    icon="file"
    onClick={() => this.fileInputRef.current.click()}
  />
  <input
    ref={this.fileInputRef}
    type="file"
    hidden
    onChange={this.fileChange}
  />

方法this.fileInputRef创建的React引用在哪里React.createRef()。您可以使用上述解决方案查看此codeandbox示例。

Answer 2

GProst 的回答非常有效。在另一种情况下，您可能不想创建一个ref来实现此文件的输入按钮。

下面的解决方案使用htmlForprop 并将其传递id给<input>. 不使用 ref 消除了额外的 JS，以及按钮和输入之间不必要的通信。

<Button as="label" htmlFor="file" type="button">
  Some button stuff
</Button>
<input type="file" id="file" style={{ display: "hidden" }} onChange={this.onChange} />

Answer 3

您可以使用如下反应设置文件上传表单。

您还可以获得文件名和文件引用，如本示例所示，axios如果您使用express, node堆栈，我已经包含前端上传逻辑和后端代码

class Thingy extends React.Component {
  
  uploadFile = event => {
    
    // filename
    console.log('filename ' + event.target.value);
    
    //file 
    console.log('file ' + event.target.files[0]);
    
    // if you are using axios then you can use below code
    //const formData = new FormData();
        // formData.append('file', event.target.files[0])
        // axios.put(
        //     'url',
        //     formData,
        //     { headers: { 'content-type': 'multipart/form-data' } }
        // ).then(data => {
        //     console.log('file uploaded')
        //     console.log(data)
        // }).catch(e => {
        //     console.log('error')
        //     console.log(e)
        // })
        
        // in express , node, backend code would be
        //import formidable from 'formidable'
        //(req, res) => {
        //  let form = new formidable.IncomingForm();
        //  form.parse(req, (err, fields, files) => {
            // you can get the file from files.file.path
        //  })
        // }
  }
  
  render() {
    console.log("rendered");
    return (
      <div>
        <input type="file" id="file" name="filename" onChange={this.uploadFile} />
      </div>
    );
  }
}

// Render it
ReactDOM.render(
  <Thingy/>,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="react"></div>