update file upload untuk preview

opensipkd/base/views/widgets/file_upload.pt

 <tal:block tal:define="oid oid|field.oid;
         css_class css_class|field.widget.css_class;
-        style style|field.widget.style;">
+        style style|field.widget.style;
+        preview_url cstruct.get('preview_url')|cstruct.get('base64')|'';
+        ext str(cstruct.get('filename').split('.')[-1:][0]).lower()|[];">
     ${field.start_mapping()}
-    <img tal:define="preview_url cstruct.get('preview_url');
-            filename cstruct.get('filename')"
-             tal:condition="preview_url" src="${structure: preview_url}"
-    ></img>
+    <tal:block tal:condition="preview_url and ext in ['jpg','jpeg','png','bmp','gif']">
+        <img id="preview-${oid}" alt="" src="${structure: preview_url}" style="width:100px;height:auto;"></img>
+        <br>
+    </tal:block>
+    <tal:block tal:condition="not preview_url or ext not in ['jpg','jpeg','png','bmp','gif']">
+        <img id="preview-${oid}" alt="" src="" style="width:100px;height:auto;"></img>
+        <br>
+    </tal:block>
+    <a id="label-${oid}" tal:condition="preview_url" class="label label-default" href="${structure: preview_url}"
+    target="_blank"><i class="fa fa-search"></i> View</a>
     <input type="file" name="upload" id="${oid}"
              tal:attributes="style style;
                     accept accept|field.widget.accept;
@@ -19,5 +27,13 @@
         deform.addCallback('${oid}', function (oid) {
             $('#' + oid).upload();
         });
+        document.getElementById('${oid}').addEventListener('change', function () {
+            var output = document.getElementById('preview-${oid}');
+            output.src = URL.createObjectURL(this.files[0]);
+            document.getElementById('label-${oid}').remove();
+            output.onload = function() {
+            URL.revokeObjectURL(output.src) // free memory
+            }
+        });
     </script>
 </tal:block>