Dropzone - HTML

gistfile1.html

<div class="form-group">
    <label  class="col-md-12  text-capitalize" translate >general.image</label>
    <div class="col-md-6">
        <div class="" ng-show="image == null">
            <label class="label-dropzone" >
            <input
                type="file"
                file-dropzone="[image/png, image/jpeg, image/gif]"
                file="AddCtrl.item.image"
                file-name="imageFileName"
                max-file-size="5"
            />
            <div class="dropzone-overlay">
                <div >
                    <span translate ng-if="AddCtrl.item.image">general.drop_click_img_change</span>
                    <span translate ng-if="!AddCtrl.item.image">general.drop_click_img_add</span>
                    <img class="img-responsive"   ng-src={{AddCtrl.item.image}} />
                </div>
            </div>
        </div>
    </div>
</div>

<style type="less">
    

.label-dropzone{
    display: block;
    width:100%; 
    position:relative; 
    height:250px;
    cursor: pointer;

    input{
        .opacity(0);
    }

    .dropzone-overlay{
        position:absolute; 
        width:100%; 
        z-index:10; 
        height:100%; 
        display:table; 
        top:0; 
        
        text-align:center; 
        
        padding: 5px; 
        border: 2px dashed lightgray; 
        background: lighten(lightgray, 15%); 

        border-radius: @border-radius-base;

        div{
            display:table-cell; 
            vertical-align:middle;

            img{
                max-height:200px; 
                margin:0 auto;
            }
        }
    }
}
    
</style>