Fomantic-ui: [Form] file input styles

[hammy2899]

Add file upload input styles as mentioned here https://github.com/Semantic-Org/Semantic-UI/issues/403, would also be cool to implement as a module and have drag & drop functionality.

[lubber-de]

Any preferences or ideas where we can probably adopt the functionality from an existing open source library?

https://www.sitepoint.com/10-jquery-file-uploads/ lists the (even today) most used libraries afaik.

[hammy2899]

@lubber-de We had a talk about making the upload input into a module instead of just a style in the form. Therefore we can make drag and drop support along with some nice functions for doing uploads.

[Foorack]

At this point even a simple style would be sufficient. Anything is better than nothing at all. :slightly_smiling_face:

[lubber-de]

The absolute minimum is only to hide the file input element itself, as you can design your fileupload button using form labels as you desire for the time being

<form class="ui form">
  <label for="textupload" class="ui icon button">
    <i class="file icon"></i>
      Open any file
  </label>
  <input type="file" id="textupload" class="ui file input">
</form>

.ui.file.input {
  display: none;
}

See https://jsfiddle.net/jsagx3v9/1/

[aexvir]

@hammy2899 @lubber-de I can take this one. What would be the acceptable PR for this?

[hammy2899]

@aexvir Go for it 👍

We just want basic styles for the file input button like the comment from @lubber-de above

[hammy2899]

@aexvir We want to add this as a module but adding the styles will be a start.

[aexvir]

Alright, so I'll go just for styles on the first PR and afterwards we can make an issue for adding more functionality to it, with specific requirements that will be added as another PR. Does that make sense?

[hammy2899]

@aexvir Yeah that's fine 👍

[aexvir]

So... I'm not that sure about this tbh. I can't get anything much better than @lubber-de 's solution, which is literally just a three line code change, as all the work is done in the label and not the input itself.

Webkit does allow some more fantasy with the input styling but I don't think that's an acceptable solution.

For all the rest of the stuff we'll need javascript, even for the basic stuff as showing the uploaded filename.

Should I just submit the PR with this three line change for hiding the file input?

If not, let's define a specification for the upload input, which features we'd like to have from the beginning and I'll work on that.

[ioOiOiOoi]

I use the following method.

<div class="ui grid">
<div class="column">
<label class="file-upload">
       <input name="file" type="file" id="files" class="file-input">
       <span class="ui button">Choose file</span>
</label>
</div>
</div>

.file-input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    outline: 0;
    width: 100%;
    height: 100%;
}

[andrewleith]

This may not be accessible - I am not able to use the keyboard with this solution.

[ko2in]

This will also attempt to select the file when you click anywhere next to the button unless you set position: relative to label.

@lubber-de already suggested the better method.

[andrewleith]

You mean https://jsfiddle.net/jsagx3v9/1/? That one isn't keyboard accessible either. I'm trying to figure out if I can make it be though.

[ko2in]

@andrewleith No. I am not talking about keyboard accessibility. The method @ioOiOiOoi will trigger the file input by clicking anywhere next to the label as the same height as the label.

[lubber-de]

@andrewleith Here is the same fiddle but now it's accessible to keyboard strokes 🙂
The only difference: Put the file input off canvas instead of hiding it.
So instead of display:none;, you use top:-99999px;
This way the focus of the label will automatically focus the (still visible, thus focussable, but moved off screen) fileinput. When you now press space/enter the file explorer opens as expected
https://jsfiddle.net/lubber/eah9pr4q/19/

[andrewleith]

Amazing! Thank you!