Merge pull request #2 from we-bridge/add_preview_option

Add an option for the form type to show a preview once uploaded

Author: thomas-barthelemy

Form/LargeFileType.php

@@ -32,6 +32,11 @@ public function setDefaultOptions(OptionsResolverInterface $resolver)
         $resolver->setRequired(array('media'));
         $resolver->setRequired(array('mimeTypesMessage'));
         $resolver->setRequired(array('maxSizeMessage'));
+        $resolver->setOptional(array('previewContainerId'));
+
+        $resolver->setDefaults(array(
+            'previewContainerId' =>''
+        ));
     }
 
     /**
@@ -70,6 +75,7 @@ public function buildView(FormView $view, FormInterface $form, array $options)
         $view->vars['largefile_media'] = $options['media'];
         $view->vars['mimeTypesMessage'] = $options['mimeTypesMessage'];
         $view->vars['maxSizeMessage'] = $options['maxSizeMessage'];
+        $view->vars['previewContainerId'] = $options['previewContainerId'];
     }
 
     public function getName()

Resources/public/js/largefile.js

@@ -15,7 +15,6 @@ var LargeFile = (function() {
             uploadProgress(this, progress);
         },
         error: function(e, data) {
-            console.log('error');
             var inputField = document.getElementById(this.fileInput[0].id);
             uploadFinished(inputField, false);
         },
@@ -39,6 +38,8 @@ var LargeFile = (function() {
             inputField.removeAttribute('required');                
             uploadFinished(inputField, true);
 
+            //show preview of loaded item
+            showPreview(inputField, files.files[0].url);
         }
         });
     };
@@ -102,6 +103,21 @@ var LargeFile = (function() {
         );
     };
 
+    var showPreview = function (inputField, url) {
+        if (inputField.hasAttribute('data-previewcontainer') &&
+            inputField.getAttribute('data-previewcontainer') != ''
+        ) {
+            var container = document.getElementById(
+                inputField.getAttribute('data-previewcontainer')
+            );
+            container.src = '/' + url;
+
+            if (container.load) {
+                container.load();
+            }
+        }
+    };
+
     return {
         setup: setup
     };

Resources/views/Form/largefile.html.twig

@@ -20,7 +20,8 @@
                     'data-largefile-field': largefile_field,
                     'data-mimeTypesMessage': mimeTypesMessage,
                     'data-maxSizeMessage': maxSizeMessage,
-                    'data-url': oneup_uploader_endpoint(largefile_media)
+                    'data-url': oneup_uploader_endpoint(largefile_media),
+                    'data-previewcontainer': previewContainerId
                 }}
            ) 
         }}