Q:

How to tabindex on element with opacity set to 0

I have a drag and drop image upload field, where I have set the input field to opacity 0 so the upload button doesn't show up so I can style it to fit the mock-up. However, I am trying to address accessibility concerns by making the upload functionality trigger when the user presses enter. 
The problem I am having is, since the opacity is set to 0 when I tab to it, it doesn't focus the element. I can still press enter to upload the file and that works fine, but there is no indicator for the user to know the option is there for them. 
Is there a good way to remedy that?   
Here is a small example of what I am doing:
HTML:
<div class="imageUploader">
    <input class="upload" type="file" accept="image/*">
    <p class="text"> Drop your photo here or upload a file</p>
</div>

CSS: 
.imageUploader {
    width: 120px;
    height: 122px;
    background-color: #F4F6FC;
    display: inline-block;
    border-radius: 100px;
    vertical-align: bottom;
    text-align: center;
    position: relative;
}
.image {
    opacity:0;
    width: 100%
    height: 120px;
    cursor: pointer;
    position: absolute;
    left: 0;
} 

.text {
    position: absolute;
    top: 30%;
    font-size: 14px;
}

A:

This should allow you to click on the custom circle with text to open the file input.  It also allows you to tab to it and a visual cue is displayed to indicate the element is focused.  

.imageUploader {
    width: 120px;
    height: 122px;
    background-color: #F4F6FC;
    border-radius: 100px;
    text-align: center;
    font-size: 14px;
    border: 1px solid transparent;
    display: flex;
    align-items: center;
}

.upload {
  opacity: 0;
  position: absolute;
  width: 122px;
  height: 122px;
  border-radius: 100px;
}

.upload:focus + .imageUploader {
     border:1px solid #4D90FE;
}
<div>
    <input id="inputID" class="upload" type="file" accept="image/*">
    <label for="inputID" class="imageUploader">Drop your photo here or upload a file</label>
</div>

