[Form] Add File Input Styles

[alihalabyah]

It would be nice if the file input styled and has some effects.

[brigand]

Usually file inputs are styled by styling a <label>, and hiding the <input>. I recommend something like this:

<div>
    <label for="file" class="ui icon button">
        <i class="file icon"></i>
        Open File</label>
    <input type="file" id="file" style="display:none">
</div>

[jlukic]

Agreed about input type file, have some idea for this and drop zone for file drag&drop

[patie]

:+1:

[Anachron]

So, how's it going with this? Should be easy to implement as module, right?

[nickevin]

Thank you, brigand.

I write something like this(http://jsfiddle.net/nickevin/a4sD4/), YES, i copy your code.

<div class="field">
    <div class="ui action input">
        <input type="text" id="_attachmentName">
        <label for="attachmentName" class="ui icon button btn-file">
             <i class="attachment basic icon"></i>
             <input type="file" id="attachmentName" name="attachmentName" style="display: none">
        </label>
    </div>
</div>        

var fileExtentionRange = '.zip .rar .tar .pdf .doc .docx .xls .xlsx .ppt .pptx';
var MAX_SIZE = 30; // MB

$(document).on('change', '.btn-file :file', function() {
    var input = $(this);

    if (navigator.appVersion.indexOf("MSIE") != -1) { // IE
        var label = input.val();

        input.trigger('fileselect', [ 1, label, 0 ]);
    } else {
        var label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
        var numFiles = input.get(0).files ? input.get(0).files.length : 1;
        var size = input.get(0).files[0].size;

        input.trigger('fileselect', [ numFiles, label, size ]);
    }
});

$('.btn-file :file').on('fileselect', function(event, numFiles, label, size) {
    $('#attachmentName').attr('name', 'attachmentName'); // allow upload.

    var postfix = label.substr(label.lastIndexOf('.'));
    if (fileExtentionRange.indexOf(postfix.toLowerCase()) > -1) {
        if (size > 1024 * 1024 * MAX_SIZE ) {
            alert('max size：<strong>' + MAX_SIZE + '</strong> MB.');

            $('#attachmentName').removeAttr('name'); // cancel upload file.
        } else {
            $('#_attachmentName').val(label);
        }
    } else {
        alert('file type：<br/> <strong>' + fileExtentionRange + '</strong>');

        $('#attachmentName').removeAttr('name'); // cancel upload file.
    }
});

[FrancisMengx]

I think you may want to make the first input disabled. Normally you don't want people do edit the file name when they are uploading.

[ranga-nathan]

Any expected date for this feature. We are using at many places and only those are looking different.

[Anachron]

Maybe take a look at this one, it's pretty good: http://plugins.krajee.com/file-input/demo

[liorocks]

The issue is still opened, any ideas about adding this feature?

[mikemix]

+

[tiborsaas]

The Bootstrap demo page is very nice. This would indeed be a nice addition to this library.

[cspeer]

+1

[sos0]

+1

[nyaaao]

+1

[francodgstn]

+1

[GeoffreyBooth]

There’s a Meteor package for file uploads that claims its file upload control is styled for Semantic UI: https://github.com/tomitrescak/meteor-uploads

Perhaps the control from this package can be decoupled from Meteor and adapted for front-end use anywhere?

[dmitrijs-balcers]

+1

[BenevidesLecontes]

+1 waiting for this feature, i need so much.

[NexPB]

+1

[hmaesta]

+1

[metasyn]

+1

[piya23300]

+1

[listepo]

+1

[rumen-yankov]

+1

[Ethaan]

+1

[kodamirmo]

+1

[opvini]

+1

[jlukic]

I guess this is pretty low hanging fruit.

[dmitrijs-balcers]

Good news!

[metasyn]

What did you all do in the mean time ?

[Anachron]

@metasyn Cough https://github.com/jlukic?tab=activity

[whitefoxy]

+1

[metasyn]

@Anachron I meant like what kind of form input styling did you do / use in the mean time? Not, what work as been done on semantic in the mean time

[emil-nasso]

+1

[mattkenefick]

+1

[bhdrk]

+1

[jlukic]

Discussed in #1703 as well

[torayeff]

+2

[dolfly]

+1

[BlackDark]

:+1:

[louis-cl]

+1

[rufusthecat]

+1

[fixpunkt]

+1

[MohammedAl-Mahdawi]

+1

[joshjwalker]

+1

[mjnaderi]

+1

[caiotarifa]

http://tympanus.net/Tutorials/CustomFileInputs/ Seems very nice! :smile:

[jlukic]

Thanks I'll keep those links in mind

[listepo]

@caiotarifa :+1:

[mhingston]

flow.js also looks like a good option.

Flow.js does not have any external dependencies other than the HTML5 File API. This is relied on for the ability to chunk files into smaller pieces. Currently, this means that support is limited to Firefox 4+, Chrome 11+, Safari 6+ and Internet Explorer 10+.

Edit: also, dropzone (see theming).