Dropify override your input files with style.
Use class .dropify
.
<div class="col">
<input type="file" id="input-file-now" class="dropify" />
</div>
<!-- Dropify JavaScript -->
<script src="vendors/dropify/dist/js/dropify.min.js"></script>
$('.dropify').dropify({
messages: {
'default': 'Upload a high quality image to Make your blog post inviting',
'replace': 'Drag and drop or click to replace',
'remove': 'Remove',
'error': 'Ooops, something wrong happended.'
},
tpl: {
message:' ',
}
});
Use the .dropify-square,.dropify-circle
with parent class of dropify.
<div class="col-sm-2">
<div class="dropify-circle">
<input type="file" class="dropify-1"/>
</div>
</div>
<div class="col-sm-2">
<div class="dropify-square">
<input type="file" class="dropify-1"/>
</div>
</div>
$('.dropify-1').dropify({
messages: {
'default': 'Upload Photo',
},
tpl: {
message:'
',
}
});
You can set preloaded image using.data-default-file="dist/.."
<div class="dropify-circle edit-img">
<input type="file" class="dropify-1" data-default-file="dist/img/avatar1.jpg"/>
</div>
$('.dropify-1').dropify({
messages: {
'default': 'Upload Photo',
},
tpl: {
message:'
',
}
});