An example to show how you can use the plugin to manage an user profile picture upload (or an avatar). This is achieved with a simple form based upload scenario. The example shows how you can set a default user profile picture (or a previously saved picture) using defaultPreviewContent. Next, you can show a quick avatar upload widget by setting showCaption to false. The main1 layout is thus disabled and main2 layout is used. The close button for preview can be hidden by setting showClose to false. You can then tweak other labels and CSS class properties. You can also add your own custom buttons to the layoutTemplates.main2 template for managing the picture. A custom error container identifier can be set to display your file validation errors.
Not seeing the updated content on this page! Hard refresh your browser to clean cache for this page (e.g. SHIFT-F5 on Windows Chrome)
<!-- some CSS styling changes and overrides -->
<style>
.kv-avatar .krajee-default.file-preview-frame,.kv-avatar .krajee-default.file-preview-frame:hover {
margin: 0;
padding: 0;
border: none;
box-shadow: none;
text-align: center;
}
.kv-avatar {
display: inline-block;
}
.kv-avatar .file-input {
display: table-cell;
width: 213px;
}
.kv-reqd {
color: red;
font-family: monospace;
font-weight: normal;
}
</style>
<!-- markup -->
<!-- note: your server code `/site/avatar_upload/1` will receive `$_FILES['avatar-1']` on form submission -->
<!-- the avatar markup -->
<form class="form form-vertical" action="/site/avatar-upload/1" method="post" enctype="multipart/form-data">
<div class="row">
<div class="col-sm-4 text-center">
<div class="kv-avatar">
<div class="file-loading">
<input id="avatar-1" name="avatar-1" type="file" required>
</div>
</div>
<div class="kv-avatar-hint">
<small>Select file < 1500 KB</small>
</div>
</div>
<div class="col-sm-8">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="email">Email Address<span class="kv-reqd">*</span></label>
<input type="email" class="form-control" name="email" required>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="pwd">Password<span class="kv-reqd">*</span></label>
<input type="password" class="form-control" name="pwd" required>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="fname">First Name</label>
<input type="text" class="form-control" name="fname" required>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="lname">Last Name</label>
<input type="text" class="form-control" name="lname" required>
</div>
</div>
</div>
<div class="form-group">
<hr>
<div class="text-right">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
</form>
<div id="kv-avatar-errors-1" class="text-center" style="display:none"></div>
<!-- the fileinput plugin initialization -->
<script>
var btnCust = '<button type="button" class="btn btn-secondary" title="Add picture tags" ' +
'onclick="alert(\'Call your custom code here.\')">' +
'<i class="bi-tag"></i>' +
'</button>';
$("#avatar-1").fileinput({
overwriteInitial: true,
maxFileSize: 1500,
showClose: false,
showCaption: false,
browseLabel: '',
removeLabel: '',
browseIcon: '<i class="bi-folder2-open"></i>',
removeIcon: '<i class="bi-x-lg"></i>',
removeTitle: 'Cancel or reset changes',
elErrorContainer: '#kv-avatar-errors-1',
msgErrorClass: 'alert alert-block alert-danger',
defaultPreviewContent: '<img src="/samples/default-avatar-male.png" alt="Your Avatar">',
layoutTemplates: {main2: '{preview} ' + btnCust + ' {remove} {browse}'},
allowedFileExtensions: ["jpg", "png", "gif"]
});
</script>
false and enabling the file selection by clicking the file preview zone (via browseOnZoneClick). For an example of CLICK TO SELECT for ajax uploads, view the ajax upload scenario # 12. The demo includes a form submit button to test the form submission. But submission of form data to the server has not been enabled for this demo. <!-- some CSS styling changes and overrides -->
<style>
.kv-avatar .krajee-default.file-preview-frame,.kv-avatar .krajee-default.file-preview-frame:hover {
margin: 0;
padding: 0;
border: none;
box-shadow: none;
text-align: center;
}
.kv-avatar {
display: inline-block;
}
.kv-avatar .file-input {
display: table-cell;
width: 213px;
}
.kv-reqd {
color: red;
font-family: monospace;
font-weight: normal;
}
</style>
<!-- markup -->
<!-- note: your server code `/site/avatar_upload/2` will receive `$_FILES['avatar-2']` on form submission -->
<!-- the avatar markup -->
<div id="kv-avatar-errors-2" class="center-block" style="width:800px;display:none"></div>
<form class="form form-vertical" action="/site/avatar-upload/2" method="post" enctype="multipart/form-data">
<div class="row">
<div class="col-sm-4 text-center">
<div class="kv-avatar">
<div class="file-loading">
<input id="avatar-2" name="avatar-2" type="file" required>
</div>
</div>
<div class="kv-avatar-hint">
<small>Select file < 1500 KB</small>
</div>
</div>
<div class="col-sm-8">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="email">Email Address<span class="kv-reqd">*</span></label>
<input type="email" class="form-control" name="email" required>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="pwd">Password<span class="kv-reqd">*</span></label>
<input type="password" class="form-control" name="pwd" required>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="fname">First Name</label>
<input type="text" class="form-control" name="fname" required>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="lname">Last Name</label>
<input type="text" class="form-control" name="lname" required>
</div>
</div>
</div>
<div class="form-group">
<hr>
<div class="text-right">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
</form>
<!-- the fileinput plugin initialization -->
<script>
var btnCust = '<button type="button" class="btn btn-secondary" title="Add picture tags" ' +
'onclick="alert(\'Call your custom code here.\')">' +
'<i class="bi-tag"></i>' +
'</button>';
$("#avatar-2").fileinput({
overwriteInitial: true,
maxFileSize: 1500,
showClose: false,
showCaption: false,
showBrowse: false,
browseOnZoneClick: true,
removeLabel: '',
removeIcon: '<i class="bi-x-lg"></i>',
removeTitle: 'Cancel or reset changes',
elErrorContainer: '#kv-avatar-errors-2',
msgErrorClass: 'alert alert-block alert-danger',
defaultPreviewContent: '<img src="/samples/default-avatar-male.png" alt="Your Avatar"><h6 class="text-muted">Click to select</h6>',
layoutTemplates: {main2: '{preview} ' + btnCust + ' {remove} {browse}'},
allowedFileExtensions: ["jpg", "png", "gif"]
});
</script>
Comments & Discussion
Note
You can now visit the Krajee Webtips Q & A forum for searching OR asking questions OR helping programmers with answers on these extensions and plugins. For asking a question click here. Select the appropriate question category (i.e. Krajee Plugins) and choose this current page plugin in the question related to field.
The comments and discussion section below are intended for generic discussions or feedback for this plugin. Developers may not be able to search or lookup here specific questions or tips on usage for this plugin.