Comments (18)
@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.
from fomantic-ui.
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/
from fomantic-ui.
@aexvir Yeah that's fine 👍
from fomantic-ui.
Amazing! Thank you!
from fomantic-ui.
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.
from fomantic-ui.
At this point even a simple style would be sufficient. Anything is better than nothing at all. 🙂
from fomantic-ui.
@hammy2899 @lubber-de I can take this one. What would be the acceptable PR for this?
from fomantic-ui.
@aexvir Go for it 👍
We just want basic styles for the file input button like the comment from @lubber-de above
from fomantic-ui.
@aexvir We want to add this as a module but adding the styles will be a start.
from fomantic-ui.
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?
from fomantic-ui.
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.
from fomantic-ui.
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%;
}
from fomantic-ui.
This may not be accessible - I am not able to use the keyboard with this solution.
from fomantic-ui.
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.
from fomantic-ui.
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.
from fomantic-ui.
@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.
from fomantic-ui.
@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/38/
from fomantic-ui.
File input styling is now prepared by #2145
from fomantic-ui.
Related Issues (20)
- [form] unable to set default prompt for custom function HOT 5
- [dropdown] Multiple item drop down with HTML special chars not properly working anymore HOT 1
- [modal] `show` breaks modal state if more configuration is done before transition finish HOT 2
- [Dropdown] Search-In-Menu search term and filter results do not match when re-focused HOT 1
- [Label] Space between labels after line-breaks missing HOT 3
- Chrome 122 does not display modals with scrolling content correct HOT 2
- nag('dismiss') throws error HOT 1
- [Dropddow] Items are not updated when remove manually HOT 2
- [Dropdown] render is very slow with large dataset HOT 2
- [Scrollbar] CSS style for Firefox scrollbar break the scrollbar on chromium browser (Chrome/ Edge) HOT 2
- [Dropdown] Using serialized JSON as value prevent the select value from being updated.
- [scope] npm install deprecated and security warnings HOT 5
- [form validation] keyHeldDown conflicting behavior HOT 3
- [message] Link color doesn't match message color HOT 6
- [dropdown] ui simple dropdown does not work on mobiles HOT 2
- [bug] `closable` modal set to false is still closing HOT 7
- [menu] Menu is rendered outside viewport HOT 3
- [dropdown] JS error when typing if dropdown open HOT 2
- [bug] modal `closable` set to `true` not closing HOT 6
- [calendar] incorrect day shown when startMode changed from "month" to "hour" HOT 7
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from fomantic-ui.