Commit 04e01476 by Anton Sudak

Fix image upload

parent 4953530d
......@@ -29,7 +29,9 @@
'placeholder -> ""
) { (id, name, value, args) =>
<input type="text" id="@id" name="@name" value="@value" @toHtmlArgs(args) style="width: @{width}px;display:inline;" />
<a class="btn btn-primary image-upload" href="#"> Browse </a>
<button type="button" class="btn btn-primary image-upload" data-field="#@id">
Browse
</button>
@if(helperText != null){
<span class="help-block">@helperText</span>
}
......
@import play.api.i18n.Messages;
@import play.api.i18n.Messages
@import ch.insign.cms.controllers
@import views.html.helper.form
<div id="image-upload-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
......@@ -14,15 +15,22 @@
<!-- loader.gif -->
<img style="display:none" id="image-upload-loader" src="@ch.insign.cms.views.html.tags._asset("frontend/img/loader.gif")" alt="Loading...." title="Loading...." />
<!-- simple file uploading form -->
<form id="image-upload-form" action="@controllers.routes.ImageUploadController.imageUpload()" method="post" enctype="multipart/form-data">
@form(controllers.routes.ImageUploadController.imageUpload(), 'id -> "image-upload-form", 'enctype -> "multipart/form-data") {
<input id="uploadImage" style="display:none;" type="file" accept="image/*" name="userfile" />
<label for="uploadImage" class="btn btn-primary"><i class="glyphicon glyphicon-plus"></i> @Messages("block.modal.imageUpload.title.selettFile")</label>
</form>
<label for="uploadImage" class="btn btn-primary">
<i class="glyphicon glyphicon-plus"></i> @Messages("block.modal.imageUpload.title.selettFile")
</label>
}
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn default" data-dismiss="modal" aria-hidden="true">@Messages("modal.cancel.btn")</button>
<a href="#" class="btn btn-primary disabled" id="confirmUpload" >@Messages("block.modal.imageUpload.confirmBtn")</a>
<button type="button" class="btn default" data-dismiss="modal" aria-hidden="true">
@Messages("modal.cancel.btn")
</button>
<button type="button" class="btn btn-primary disabled" id="confirmUpload">
@Messages("block.modal.imageUpload.confirmBtn")
</button>
</div>
</div>
</div>
......@@ -11,8 +11,10 @@
'placeholder -> ""
) { (id, name, value, args) =>
<input type="text" id="@id" name="@name" value="@value" @toHtmlArgs(args) style="width: @{width}px;display:inline;" />
<a class="btn btn-primary image-upload" href="#"> Browse </a>
@if(helperText != null){
<button type="button" class="btn btn-primary image-upload" data-field="#@id">
Browse
</button>
@if(helperText != null) {
<span class="help-block">@helperText</span>
}
}
jQuery(document).ready(function($) {
$(function() {
var $form = $('#image-upload-form');
var $loader = $('#image-upload-loader'); // loder.gif image
var $confirmButton = $('#confirmUpload');
var $previewArea = $('#image-upload-modal .preview'); // preview area
$('.image-upload').click(function(e){
e.preventDefault();
$('.image-upload').click(function() {
$previewArea.html('');
$confirmButton.addClass('disabled');
$confirmButton.data('inputId', $('form').find('input[name="image"]').attr('id'));
$confirmButton.data('inputId', $(this).data("field"));
$('#image-upload-modal').modal('show');
});
......@@ -24,7 +23,7 @@ jQuery(document).ready(function($) {
$loader.hide();
$form.resetForm();
$confirmButton.removeClass('disabled');
$previewArea.html( '<img src="' + e.filename + '">' ).fadeIn();
$previewArea.html('<img src="' + e.filename + '">').fadeIn();
$confirmButton.data('filename', e.filename);
},
error: function(e){
......@@ -34,9 +33,9 @@ jQuery(document).ready(function($) {
$form.submit();
});
$('#confirmUpload' ).click(function() {
var imputId = $confirmButton.data('inputId');
$('#'+imputId).val($confirmButton.data('filename'));
$('#confirmUpload').click(function() {
var inputId = $confirmButton.data('inputId');
$(inputId).val($confirmButton.data('filename'));
$('#image-upload-modal').modal('hide');
});
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment