Semantic-UI [Form] Add File Input Styles

[Form] Add File Input Styles

Open alihalabyah opened this issue 10 years ago • 117 comments

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

Dec 04 '13 20:12 alihalabyah

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>

Dec 04 '13 23:12 brigand

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

Dec 05 '13 04:12 jlukic

:+1:

Jan 11 '14 14:01 patie

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

Feb 02 '14 18:02 Anachron

Thank you, brigand.

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

2014-02-27_110239

<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.
    }
});

Feb 27 '14 03:02 nickevin

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.

Aug 20 '14 01:08 FrancisMengx

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

Oct 31 '14 10:10 ranga-nathan

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

Oct 31 '14 12:10 Anachron

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

Dec 13 '14 21:12 Landish

Jan 14 '15 13:01 mikemix

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

Jan 26 '15 13:01 tiborsaas

Jan 27 '15 16:01 cspeer

Feb 06 '15 01:02 sos0

Feb 11 '15 10:02 nyaaao

Feb 18 '15 02:02 francodgstn

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?