diff --git a/Form/Type/FileAjaxType.php b/Form/Type/FileAjaxType.php
index b2d6a84..a68e88d 100644
--- a/Form/Type/FileAjaxType.php
+++ b/Form/Type/FileAjaxType.php
@@ -25,7 +25,7 @@ class FileAjaxType extends AbstractType
* @var FileHistoryManagerInterface
*/
protected $fileHistoryManager;
-
+
/**
* Constructor
*
@@ -35,7 +35,7 @@ public function __construct(FileHistoryManagerInterface $fileHistoryManager)
{
$this->fileHistoryManager = $fileHistoryManager;
}
-
+
/**
* {@inheritDoc}
*/
@@ -43,22 +43,24 @@ public function setDefaultOptions(OptionsResolverInterface $resolver)
{
// Endpoint mandatory for fileupload bundle
$resolver->setRequired(array('endpoint'));
-
+
$resolver->setOptional(array(
'download_link',
'remove_link',
'loading_file',
- 'resolver_key'
+ 'resolver_key',
+ 'progress'
));
-
+
$resolver->setDefaults(array(
'download_link' => true,
'remove_link' => true,
'loading_file' => 'bundles/jbfileuploader/img/ajax-loader-small.gif',
- 'resolver_key' => 'upload_resolver'
+ 'resolver_key' => 'upload_resolver',
+ 'progress'=>false
));
}
-
+
/**
* {@inheritDoc}
*/
@@ -70,23 +72,24 @@ public function buildView(FormView $view, FormInterface $form, array $options)
$fileHistory = $this->fileHistoryManager->findOneByFileName($form->getData());
$fileHistoryUrl = $this->fileHistoryManager->getUrl($fileHistory, $options['resolver_key']);
}
-
+
$className = 'jb_result_filename';
if (isset($view->vars['attr']['class'])) {
$view->vars['attr']['class'] .= ' ' . $className;
} else {
$view->vars['attr']['class'] = $className;
}
-
+
$view->vars['file_history'] = $fileHistory;
$view->vars['file_history_url'] = $fileHistoryUrl;
$view->vars['endpoint'] = $options['endpoint'];
$view->vars['download_link'] = $options['download_link'];
$view->vars['remove_link'] = $options['remove_link'];
$view->vars['loading_file'] = $options['loading_file'];
+ $view->vars['progress'] = $options['progress'];
$view->vars['use_crop'] = false;
}
-
+
/**
* {@inheritDoc}
*/
@@ -94,7 +97,7 @@ public function getParent()
{
return 'text';
}
-
+
/**
* {@inheritDoc}
*/
diff --git a/Resources/doc/file_upload/simple.md b/Resources/doc/file_upload/simple.md
index 0aea7a4..05ea5a5 100644
--- a/Resources/doc/file_upload/simple.md
+++ b/Resources/doc/file_upload/simple.md
@@ -14,4 +14,5 @@ The available options are :
* endpoint (_mandatory_) : a oneup fileupload mapping name
* download_link (_boolean_) : show the download link when the upload was successful
* remove_link (_boolean_) : show a remove link allowing to empty the field
+* progress (_boolean_) : show a progress bar
diff --git a/Resources/public/css/jbfileupload.css b/Resources/public/css/jbfileupload.css
index 53e140b..9e816f4 100644
--- a/Resources/public/css/jbfileupload.css
+++ b/Resources/public/css/jbfileupload.css
@@ -8,4 +8,17 @@
.fileinput-button:hover a {
text-decoration: underline;
+}
+
+.jb_progressbar {
+ width: 100%;
+ height: 15px;
+ border: 1px solid #111;
+ margin-top: 3px;
+}
+
+.jb_bar {
+ width: 0;
+ background-color: #111;
+ height: 15px;
}
\ No newline at end of file
diff --git a/Resources/public/js/jbfileupload.js b/Resources/public/js/jbfileupload.js
index 02f95fe..52bcd81 100644
--- a/Resources/public/js/jbfileupload.js
+++ b/Resources/public/js/jbfileupload.js
@@ -18,15 +18,16 @@
$cropFilename = $parentTag.find('.jb_crop_filename'),
$previewTag = $parentTag.find('.jb_result_preview'),
$loadingTag = $parentTag.find('.jb_loading'),
+ $progressBar = $parentTag.find('.jb_progressbar'),
naturalWidth, naturalHeight, currentWidth, currentHeight;
/**
- * Translate message
- *
- * @param {string} msg
- *
- * @returns {string}
- */
+ * Translate message
+ *
+ * @param {string} msg
+ *
+ * @returns {string}
+ */
function translateMessage(msg) {
if (typeof Translator !== "undefined") {
return Translator.trans(msg);
@@ -35,11 +36,11 @@
return msg;
}
- /**
- * Toggle the upload field and crop tool
- *
- * @returns {undefined}
- */
+ /**
+ * Toggle the upload field and crop tool
+ *
+ * @returns {undefined}
+ */
function toggleCropingTool() {
$cropUpload.toggle();
$cropTool.toggle();
@@ -49,13 +50,13 @@
$cropHeight.val('');
}
- /**
- * Load the crop tool
- *
- * @param {object} result
- *
- * @returns {undefined}
- */
+ /**
+ * Load the crop tool
+ *
+ * @param {object} result
+ *
+ * @returns {undefined}
+ */
function loadCropingTool(result) {
// Display the crop tool
toggleCropingTool();
@@ -163,6 +164,7 @@
*/
function loadingToggle(e) {
$loadingTag.toggle();
+ $progressBar.toggle();
$previewTag.toggle();
}
@@ -172,7 +174,14 @@
dataType: 'json',
done: fileUploadDone,
error: fileUploadError,
- start: loadingToggle
+ start: loadingToggle,
+ progressall: function (e, data) {
+ var progress = parseInt(data.loaded / data.total * 100, 10);
+ $progressBar.find('.jb_bar').css(
+ 'width',
+ progress + '%'
+ );
+ }
}, options );
// Bind all events
diff --git a/Resources/views/Form/fields.html.twig b/Resources/views/Form/fields.html.twig
index 04d6c72..4450ceb 100644
--- a/Resources/views/Form/fields.html.twig
+++ b/Resources/views/Form/fields.html.twig
@@ -15,11 +15,11 @@ All classes starting with jb_ are part of the markup. They are used in the js co
{{ 'Import a file'|trans({}, translation_domain) }}
+ class="jb_fileupload"
+ type="file"
+ name="{{ id }}_file"
+ data-url="{{ oneup_uploader_endpoint(endpoint) }}"
+ data-use-crop="{{ use_crop ? "true" : "false" }}" />
{% if remove_link %}
|
@@ -38,9 +38,15 @@ All classes starting with jb_ are part of the markup. They are used in the js co
{% endif %}
{% endif %}
{% if loading_generated is not defined %}
-
+ {% if (progress is not defined) or (progress == false)%}
+
+ {% else %}
+
+
+
+ {% endif %}
{% endif %}
{% endblock %}
@@ -54,7 +60,7 @@ All classes starting with jb_ are part of the markup. They are used in the js co
src="{{ previewSrc }}"
data-default="{{ asset(default_image) }}"
{% if img_width is defined %}width="{{ img_width }}"{% endif %}
- {% if img_height is defined %}height="{{ img_height }}"{% endif %} />
+ {% if img_height is defined %}height="{{ img_height }}"{% endif %} />