-2

I am using Material-UI so the conventional methods do not work. I have two buttons next to each other in my form. One is a "Choose File" input to allow users to upload a file, and the second is a submit button. I want to style both buttons the same, but is it possible to do so since the "Choose File" is an input? Can I use CSS to edit the Choose File Button?

enter image description here

<Grid item xs={12}>
                <FormControl>
                  <Input 
                    name='uploadFile'
                    type='file'
                    required={true}
                    onChange={(e) => setUploadFile(e.target.files)}
                    />
                </FormControl>
              </Grid>

              <Grid item xs={12}>
                <Button
                  variant="contained"
                  color="primary"
                  type="submit"
                  disabled={submitting}
                >
                  Submit
                </Button>
              </Grid>

I have tried this, but it only edits the color of the text:

input[type="file"] {
  top: 10px;
  left: 8px;
  font-size: 17px;
  color: #b3e5fc;
}
325
  • 594
  • 8
  • 21
  • Relevant answer in a closed question: https://stackoverflow.com/questions/572768/styling-an-input-type-file-button/25825731#25825731. If you can't see that, [here's a link to a working example](http://jsfiddle.net/4cwpLvae/) provided by the answer. – chazsolo Jul 08 '21 at 12:38
  • @chazsolo I am using Material UI so some of the standard stuff does not work – 325 Jul 08 '21 at 12:57

2 Answers2

0

You can have a look here How to enable file upload on React's Material UI simple input?

There is also a package that's very handy and customizable for upload in react named dropzone

You can find good examples here https://react-dropzone.js.org/

Hamid Shoja
  • 3,838
  • 4
  • 30
  • 45
-1

yes you can.this is an example for customize input type file.

<div class="file-input">
      <input
        type="file"
        name="file-input"
        id="file-input"
        class="file-input__input"
      />
      <label class="file-input__label" for="file-input">
        <svg
          aria-hidden="true"
          focusable="false"
          data-prefix="fas"
          data-icon="upload"
          class="svg-inline--fa fa-upload fa-w-16"
          role="img"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 512 512"
        >
          <path
            fill="currentColor"
            d="M296 384h-80c-13.3 0-24-10.7-24-24V192h-87.7c-17.8 0-26.7-21.5-14.1-34.1L242.3 5.7c7.5-7.5 19.8-7.5 27.3 0l152.2 152.2c12.6 12.6 3.7 34.1-14.1 34.1H320v168c0 13.3-10.7 24-24 24zm216-8v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h136v8c0 30.9 25.1 56 56 56h80c30.9 0 56-25.1 56-56v-8h136c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"
          ></path>
        </svg>
        <span>Upload file</span></label
      >
    </div>

body {
  font-family: sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

.file-input__input {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

.file-input__label {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  font-size: 14px;
  padding: 10px 12px;
  background-color: #4245a8;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25);
}

.file-input__label svg {
  height: 16px;
  margin-right: 4px;
}
Poldark68
  • 44
  • 4