First commit, base files

Author: MiltonLn

.gitignore

@@ -87,3 +87,6 @@ ENV/
 
 # Rope project settings
 .ropeproject
+
+# Pycharm
+.idea/

README.md

@@ -1 +1,3 @@
-# django-preview-image-widget
+# django-preview-image-widget
+
+[WORK IN PROGRESS]

preview_image_widget/static/plugins/simple_image_widget/simple_image_widget.css

@@ -0,0 +1,30 @@
+.thumbnail {
+    width: 171px;
+    margin: 0 auto;
+    margin-bottom: 10px;
+}
+#preview {
+    position: relative;
+}
+#preview a {
+    position: absolute;
+    bottom: 5px;
+    left: 5px;
+    right: 5px;
+
+}
+#file-info {
+    text-align: center;
+    display: block;
+    padding-top:10px;
+}
+input[simple_image_widget] {
+    position: absolute;
+    visibility: hidden;
+    width: 0;
+    z-index: -9999;
+}
+#file-save {
+    text-align:center;
+    width: 171px;
+}

preview_image_widget/static/plugins/simple_image_widget/simple_image_widget.js

@@ -0,0 +1,39 @@
+$(document).on('mouseenter', '#preview', function(e) {
+    $(this).find('a').fadeIn();
+});
+
+$(document).on('mouseleave', '#preview', function(e) {
+    $(this).find('a').fadeOut();
+});
+
+$(document).on('click', '#file-select', function(e) {
+    e.preventDefault();
+    $("[simple_image_widget]").click();
+});
+
+$(document).on('change', '[simple_image_widget]', function(e) {
+    var file = (this.files[0].name).toString();
+    var reader = new FileReader();
+    
+    $('#file-info').text('');
+    $('#file-info').text(file);
+    
+     reader.onload = function (e) {
+         $('#preview img').attr('src', e.target.result);
+     }
+     
+     reader.readAsDataURL(this.files[0]);
+});
+
+$(document).ready(function(){
+    var $ImageWidget = $("[simple_image_widget]");
+    var preview = $ImageWidget.attr("data-preview");
+    if(typeof preview != "undefined"){
+        var img = preview;
+    } else {
+        var img = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNzEiIGhlaWdodD0iMTgwIj48cmVjdCB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgZmlsbD0iI2VlZSI+PC9yZWN0Pjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9Ijg1LjUiIHk9IjkwIiBzdHlsZT0iZmlsbDojYWFhO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjEycHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+MTcxeDE4MDwvdGV4dD48L3N2Zz4=";
+    }
+    var html = '<div id="preview" class="thumbnail"><a href="#" id="file-select" class="btn btn-raised btn-primary">Elegir imagen</a>'+
+        '<img src="'+ img +'"/>';
+    $ImageWidget.before(html);
+});

preview_image_widget/widgets.py

@@ -0,0 +1,47 @@
+from django.conf import settings
+from django.forms import FileInput
+
+
+class SimpleImageWidget(FileInput):
+    """
+    Autor: Milton Lenis
+    Fecha: Abril 2 2017
+    Widget para archivos de tipo imágen para mejorar un poco la apariencia visual de manera sencilla.
+    """
+    def __init__(self, *args, **kwargs):
+        """
+        Autor: Milton Lenis
+        Fecha: Abril 2 2017
+        Método constructor para agregar el atributo 'simple_image_widget' al campo y poder activarlo desde javascript
+        :param args: Argumentos de la función
+        :param kwargs: Keyword arguments de la función
+        """
+        kwargs['attrs'] = {
+            'simple_image_widget': 1
+        }
+        super(SimpleImageWidget, self).__init__(*args, **kwargs)
+
+    def render(self, name, value, attrs=None):
+        """
+        Autor: Milton Lenis
+        Fecha: Abril 2 2017
+        Se sobrecarga el método render para agregar la imágen a la vista previa al editar en caso de que tenga un valor
+        almacenado
+        :param name:
+        :param value:
+        :param attrs:
+        :return:
+        """
+        if value:
+            preview = {"data-preview": settings.MEDIA_URL + str(value)}
+            if attrs:
+                attrs.update(preview)
+            else:
+                attrs = preview
+        return super(SimpleImageWidget, self).render(name, value, attrs=attrs)
+
+    class Media:
+        css = {
+            'all': ('plugins/simple_image_widget/simple_image_widget.css',)
+        }
+        js = ('plugins/simple_image_widget/simple_image_widget.js',)