adding js check for image type for front end submission form

adding js check for image type and optimal image message on the front end submission
form

diff --git a/css/front.css b/css/front.css
index 13b9c13..aacd7fd 100644 (file)
--- a/css/front.css
+++ b/css/front.css
@@ -501,3 +501,10 @@ label.date-toggle-label{
 #glmRealEmail {
     display: none;
 }
+.glm-front-event-image-text{
+    line-height: 1;
+    font-size: 14px;
+}
+#glm-front-event-image{
+    margin: 20px 0;
+}
\ No newline at end of file

diff --git a/views/front/events/frontAdd.html b/views/front/events/frontAdd.html
index 257bdef..f60a4d7 100644 (file)
--- a/views/front/events/frontAdd.html
+++ b/views/front/events/frontAdd.html
@@ -256,9 +256,11 @@
                 {if $event.fieldFail.descr}<p>{$event.fieldFail.descr}</p>{/if}
             </div>
         </div>
-        <div class="glm-add-event-form-item">
+        <div class="glm-add-event-form-item" id="glm-front-event-image">
+            
             <div class="glm-add-event-form-label{if $event.fieldRequired.image} glm-required{/if}"><label>Image:</label></div>
             <div class="glm-add-event-form-data{if $event.fieldFail.image} glm-form-bad-input{/if}">
+                
                 <table class="glm-admin-image-edit-table">
                     {if $event.fieldData.image}
                         <div>
@@ -271,11 +273,14 @@
                                 <input type="checkbox" name="image_delete"> Delete Image<br>
                                 {$event.fieldData.image}<br>
                             </div>
+                            
                         </div>
                     {/if}
-                    <div><div colspan="2"><b>New image:</b> <input type="file" name="image_new"></div></div>
+                    <div><div colspan="2"><b>New image:</b> <input type="file" name="image_new" class="glm-event-front-end-image"></div></div>
                 </table>
+                <p class="glm-front-event-image-text">Best image size to provide is between 800 and 1000 pixels wide and stored as a JPG or JPEG file. Also try to supply images that have a reasonable aspect ratio (not too tall, not too wide). Files provided like this should have a file size of 100 to 250 KB. Images will be automatically resized for use in the Web site. Images that are too large will be rejected</p>
             </div>
+            
         </div>
         {if $memberOnly}
             <div class="glm-add-event-form-item">
@@ -484,7 +489,21 @@ jQuery(document).ready(function($) {
             $('#' + msgArea).html('Characters remaining: ' + rem);
         }
     }
-
+    
+    // check image upload type
+    $(".glm-event-front-end-image").change(function () {
+        var ext = this.value.match(/\.(.+)$/)[1];
+        switch (ext) {
+            case 'jpg':
+            case 'jpeg':
+            case 'png':
+            case 'gif':
+                break;
+            default:
+                alert('This is not an allowed file type');
+                this.value = '';
+        }
+    });
 });
 </script>
 {if $settings.use_venue_locations}