//Starting Uploader helper

This commit is contained in:
Jerome Nadaud
2013-10-25 14:19:51 +02:00
parent 139ee8f62d
commit 52795495bd
15 changed files with 3521 additions and 58 deletions
@@ -456,56 +456,6 @@
</label>
</div>
{/foreach}
{elseif $input.type == 'file'}
{if isset($input.display_image) && $input.display_image}
{if isset($fields_value[$input.name].image) && $fields_value[$input.name].image}
<div id="image">
{$fields_value[$input.name].image}
<p>{l s='File size'} {$fields_value[$input.name].size}kb</p>
<a class="btn btn-default" href="{$current}&{$identifier}={$form_id}&token={$token}&deleteImage=1">
<i class="icon-trash"></i> {l s='Delete'}
</a>
</div>
{/if}
{/if}
{if isset($input['thumb']) && $input['thumb']}
<div class="row">
<div class="col-lg-7">
<img src="{$input['thumb']}" alt="{$input['name']}" title="{$input['name']}" />
<br/><br/>
</div>
</div>
{/if}
<div class="row">
<div class="col-lg-7">
<input id="{$input.name}" type="file" name="{$input.name}" class="hide" />
<div class="dummyfile input-group">
<span class="input-group-addon"><i class="icon-file"></i></span>
<input id="{$input.name}-name" type="text" class="disabled" name="filename" readonly />
<span class="input-group-btn">
<button id="{$input.name}-selectbutton" type="button" name="submitAddAttachments" class="btn btn-default">
<i class="icon-folder-open"></i> {l s='Choose a file'}
</button>
</span>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('#{$input.name}-selectbutton').click(function(e){
$('#{$input.name}').trigger('click');
});
$('#{$input.name}-name').click(function(e){
$('#{$input.name}').trigger('click');
});
$('#{$input.name}').change(function(e){
var val = $(this).val();
var file = val.split(/[\\/]/);
$('#{$input.name}-name').val(file[file.length-1]);
});
});
</script>
{elseif $input.type == 'password'}
<input type="password"
id="{if isset($input.id)}{$input.id}{else}{$input.name}{/if}"
@@ -554,6 +504,8 @@
{$input.html}
{elseif $input.type == 'categories'}
{$categories_tree}
{elseif $input.type == 'file'}
{$input.file}
{elseif $input.type == 'categories_select'}
{$input.category_tree}
{elseif $input.type == 'asso_shop' && isset($asso_shop) && $asso_shop}
@@ -200,14 +200,7 @@
<textarea class="textarea-autosize" name={$key} cols="{$field['cols']}" rows="{$field['rows']}">{$field['value']|escape:'htmlall':'UTF-8'}</textarea>
</div>
{elseif $field['type'] == 'file'}
{if isset($field['thumb']) && $field['thumb']}
<div class="col-lg-3">
<img src="{$field['thumb']}" alt="{$field['title']}" title="{$field['title']}" />
</div>
{/if}
<div class="col-lg-5">
<input type="file" name="{$key}" />
</div>
<div class="col-lg-9">{$field['file']}</div>
{elseif $field['type'] == 'color'}
<div class="col-lg-2">
<div class="row">
@@ -0,0 +1,126 @@
{*
* 2007-2013 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to license@prestashop.com so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
* @author PrestaShop SA <contact@prestashop.com>
* @copyright 2007-2013 PrestaShop SA
* @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0)
* International Registered Trademark & Property of PrestaShop SA
*}
{if isset($images) && $images}
<div class="form-group">
<div class="col-lg-12">
{foreach $images as $image}
<div class="img-thumbnail text-center">
{$image}
{if isset($size)}<p>{l s='File size'} {$size}kb</p>{/if}
{if isset($delete_url)}
<a class="btn btn-default" href="{$delete_url}">
<i class="icon-trash"></i> {l s='Delete'}
</a>
{/if}
</div>
{/foreach}
</div>
</div>
{/if}
<div class="form-group">
<input id="{$id}" type="file" name="{$name}[]"{if isset($url)} data-url="{$url}"{/if}{if isset($multiple) && $multiple} multiple="multiple"{/if} class="hide" />
<button class="btn btn-default" data-style="expand-right" data-size="s" type="button" id="{$id}-add-button">
<i class="icon-plus-sign"></i> {if isset($multiple) && $multiple}{l s='Add files'}{else}{l s='Add file'}{/if}
</button>
<button class="ladda-button" data-style="expand-right" data-size="s" type="button" id="{$id}-upload-button" style="display:none;">
<i class="icon-cloud-upload"></i> <span class="ladda-label">{if isset($multiple) && $multiple}{l s='Upload files'}{else}{l s='Upload file'}{/if}</span>
</button>
</div>
<div class="row" style="display:none">
<div class="alert alert-info" id="{$id}-files-list">
<strong>{l s='Files:'}</strong>
<br />
</div>
</div>
<div class="row" style="display:none">
<div class="alert alert-danger" id="{$id}-errors"></div>
</div>
<script type="text/javascript">
$( document ).ready(function() {
$('#{$id}-add-button').on('click', function() {
$('#{$id}').trigger('click');
});
var upload_button = Ladda.create( document.querySelector('#{$id}-upload-button' ));
var total_files = 0;
var total_uploaded_files = 0;
$('#{$id}').fileupload({
dataType: 'json',
autoUpload: false,
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
maxFileSize: 5000000, // 5 MB
// Enable image resizing, except for Android and Opera,
// which actually support image resizing, but fail to
// send Blob objects via XHR requests:
disableImageResize: /Android(?!.*Chrome)|Opera/
.test(window.navigator.userAgent),
previewMaxWidth: 100,
previewMaxHeight: 100,
previewCrop: false,
start: function () {
upload_button.start();
},
done: function (e, data) {
$.each(data.result, function (index, file) {
if (file[0].error)
$('#{$id}-errors').append(file[0].error+'<br/>').parent().show();
else
total_uploaded_files ++;
});
if (total_uploaded_files == data.originalFiles.length)
$('#{$id}-upload-button').css('background-color', 'green').children('.icon-cloud-upload').removeClass('icon-cloud-upload').addClass('icon-check');
},
progressall: function (e, data) {
upload_button.setProgress(data.loaded / data.total);
},
add: function (e, data) {
data.context = $('#{$id}-files-list');
data.context.parent().show();
$.each(data.files, function (index, file) {
var node = '<div class="row"><span>'+file.name+'</span><button class="btn btn-default pull-right" type="button"><i class="icon-trash"></i> Remove from list</button></div>';
data.context.append(node);
});
$('#{$id}-upload-button').show().on('click', function () {
total_files = data.originalFiles.length;
data.submit();
});
},
fail: function (e, data) {
$('#{$id}-errors').html(data.errorThrown.message).parent().show();
},
always: function (e, data) {
total_files--;
if (total_files == 0)
upload_button.stop();
}
});
});
</script>
@@ -0,0 +1,35 @@
<?php
/*
* 2007-2013 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Open Software License (OSL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/osl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to license@prestashop.com so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
* @author PrestaShop SA <contact@prestashop.com>
* @copyright 2007-2013 PrestaShop SA
* @license http://opensource.org/licenses/osl-3.0.php Open Software License (OSL 3.0)
* International Registered Trademark & Property of PrestaShop SA
*/
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
header('Last-Modified: '.gmdate('D, d M Y H:i:s').' GMT');
header('Cache-Control: no-store, no-cache, must-revalidate');
header('Cache-Control: post-check=0, pre-check=0', false);
header('Pragma: no-cache');
header('Location: ../../../../../../');
exit;
@@ -0,0 +1,83 @@
{*
* 2007-2013 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to license@prestashop.com so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
* @author PrestaShop SA <contact@prestashop.com>
* @copyright 2007-2013 PrestaShop SA
* @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0)
* International Registered Trademark & Property of PrestaShop SA
*}
{if isset($display_image) && $display_image}
{if isset($image) && $image}
<div class="form-group">
<div class="col-lg-12">
<div class="img-thumbnail text-center">
{$image}
{if isset($size)}<p>{l s='File size'} {$size}kb</p>{/if}
{if isset($delete_url)}
<a class="btn btn-default" href="{$delete_url}">
<i class="icon-trash"></i> {l s='Delete'}
</a>
{/if}
</div>
</div>
</div>
{/if}
{/if}
{if isset($thumb) && $thumb}
<div class="form-group">
<div class="col-lg-12">
<img src="{$thumb}" alt="{$title}" title="{$title}" class="img-thumbnail" />
</div>
</div>
{/if}
<div class="form-group">
<div class="col-lg-12">
<input id="{$id}" type="file" name="{$name}"{if isset($multiple) && $multiple} multiple="multiple"{/if} class="hide" />
<div class="dummyfile input-group">
<span class="input-group-addon"><i class="icon-file"></i></span>
<input id="{$id}-name" type="text" class="disabled" name="filename" readonly />
<span class="input-group-btn">
<button id="{$id}-selectbutton" type="button" name="submitAddAttachments" class="btn btn-default">
<i class="icon-folder-open"></i> {if isset($multiple) && $multiple}{l s='Add files'}{else}{l s='Add file'}{/if}
</button>
</span>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('#{$id}-selectbutton').click(function(e) {
$('#{$id}').trigger('click');
});
$('#{$id}-name').click(function(e) {
$('#{$id}').trigger('click');
});
$('#{$id}').change(function(e) {
var files = $(this)[0].files;
var name = '';
$.each(files, function(index, value) {
name += value.name+', ';
});
$('#{$id}-name').val(name.slice(0, -2));
});
});
</script>