Added accept attribute on image widget, added alert message when lo…

…aded an invalid image.

oscar/forms/widgets.py

@@ -16,6 +16,7 @@ class ImageInput(FileInput):
     dialog and allow for selecting a new or replacing image file.
     """
     template_name = 'partials/image_input_widget.html'
+    attrs = {'accept': 'image/*'}
 
     def render(self, name, value, attrs=None):
         """

oscar/static/oscar/js/oscar/dashboard.js

@@ -168,7 +168,6 @@ var oscar = (function(o, $) {
                             return function(e) {
                                 var imgDiv = $("#"+imgId);
                                 imgDiv.children('img').attr('src', e.target.result);
-                                imgDiv.children('button').remove();
                             };
                         })();
                         reader.readAsDataURL(evt.target.files[0]);

oscar/templates/oscar/partials/image_input_widget.html

@@ -1,10 +1,14 @@
 {% load i18n %}
 <div id="{{ image_id }}" class="image-input">
-    <img src="{{ image_url }}" alt="thumbnail"/>
-    {% if not image_url %}
+    {% if image_url %}
+    <img src="{{ image_url }}" alt="thumbnail" />
+    {% else %}
+    <img alt="thumbnail"
+        onload="jQuery(this).next().hide()"
+        onerror="jQuery(this).next().show(); alert('{% trans 'Unrecognized image type!' %}')" />
     <button class="btn btn-primary">{% trans "Upload Image" %}</button>
     {% endif %}
     <div class="input-field">
-        <input {{ input_attrs|safe }} />
+        <input {{ input_attrs|safe }} accept="image/*" />
     </div>
 </div>