Adding image size front-end check.

File with size 1mb or less can be added.

ECOM-7469

course_discovery/apps/publisher/forms.py

@@ -133,7 +133,7 @@ class CustomCourseForm(CourseForm):
     class Meta(CourseForm.Meta):
         model = Course
         widgets = {
-            'image': ClearableImageInput()
+            'image': ClearableImageInput(attrs={'accept': 'image/*'})
         }
         fields = (
             'title', 'number', 'short_description', 'full_description',

course_discovery/conf/locale/en/LC_MESSAGES/django.po

@@ -7,7 +7,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2017-03-15 18:26+0500\n"
+"POT-Creation-Date: 2017-03-20 12:29+0500\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"

course_discovery/conf/locale/en/LC_MESSAGES/djangojs.po

@@ -7,7 +7,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2017-03-15 18:26+0500\n"
+"POT-Creation-Date: 2017-03-20 12:29+0500\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -28,6 +28,10 @@ msgstr ""
 msgid "Show changes"
 msgstr ""
 
+#: static/js/publisher/image-validation.js
+msgid "The image file size cannot exceed 1 MB."
+msgstr ""
+
 #: static/js/publisher/publisher.js
 msgid "Something went wrong!"
 msgstr ""

course_discovery/conf/locale/eo/LC_MESSAGES/django.po

@@ -7,7 +7,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2017-03-15 18:26+0500\n"
+"POT-Creation-Date: 2017-03-20 12:29+0500\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"

course_discovery/conf/locale/eo/LC_MESSAGES/djangojs.po

@@ -7,7 +7,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2017-03-15 18:26+0500\n"
+"POT-Creation-Date: 2017-03-20 12:29+0500\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -29,6 +29,12 @@ msgstr "Hïdé çhängés Ⱡ'σяєм ιρѕυм ∂σłσя ѕ#"
 msgid "Show changes"
 msgstr "Shöw çhängés Ⱡ'σяєм ιρѕυм ∂σłσя ѕ#"
 
+#: static/js/publisher/image-validation.js
+msgid "The image file size cannot exceed 1 MB."
+msgstr ""
+"Thé ïmägé fïlé sïzé çännöt éxçééd 1 MB. Ⱡ'σяєм ιρѕυм ∂σłσя ѕιт αмєт, "
+"¢σηѕє¢тєтυя#"
+
 #: static/js/publisher/publisher.js
 msgid "Something went wrong!"
 msgstr "Söméthïng wént wröng! Ⱡ'σяєм ιρѕυм ∂σłσя ѕιт αмєт, #"

course_discovery/static/js/publisher/image-validation.js

+$(function () {
+    $('#id_image').on('change', function () {
+        // max size limit is 1 MB
+        var maxFileSize = 1000000;
+
+        if (this.files && this.files[0]) {
+            if (this.files[0].size > maxFileSize) {
+               $('.image-error').append(gettext('The image file size cannot exceed 1 MB.'));
+                $('#id_image').val("");
+            } else {
+                $('.image-error').empty();
+            }
+        }
+    });
+});

course_discovery/static/sass/publisher/forms.scss

@@ -28,3 +28,7 @@ select {
     }
   }
 }
+
+.image-error {
+  color: red;
+}

course_discovery/templates/publisher/add_update_course_form.html

@@ -479,7 +479,11 @@
                         </div>
                         <div class="col col-6">
                             <label class="field-label ">{{ course_form.image.label_tag }}</label>
-                            <div class="course-image-field">{{ course_form.image }}</div>
+                            <div class="course-image-field">
+                                {{ course_form.image }}
+                                {{ course_form.image.errors }}
+                                <div class="image-error"></div>
+                            </div>
                         </div>
                     </div>
 
@@ -657,6 +661,7 @@
      <script src="{% static 'js/publisher/course-tabs.js' %}"></script>
      <script src="{% static 'js/publisher/organizations.js' %}"></script>
      <script src="{% static 'js/publisher/seat-type-change.js' %}"></script>
+     <script src="{% static 'js/publisher/image-validation.js' %}"></script>
 {% endblock %}
 
 {% block js_without_compress %}

course_discovery/templates/publisher/course_edit_form.html

@@ -289,6 +289,7 @@
                                         <div class="course-image-field">
                                             {{ form.image }}
                                             {{ form.image.errors }}
+                                            <div class="image-error"></div>
                                         </div>
                                     </div>
                                 </div>
@@ -404,4 +405,5 @@
     <script src="{% static 'js/publisher/publisher.js' %}"></script>
     <script src="{% static 'js/publisher/course-tabs.js' %}"></script>
     <script src="{% static 'js/publisher/organizations.js' %}"></script>
+    <script src="{% static 'js/publisher/image-validation.js' %}"></script>
 {% endblock %}