[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]

👍

[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

[fx]

@hmaesta no worries, nobody's demanding anything. Just poking a little fun at the age of this one and keeping it alive :)

[jafarpagerjaya]

I hope these give you a little hint guys https://jsfiddle.net/09hp81dd/6/

[Anachron]

@jafarpagerjaya but that has nothing to do with File Input Styles? Doh.

[hmaesta]

@Anachron Yes, it does. Mouseover image and click the button.

It is a good contribution, thank you @jafarpagerjaya.

[Anachron]

Oh wow, that's very hidden! Just a bit non-fitting to the rest of Semantic UI!

[agamm]

Sorry if this is rude, but is this still headed to be added in the near future?

[GuacheSuede]

#6109

[laurentlahmy]

For those using React:

Seems to be less of a headache (and no jQuery) this way:
https://stackoverflow.com/questions/37457128/react-open-file-browser-on-click-a-div

quoting:

Add the ref attribute to your input:

<input type="file" id="file" ref="fileUploader" style={{display: "none"}}/>
Change the handleClick function:

handleClick(e) {
    this.refs.fileUploader.click();
}

[austingayler]

I'm using react-semantic-ui, and I had to do this.upload.inputRef.click() (where upload is the ref)

[subramaniyanan176]

I am also looking for the same for using in angular..

[brunotourinho]

I have worked around this issue this way:

<div class="field six wide">
    <label>File</label>
    <div class="ui action input">
	<input type="text" readonly>
	<input type="file" name="File" style="display: none!important;" />
	<div class="ui icon button">
	    <i class="cloud upload alternate icon"></i>
	</div>
    </div>
</div>

then in JS

$('input:text, .ui.button', '.ui.action.input').on('click', function (e) {
    $('input:file', $(e.target).parents()).click();
});

$('input:file', '.ui.action.input').on('change', function (e) {
    var name = e.target.files[0].name;
    $('input:text', $(e.target).parent()).val(name);
});

[subramaniyanan176]

thanks a lot. let me try this

[pptom]

it's been 5 years...

[omairvaiyani]

😞

[michaelmarziani]

+1 Using Semantic UI with React and really enjoying it. File uploads are an important feature and would love to have these styled like the rest of Semantic UI.

[WilliamChou06]

+1 Semantic UI is a very beautiful framework and would definitely be even better having file uploads styled!

[rizqtino]

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

im sorry im still confused with this

[DennisLoska]

Well it's been 6 years^^

[omairvaiyani]

@DennisLoska This project is currently in hiatus with all development taking place over at Fomantic UI

[DennisLoska]

@omairvaiyani Thanks for the info. They don't have a file uploader component yet, but at least the last comment was like two weeks ago fomantic/Fomantic-UI#105

[kdssoftware]

It's now 2021, this issue was created on 2013...

[Anachron]

Then go & implement it yourself?
There is Fomatic UI, too, where you can help out.