Dropify
Dropify documents
Override your input files with style
More about Summernote documents http://jeremyfagis.github.io/dropify/
<!-- dropify: css file -->
<link rel="stylesheet" href="../node_modules/dropify/dist/css/dropify.min.css">
<!-- dropify: HTML -->
<div class="card">
<div class="card-body">
<input type="file" class="dropify" data-height="200" />
</div>
</div>
<!-- dropify: js file -->
<script src="../node_modules/dropify/dist/js/dropify.min.js"></script>
<!-- dropify: page js file -->
<script>
$('.dropify').dropify({
messages: {
'default': 'Drag and drop a file here or click',
'replace': 'Drag and drop or click to replace',
'remove': 'Remove',
'error': 'Ooops, something wrong happended.'
}
});
</script>height Set the height of your dropify element. For exemple you want 100px height, you have to add the attribute data-height="100" on your DOM element.
maxFileSize Set the max filesize of the uploaded document. An error will be display if the file size is bigger than the option. You can use unit like K, M and G.
disabled You can disable the input if you add the attr disabled="disabled".
showRemove You can hide the remove button if you add the attr data-show-remove="false". Default: true.
allowedFormats You can allow/deny pictures formats. If you add the attr data-allowed-formats="portrait square" only portrait and square picture will be allowed. Default: ['portrait', 'square', 'landscape'].
allowedFileExtensions You can allow only some file extensions. If you add the attr data-allowed-file-extensions="pdf png psd" only PDF, PNG and PSD files will be allowed. By default, everything is allowed. Default: ['*'].
maxFileSizePreview Set the max filesize of the previewed document (if it's an image). If the file size is bigger than the option, it will be only the file icon and disabled the preview. You can use unit like K, M and G.