0

I've created an input form for uploading files. It works fine but I don't know how to change its look.

This is my code:

<input   
    accept="image/*"
    onChange={this.uploadImage.bind(this)}
    multiple
    type="file"
  />

and it looks like this:

enter image description here

and my goal is to make it as similar as possible to this:

enter image description here

I've tried to add a label ( label="ADD IMAGE" ) inside the input so it would have that label as in the last picture but didn't change anything. And related to other changes I don't know where to start with.

Any suggestions are good.

Leo Messi
  • 5,157
  • 14
  • 63
  • 125
  • 1
    Please check that question: https://stackoverflow.com/questions/6376452/hide-the-browse-button-on-a-input-type-file it already has an answer for your question – Arseniy-II Jun 05 '20 at 07:22
  • changing an input type file itself won't work, this has to be done with label styling, wich means hiding the actual input, using the label to get the file – Ramon de Vries Jun 05 '20 at 07:23
  • @Arseniy-II I read the answers from that question but all of them keep the button for uploading, I want something where one can drag & drop an image to be uploaded – Leo Messi Jun 05 '20 at 07:28
  • @LeoMessi google it. It is very common problem there are tones of solutions and libraries. Here is how implement: https://css-tricks.com/drag-and-drop-file-uploading. Here is js library: https://www.dropzonejs.com/ – Arseniy-II Jun 05 '20 at 07:51

1 Answers1

0
  <div class="upload-image">
    <input accept="image/*"
    onChange={this.uploadImage.bind(this)}
    multiple
    type="file" class="imgInp" /> 
    <span>drag and drop image or click here</span>
  </div>
  <style>
.upload-image input{
  display: block;
    height: 23px !important;
    opacity: 0 !important;
    overflow: hidden !important;
      position: relative;
  z-index: 2;
  cursor: pointer;

}
.upload-image {
  position: relative;
  background-repeat: no-repeat;
  background-image:
    url('https://cdn0.iconfinder.com/data/icons/mobile-device/512/camera-photo-digital-blue-round-2-512.png');
  background-size:20px 20px;
  cors
}
span {
  position: absolute;
    left: 25px;
    top: 0;
    color: purple;
  z-index: 1;
}
  </style>
Minzy
  • 26
  • 2