Question

161

React - input type file Semantic UI React

rated 0 times [ 164] [ 3] / answers: 1 / hits: 21940 / 5 Years ago, mon, april 1, 2019, 12:00:00

I'm trying to implement a file upload, but using SUIR <Input>, button, label, etc.

This is strictly about the use of the elements in render.

Using regular html <label> and <input> elements this process works as expected.

  <Form.Field>

    <label>File input & upload for dataschemas & datasources</label>

    <input type=file onChange={this.fileChange} />

    <Button type=submit>Upload</Button>

  </Form.Field>

Now I'm trying to use SUIR <Input> element, as well as some props with the <Button> element for styling.

  <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>

You can visit the codesandbox here to get a better visual idea of what I'm talking about.

When I click Choose File in the SUIR implementation example it does not prompt the user to chose a file from their system, whereas the regular html <input> does. I'm not sure how to get <Input type=file ...> in semantic to behave the same way.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

eliza

Add To Favorites

Follow

Total Points: 732

Total Questions: 96

Total Answers: 86

Location: Guam

Member since Fri, Jun 18, 2021

3 Years ago

answered 5 Years ago josuea · Accepted Answer

SUIR doesn't provide a FileInput button solution out of the box. But you can easily create your own implementation of such button. For instance, usually this is done by using a hidden file input and a button which triggers the hidden input click when user clicks on it:

  <Button

    content=Choose File

    labelPosition=left

    icon=file

    onClick={() => this.fileInputRef.current.click()}

  />

  <input

    ref={this.fileInputRef}

    type=file

    hidden

    onChange={this.fileChange}

  />

Where this.fileInputRef is a React ref created by React.createRef() method.
You can check this codesandbox example with the above solution.