WIP : Upload management (upload+save+delete done) need to finish integration and add all image fields
This commit is contained in:
gmorel
67
templates/admin/default/assets/js/image-upload.js
Normal file
67
templates/admin/default/assets/js/image-upload.js
Normal file
@@ -0,0 +1,67 @@
|
||||
// Manage picture upload
|
||||
$(function($){
|
||||
|
||||
var pictureUploadManager = {};
|
||||
|
||||
// Set selected image as preview
|
||||
pictureUploadManager.onChangePreviewPicture = function() {
|
||||
$('#images input:file').on('change', function () {
|
||||
var $this = $(this);
|
||||
if ($this.prop("files") && $this.prop("files")[0]) {
|
||||
var reader = new FileReader();
|
||||
|
||||
reader.onload = function (e) {
|
||||
$this.parent()
|
||||
.find('img.preview')
|
||||
.attr('src', e.target.result)
|
||||
.width(150)
|
||||
.height(200);
|
||||
}
|
||||
|
||||
reader.readAsDataURL($this.prop("files")[0]);
|
||||
}
|
||||
});
|
||||
};
|
||||
pictureUploadManager.onChangePreviewPicture();
|
||||
|
||||
// Remove image on click
|
||||
pictureUploadManager.onClickDeleteImage = function() {
|
||||
$('.image-manager .image-delete-btn').on('click', function (e) {
|
||||
console.log('deletingImage');
|
||||
e.preventDefault();
|
||||
var $this = $(this);
|
||||
$this.parent().append('<div class="loading" ></div>');
|
||||
var $url = $this.attr("href");
|
||||
var errorMessage = $this.attr("data-error-message");
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: $url,
|
||||
statusCode: {
|
||||
404: function() {
|
||||
$(".image-manager .message").html(
|
||||
errorMessage
|
||||
);
|
||||
}
|
||||
}
|
||||
}).done(function(data) {
|
||||
$this.parent().remove();
|
||||
$(".image-manager .message").html(
|
||||
data
|
||||
);
|
||||
});
|
||||
});
|
||||
};
|
||||
pictureUploadManager.onClickDeleteImage();
|
||||
|
||||
// Remove image on click
|
||||
pictureUploadManager.clonePictureInputs = function() {
|
||||
var $inputs = $(".image-manager .picture-input");
|
||||
if ($inputs.size == 1) {
|
||||
console.log('1');
|
||||
$(".image-manager .picture-input").last().show();
|
||||
} else {
|
||||
console.log('+d1');
|
||||
$(".image-manager .picture-input").last().clone().appendTo(".image-manager .pictures-input");
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -246,31 +246,7 @@
|
||||
</div>
|
||||
|
||||
<div class="tab-pane fade" id="images">
|
||||
image
|
||||
{form name="thelia.admin.category.picture.creation"}
|
||||
<form id="related_picture_form" method="POST" {form_enctype form=$form} action="#">
|
||||
{form_hidden_fields form=$form}
|
||||
|
||||
|
||||
{form_field form=$form field='title'}
|
||||
<div class="form-group {if $error}has-error{/if}">
|
||||
<label for="title" class="control-label" >{intl l='Title :'}</label>
|
||||
<input id="title" class="form-control" type="text" name="{$name}" value="{$value}" placeholder="{intl l='title'}">
|
||||
{if $error}{$message}{/if}
|
||||
</div>
|
||||
{/form_field}
|
||||
|
||||
{form_field form=$form field='file'}
|
||||
<div class="form-group {if $error}has-error{/if}">
|
||||
<label for="file" class="control-label" >{intl l='Picture :'}</label>
|
||||
<input id="file" class="form-control" type="file" name="{$name}" value="{$value}" placeholder="{intl l='file'}">
|
||||
{if $error}{$message}{/if}
|
||||
</div>
|
||||
{/form_field}
|
||||
|
||||
<input type="submit" value="submit"/>
|
||||
</form>
|
||||
{/form}
|
||||
{include file='includes/image-upload-form.html' formName="thelia.admin.category.image.creation" formSuccessUrl={url path="/admin/categories/update?category_id=$category_id"} imageType='category' parentId=$category_id}
|
||||
</div>
|
||||
|
||||
<div class="tab-pane fade" id="documents">
|
||||
@@ -311,6 +287,9 @@
|
||||
{/block}
|
||||
|
||||
{block name="javascript-initialization"}
|
||||
{javascripts file='assets/js/image-upload.js'}
|
||||
<script src="{$asset_url}"></script>
|
||||
{/javascripts}
|
||||
<script>
|
||||
|
||||
$(function() {
|
||||
|
||||
80
templates/admin/default/includes/image-upload-form.html
Normal file
80
templates/admin/default/includes/image-upload-form.html
Normal file
@@ -0,0 +1,80 @@
|
||||
<div class="image-manager" >
|
||||
<div class="message" >{$imageMessage}</div>
|
||||
<div class="existing-image">
|
||||
{loop type="image" name="image_test" source="{$imageType}" source_id="{$parentId}" width="200" height="100" resize_mode="borders"}
|
||||
<div>
|
||||
<img src="{$IMAGE_URL}" alt="{$TITLE}" />
|
||||
<a class="image-delete-btn" href="{url path="/admin/image/type/$imageType/delete/$ID"}" data-error-message="{intl l='Please retry'}">
|
||||
{intl l='Delete'}
|
||||
</a>
|
||||
</div>
|
||||
{/loop}
|
||||
</div>
|
||||
|
||||
{form name=$formName}
|
||||
<form id="related_picture_form" method="POST" enctype="multipart/form-data" action="{url path="/admin/image/type/$imageType/$parentId/save"}" runat="server">
|
||||
|
||||
<div>flashMessage = {flashMessage key="imageMessage"}{$value}{/flashMessage}</div>
|
||||
{form_hidden_fields form=$form}
|
||||
|
||||
{*{form_field form=$form field='locale'}*}
|
||||
{*<input type="hidden" name="{$name}" value="{if $value}{$value}{else}{$edit_language_locale}{/if}" />*}
|
||||
{*{/form_field}*}
|
||||
|
||||
{form_field form=$form field='success_url'}
|
||||
<input type="hidden" name="{$name}" value="{$formSuccessUrl}" />
|
||||
{/form_field}
|
||||
|
||||
{form_field form=$form field='pictures'}
|
||||
<div class="pictures-input form-group {if $error}has-error{/if}">
|
||||
{*$value={$value|var_dump}*}
|
||||
{*$error={$error|var_dump}*}
|
||||
{*$message={$message|var_dump}*}
|
||||
{*img0={$value.0|var_dump}*}
|
||||
{*img0={$value.0->getFile()}*}
|
||||
{*img1={$value[1]->getFile()}*}
|
||||
<div class="picture-input hide">
|
||||
<label for="pictures" class="control-label" >{intl l='Pictures 1 :'}</label>
|
||||
{*{form_field form=$form field='pictures.0.title'}*}
|
||||
{*$name={$name|var_dump}*}
|
||||
<input class="form-control" type="text" name="{$name}[0][title]" value="{$value}" placeholder="{intl l='picture name'}">
|
||||
{*{/form_field}*}
|
||||
{*{form_field form=$form field='pictures.0.file'}*}
|
||||
{*$name={$name|var_dump}*}
|
||||
<input class="form-control" type="file" name="{$name}[0][file]" value="{$value}" >
|
||||
{*{/form_field}*}
|
||||
<img class="preview" src="#" width="200" height="100" alt="Your image"/>
|
||||
</div>
|
||||
{*<div class="picture-input">*}
|
||||
{*<label for="pictures" class="control-label" >{intl l='Pictures 2 :'}</label>*}
|
||||
{*<input class="form-control" type="text" name="{$name}[1][title]" value="{$value}" placeholder="{intl l='picture name'}">*}
|
||||
{*<input class="form-control" type="file" name="{$name}[1][file]" value="{$value}" >*}
|
||||
{*<img class="preview" src="#" width="200" height="100" alt="Your image"/>*}
|
||||
{*</div>*}
|
||||
{*<div class="picture-input">*}
|
||||
{*<label for="pictures" class="control-label" >{intl l='Pictures 3 :'}</label>*}
|
||||
{*<input class="form-control" type="text" name="{$name}[2][title]" value="{$value}" placeholder="{intl l='picture name'}">*}
|
||||
{*<input class="form-control" type="file" name="{$name}[2][file]" value="{$value}" >*}
|
||||
{*<img class="preview" src="#" width="200" height="100" alt="Your image"/>*}
|
||||
{*</div>*}
|
||||
{*<div class="picture-input">*}
|
||||
{*<label for="pictures" class="control-label" >{intl l='Pictures 4 :'}</label>*}
|
||||
{*<input class="form-control" type="text" name="{$name}[3][title]" value="{$value}" placeholder="{intl l='picture name'}">*}
|
||||
{*<input class="form-control" type="file" name="{$name}[3][file]" value="{$value}" >*}
|
||||
{*<img class="preview" src="#" width="200" height="100" alt="Your image"/>*}
|
||||
{*</div>*}
|
||||
{*<div class="picture-input">*}
|
||||
{*<label for="pictures" class="control-label" >{intl l='Pictures 5 :'}</label>*}
|
||||
{*<input class="form-control" type="text" name="{$name}[4][title]" value="{$value}" placeholder="{intl l='picture name'}">*}
|
||||
{*<input class="form-control" type="file" name="{$name}[4][file]" value="{$value}" >*}
|
||||
{*<img class="preview" src="#" width="200" height="100" alt="Your image"/>*}
|
||||
{*</div>*}
|
||||
{if $error}{$message}{/if}
|
||||
</div>
|
||||
{/form_field}
|
||||
|
||||
<input type="submit" value="submit"/>
|
||||
</form>
|
||||
{/form}
|
||||
|
||||
</div>
|
||||
Reference in New Issue
Block a user