sandwitches 2.3.3__py3-none-any.whl → 2.4.1__py3-none-any.whl

sandwitches/admin.py

@@ -84,7 +84,15 @@ class RatingAdmin(ImportExportModelAdmin):
 @admin.register(Order)
 class OrderAdmin(ImportExportModelAdmin):
     resource_classes = [OrderResource]
-    list_display = ("id", "user", "recipe", "status", "total_price", "created_at")
-    list_filter = ("status", "created_at")
+    list_display = (
+        "id",
+        "user",
+        "recipe",
+        "status",
+        "completed",
+        "total_price",
+        "created_at",
+    )
+    list_filter = ("status", "completed", "created_at")
     search_fields = ("user__username", "recipe__title")
     readonly_fields = ("total_price", "created_at", "updated_at")

sandwitches/forms.py

@@ -86,6 +86,8 @@ class UserSignupForm(UserCreationForm, BaseUserFormMixin):
 
 
 class UserProfileForm(forms.ModelForm):
+    image_data = forms.CharField(widget=forms.HiddenInput(), required=False)
+
     class Meta:
         model = User
         fields = (
@@ -96,8 +98,25 @@ class UserProfileForm(forms.ModelForm):
             "bio",
         )
 
+    def save(self, commit=True):
+        user = super().save(commit=False)
+        image_data = self.cleaned_data.get("image_data")
+        if image_data and image_data.startswith("data:image"):
+            import base64
+            from django.core.files.base import ContentFile
+
+            format, imgstr = image_data.split(";base64,")
+            ext = format.split("/")[-1]
+            data = ContentFile(base64.b64decode(imgstr), name=f"avatar.{ext}")
+            user.avatar = data
+        if commit:
+            user.save()
+        return user
+
 
 class UserEditForm(forms.ModelForm):
+    image_data = forms.CharField(widget=forms.HiddenInput(), required=False)
+
     class Meta:
         model = User
         fields = (
@@ -112,6 +131,21 @@ class UserEditForm(forms.ModelForm):
             "bio",
         )
 
+    def save(self, commit=True):
+        user = super().save(commit=False)
+        image_data = self.cleaned_data.get("image_data")
+        if image_data and image_data.startswith("data:image"):
+            import base64
+            from django.core.files.base import ContentFile
+
+            format, imgstr = image_data.split(";base64,")
+            ext = format.split("/")[-1]
+            data = ContentFile(base64.b64decode(imgstr), name=f"avatar.{ext}")
+            user.avatar = data
+        if commit:
+            user.save()
+        return user
+
 
 class TagForm(forms.ModelForm):
     class Meta:
@@ -126,6 +160,7 @@ class RecipeForm(forms.ModelForm):
         widget=forms.TextInput(attrs={"placeholder": _("e.g. spicy, vegan, quick")}),
     )
     rotation = forms.IntegerField(widget=forms.HiddenInput(), initial=0, required=False)
+    image_data = forms.CharField(widget=forms.HiddenInput(), required=False)
 
     class Meta:
         model = Recipe
@@ -138,7 +173,7 @@ class RecipeForm(forms.ModelForm):
             "instructions",
             "price",
             "is_highlighted",
-            "is_community_made",
+            "is_approved",
             "max_daily_orders",
         ]
         widgets = {
@@ -153,11 +188,22 @@ class RecipeForm(forms.ModelForm):
             )
 
     def save(self, commit=True):
-        recipe = super().save(commit=commit)
+        recipe = super().save(commit=False)
+
+        # Handle base64 image data from cropper
+        image_data = self.cleaned_data.get("image_data")
+        if image_data and image_data.startswith("data:image"):
+            import base64
+            from django.core.files.base import ContentFile
 
-        # Handle rotation if an image exists and rotation is requested
+            format, imgstr = image_data.split(";base64,")
+            ext = format.split("/")[-1]
+            data = ContentFile(base64.b64decode(imgstr), name=f"recipe_image.{ext}")
+            recipe.image = data
+
+        # Handle rotation if an image exists and rotation is requested (fallback for simple rotation)
         rotation = self.cleaned_data.get("rotation", 0)
-        if rotation != 0 and recipe.image:
+        if rotation != 0 and recipe.image and not image_data:
             try:
                 from PIL import Image as PILImage
 
@@ -169,9 +215,9 @@ class RecipeForm(forms.ModelForm):
                 print(f"Error rotating image: {e}")
 
         if commit:
+            recipe.save()
             recipe.set_tags_from_string(self.cleaned_data.get("tags_string", ""))
         else:
-            # We'll need to handle this in the view if commit=False
             self.save_m2m = lambda: recipe.set_tags_from_string(
                 self.cleaned_data.get("tags_string", "")
             )
@@ -184,6 +230,7 @@ class UserRecipeSubmissionForm(forms.ModelForm):
         label=_("Tags (comma separated)"),
         widget=forms.TextInput(attrs={"placeholder": _("e.g. spicy, vegan, quick")}),
     )
+    image_data = forms.CharField(widget=forms.HiddenInput(), required=False)
 
     class Meta:
         model = Recipe
@@ -201,8 +248,21 @@ class UserRecipeSubmissionForm(forms.ModelForm):
         }
 
     def save(self, commit=True):
-        recipe = super().save(commit=commit)
+        recipe = super().save(commit=False)
+
+        # Handle base64 image data from cropper
+        image_data = self.cleaned_data.get("image_data")
+        if image_data and image_data.startswith("data:image"):
+            import base64
+            from django.core.files.base import ContentFile
+
+            format, imgstr = image_data.split(";base64,")
+            ext = format.split("/")[-1]
+            data = ContentFile(base64.b64decode(imgstr), name=f"recipe_image.{ext}")
+            recipe.image = data
+
         if commit:
+            recipe.save()
             recipe.set_tags_from_string(self.cleaned_data.get("tags_string", ""))
         else:
             self.save_m2m = lambda: recipe.set_tags_from_string(

sandwitches/migrations/0012_rename_is_community_made_historicalrecipe_is_approved_and_more.py

@@ -0,0 +1,22 @@
+# Generated by Django 6.0.1 on 2026-01-25 10:53
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("sandwitches", "0011_alter_historicalrecipe_is_community_made_and_more"),
+    ]
+
+    operations = [
+        migrations.RenameField(
+            model_name="historicalrecipe",
+            old_name="is_community_made",
+            new_name="is_approved",
+        ),
+        migrations.RenameField(
+            model_name="recipe",
+            old_name="is_community_made",
+            new_name="is_approved",
+        ),
+    ]

sandwitches/migrations/0013_cartitem.py

@@ -0,0 +1,55 @@
+# Generated by Django 6.0.1 on 2026-01-25 11:12
+
+import django.db.models.deletion
+from django.conf import settings
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        (
+            "sandwitches",
+            "0012_rename_is_community_made_historicalrecipe_is_approved_and_more",
+        ),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name="CartItem",
+            fields=[
+                (
+                    "id",
+                    models.BigAutoField(
+                        auto_created=True,
+                        primary_key=True,
+                        serialize=False,
+                        verbose_name="ID",
+                    ),
+                ),
+                ("quantity", models.PositiveIntegerField(default=1)),
+                ("created_at", models.DateTimeField(auto_now_add=True)),
+                ("updated_at", models.DateTimeField(auto_now=True)),
+                (
+                    "recipe",
+                    models.ForeignKey(
+                        on_delete=django.db.models.deletion.CASCADE,
+                        related_name="cart_items",
+                        to="sandwitches.recipe",
+                    ),
+                ),
+                (
+                    "user",
+                    models.ForeignKey(
+                        on_delete=django.db.models.deletion.CASCADE,
+                        related_name="cart_items",
+                        to=settings.AUTH_USER_MODEL,
+                    ),
+                ),
+            ],
+            options={
+                "verbose_name": "Cart Item",
+                "verbose_name_plural": "Cart Items",
+                "unique_together": {("user", "recipe")},
+            },
+        ),
+    ]

sandwitches/migrations/0014_ensure_groups_exist.py

@@ -0,0 +1,22 @@
+from django.db import migrations
+
+
+def create_groups(apps, schema_editor):
+    Group = apps.get_model("auth", "Group")
+    Group.objects.get_or_create(name="admin")
+    Group.objects.get_or_create(name="community")
+
+
+def remove_groups(apps, schema_editor):
+    Group = apps.get_model("auth", "Group")
+    Group.objects.filter(name__in=["admin", "community"]).delete()
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("sandwitches", "0013_cartitem"),
+    ]
+
+    operations = [
+        migrations.RunPython(create_groups, remove_groups),
+    ]

sandwitches/migrations/0015_order_completed_alter_order_status_and_more.py

@@ -0,0 +1,56 @@
+# Generated by Django 6.0.1 on 2026-01-27 08:33
+
+import django.core.validators
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("sandwitches", "0014_ensure_groups_exist"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="order",
+            name="completed",
+            field=models.BooleanField(default=False),
+        ),
+        migrations.AlterField(
+            model_name="order",
+            name="status",
+            field=models.CharField(
+                choices=[
+                    ("PENDING", "Pending"),
+                    ("PREPARING", "Preparing"),
+                    ("MADE", "Made"),
+                    ("SHIPPED", "Shipped"),
+                    ("COMPLETED", "Completed"),
+                    ("CANCELLED", "Cancelled"),
+                ],
+                default="PENDING",
+                max_length=20,
+            ),
+        ),
+        migrations.AlterField(
+            model_name="setting",
+            name="email",
+            field=models.EmailField(
+                blank=True,
+                max_length=254,
+                null=True,
+                validators=[django.core.validators.EmailValidator()],
+            ),
+        ),
+        migrations.AlterField(
+            model_name="user",
+            name="email",
+            field=models.EmailField(
+                max_length=254, validators=[django.core.validators.EmailValidator()]
+            ),
+        ),
+        migrations.AlterField(
+            model_name="user",
+            name="username",
+            field=models.CharField(max_length=150, unique=True),
+        ),
+    ]

sandwitches/models.py

@@ -11,6 +11,7 @@ import logging
 from django.urls import reverse
 from solo.models import SingletonModel
 from django.core.exceptions import ValidationError
+from django.core.validators import EmailValidator
 
 from imagekit.models import ImageSpecField
 from imagekit.processors import ResizeToFill
@@ -21,7 +22,7 @@ hashed_storage = HashedFilenameStorage()
 class Setting(SingletonModel):
     site_name = models.CharField(max_length=255, default="Sandwitches")
     site_description = models.TextField(blank=True, null=True)
-    email = models.EmailField(blank=True, null=True)
+    email = models.EmailField(blank=True, null=True, validators=[EmailValidator()])
     ai_connection_point = models.URLField(blank=True, null=True)
     ai_model = models.CharField(max_length=255, blank=True, null=True)
     ai_api_key = models.CharField(max_length=255, blank=True, null=True)
@@ -34,6 +35,8 @@ class Setting(SingletonModel):
 
 
 class User(AbstractUser):
+    username = models.CharField(max_length=150, unique=True)
+    email = models.EmailField(validators=[EmailValidator()])
     avatar = models.ImageField(upload_to="avatars", blank=True, null=True)
     avatar_thumbnail = ImageSpecField(
         source="avatar",
@@ -132,7 +135,7 @@ class Recipe(models.Model):
     )
     tags = models.ManyToManyField(Tag, blank=True, related_name="recipes")
     is_highlighted = models.BooleanField(default=False)
-    is_community_made = models.BooleanField(default=False)
+    is_approved = models.BooleanField(default=False)
     max_daily_orders = models.PositiveIntegerField(
         null=True, blank=True, verbose_name="Max daily orders"
     )
@@ -230,6 +233,9 @@ class Rating(models.Model):
 class Order(models.Model):
     STATUS_CHOICES = (
         ("PENDING", "Pending"),
+        ("PREPARING", "Preparing"),
+        ("MADE", "Made"),
+        ("SHIPPED", "Shipped"),
         ("COMPLETED", "Completed"),
         ("CANCELLED", "Cancelled"),
     )
@@ -239,6 +245,7 @@ class Order(models.Model):
     )
     recipe = models.ForeignKey(Recipe, related_name="orders", on_delete=models.CASCADE)
     status = models.CharField(max_length=20, choices=STATUS_CHOICES, default="PENDING")
+    completed = models.BooleanField(default=False)
     total_price = models.DecimalField(max_digits=6, decimal_places=2)
     created_at = models.DateTimeField(auto_now_add=True)
     updated_at = models.DateTimeField(auto_now=True)
@@ -278,3 +285,29 @@ class Order(models.Model):
 
     def __str__(self):
         return f"Order #{self.pk} - {self.user} - {self.recipe}"
+
+
+class CartItem(models.Model):
+    user = models.ForeignKey(
+        settings.AUTH_USER_MODEL, related_name="cart_items", on_delete=models.CASCADE
+    )
+    recipe = models.ForeignKey(
+        Recipe, related_name="cart_items", on_delete=models.CASCADE
+    )
+    quantity = models.PositiveIntegerField(default=1)
+    created_at = models.DateTimeField(auto_now_add=True)
+    updated_at = models.DateTimeField(auto_now=True)
+
+    class Meta:
+        unique_together = ("user", "recipe")
+        verbose_name = "Cart Item"
+        verbose_name_plural = "Cart Items"
+
+    def __str__(self):
+        return f"{self.user.username}'s cart: {self.recipe.title} (x{self.quantity})"
+
+    @property
+    def total_price(self):
+        if self.recipe.price:
+            return self.recipe.price * self.quantity
+        return 0

sandwitches/templates/admin/admin_base.html

@@ -56,6 +56,10 @@
             <i>restaurant</i>
             <span>{% trans "Recipes" %}</span>
         </a>
+        <a href="{% url 'admin_recipe_approval_list' %}" class="{% if request.resolver_match.url_name == 'admin_recipe_approval_list' %}active{% endif %}">
+            <i>how_to_reg</i>
+            <span>{% trans "Approvals" %}</span>
+        </a>
         <a href="{% url 'admin_user_list' %}" class="{% if request.resolver_match.url_name == 'admin_user_list' %}active{% endif %}">
             <i>people</i>
             <span>{% trans "Users" %}</span>

sandwitches/templates/admin/dashboard.html

@@ -7,6 +7,7 @@
 {{ block.super }}
 <link href="{% static "dist/main.css" %}" rel="stylesheet">
 <script src="{% static "dist/main.js" %}" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script><!-- Chart.js TODO -->
 {% endblock %}
 
 {% block content %}

sandwitches/templates/admin/partials/order_rows.html

@@ -15,7 +15,7 @@
     <td>{{ order.recipe.title }}</td>
     <td>{{ order.total_price }} €</td>
     <td>
-        <span class="chip {% if order.status == 'PENDING' %}surface-variant{% elif order.status == 'COMPLETED' %}primary{% else %}error{% endif %}">
+        <span class="chip {% if order.status == 'PENDING' %}surface-variant{% elif order.status == 'COMPLETED' %}primary{% elif order.status == 'CANCELLED' %}error{% else %}secondary{% endif %}">
             {{ order.get_status_display }}
         </span>
     </td>

sandwitches/templates/admin/recipe_approval_list.html

@@ -0,0 +1,56 @@
+{% extends "admin/admin_base.html" %}
+{% load i18n %}
+
+{% block admin_title %}{% trans "Pending Approvals" %}{% endblock %}
+
+{% block content %}
+<div class="row align-center mb-2">
+    <h5 class="max bold">{% trans "Recipes Awaiting Approval" %}</h5>
+</div>
+
+<table class="border striped no-space">
+    <thead>
+        <tr>
+            <th class="min">{% trans "Image" %}</th>
+            <th class="max">{% trans "Title" %}</th>
+            <th>{% trans "Uploader" %}</th>
+            <th>{% trans "Created" %}</th>
+            <th class="right-align">{% trans "Actions" %}</th>
+        </tr>
+    </thead>
+    <tbody>
+        {% for recipe in recipes %}
+        <tr class="pointer" onclick="location.href='{% url 'admin_recipe_edit' recipe.pk %}'">
+            <td class="min">
+                {% if recipe.image %}
+                <img src="{{ recipe.image_thumbnail.url }}" class="admin-thumb round">
+                {% else %}
+                <div class="admin-thumb round gray1 middle-align center-align">
+                    <i class="extra">restaurant</i>
+                </div>
+                {% endif %}
+            </td>
+            <td class="max">
+                <b>{{ recipe.title }}</b>
+            </td>
+            <td>{{ recipe.uploaded_by.username|default:"-" }}</td>
+            <td>{{ recipe.created_at|date:"SHORT_DATETIME_FORMAT" }}</td>
+            <td class="right-align">
+                <a href="{% url 'admin_recipe_approve' recipe.pk %}" class="button tiny primary round" onclick="event.stopPropagation();">
+                    <i>check</i>
+                    <span>{% trans "Approve" %}</span>
+                </a>
+                <a href="{% url 'admin_recipe_edit' recipe.pk %}" class="button circle transparent" onclick="event.stopPropagation();" title="{% trans 'Edit' %}"><i>edit</i></a>
+                <a href="{% url 'admin_recipe_delete' recipe.pk %}" class="button circle transparent" onclick="event.stopPropagation();" title="{% trans 'Delete' %}"><i>delete</i></a>
+            </td>
+        </tr>
+        {% empty %}
+        <tr>
+            <td colspan="5" class="center-align padding">
+                {% trans "No recipes pending approval." %}
+            </td>
+        </tr>
+        {% endfor %}
+    </tbody>
+</table>
+{% endblock %}

sandwitches/templates/admin/recipe_form.html

@@ -31,6 +31,14 @@
     .form-section {
         margin-bottom: 2rem;
     }
+    /* Cropper styles */
+    .cropper-container {
+        max-height: 70vh;
+    }
+    #cropper-image {
+        display: block;
+        max-width: 100%;
+    }
 </style>
 {% endblock %}
 
@@ -38,6 +46,7 @@
 <form method="post" enctype="multipart/form-data" id="recipe-form">
     {% csrf_token %}
     {{ form.rotation }}
+    {{ form.image_data }}
     <div class="grid">
         <!-- Top Section: Title, Tags, and Image -->
         <div class="s12 m8">
@@ -82,8 +91,8 @@
 
                 <div class="field middle-align mt-1">
                     <label class="checkbox">
-                        {{ form.is_community_made }}
-                        <span>{{ form.is_community_made.label }}</span>
+                        {{ form.is_approved }}
+                        <span>{{ form.is_approved.label }}</span>
                     </label>
                 </div>
             </article>
@@ -107,25 +116,21 @@
 
                 <div class="relative mb-1" style="overflow: hidden; min-height: 200px; display: flex; align-items: center; justify-content: center;">
                     {% if recipe.image %}
-                    <img src="{{ recipe.image_medium.url }}?v={% now "U" %}" class="responsive round" id="image-preview" style="max-height: 300px; width: 100%; object-fit: contain; transition: transform 0.3s ease;">
+                    <img src="{{ recipe.image_medium.url }}?v={% now "U" %}" class="responsive round" id="image-preview" style="max-height: 300px; width: 100%; object-fit: contain;">
                     {% else %}
+                    <img src="" class="responsive round" id="image-preview" style="max-height: 300px; width: 100%; object-fit: contain; display: none;">
                     <div class="medium-height middle-align center-align gray1 round" id="image-placeholder" style="width: 100%;">
                         <i class="extra">image</i>
                     </div>
                     {% endif %}
                 </div>
 
-                {% if recipe.image %}
-                <div class="row no-space border round mb-1">
-                    <button type="button" class="button transparent max" onclick="rotatePreview(-90)" title="{% trans 'Rotate 90° CCW' %}">
-                        <i>rotate_left</i>
-                    </button>
-                    <div class="divider vertical"></div>
-                    <button type="button" class="button transparent max" onclick="rotatePreview(90)" title="{% trans 'Rotate 90° CW' %}">
-                        <i>rotate_right</i>
+                <div id="image-tools" class="row no-space border round mb-1" style="{% if not recipe.image %}display: none;{% endif %}">
+                    <button type="button" class="button transparent max" onclick="openCropper()" title="{% trans 'Edit Image' %}">
+                        <i>crop_rotate</i>
+                        <span>{% trans "Edit" %}</span>
                     </button>
                 </div>
-                {% endif %}
 
                 <div class="field file border round">
                     <input type="text" readonly>
@@ -174,21 +179,111 @@
         </button>
     </nav>
 </form>
+
+<dialog id="cropper-dialog" class="large">
+    <div class="padding">
+        <h5 class="bold mb-1">{% trans "Edit Image" %}</h5>
+        <div class="cropper-container mb-1">
+            <img id="cropper-image" src="">
+        </div>
+        <div class="row scroll no-space border round mb-1">
+            <button type="button" class="button transparent max" onclick="cropper.rotate(-90)" title="{% trans 'Rotate Left' %}">
+                <i>rotate_left</i>
+            </button>
+            <button type="button" class="button transparent max" onclick="cropper.rotate(90)" title="{% trans 'Rotate Right' %}">
+                <i>rotate_right</i>
+            </button>
+            <div class="divider vertical"></div>
+            <button type="button" class="button transparent max" onclick="cropper.scaleX(-cropper.getData().scaleX || -1)" title="{% trans 'Flip Horizontal' %}">
+                <i>flip</i>
+            </button>
+            <button type="button" class="button transparent max" onclick="cropper.scaleY(-cropper.getData().scaleY || -1)" title="{% trans 'Flip Vertical' %}">
+                <i>flip</i>
+            </button>
+            <div class="divider vertical"></div>
+            <button type="button" class="button transparent max" onclick="cropper.setAspectRatio(1)" title="{% trans '1:1' %}">1:1</button>
+            <button type="button" class="button transparent max" onclick="cropper.setAspectRatio(4/3)" title="{% trans '4:3' %}">4:3</button>
+            <button type="button" class="button transparent max" onclick="cropper.setAspectRatio(16/9)" title="{% trans '16:9' %}">16:9</button>
+            <button type="button" class="button transparent max" onclick="cropper.setAspectRatio(NaN)" title="{% trans 'Free' %}">
+                <i>crop_free</i>
+            </button>
+        </div>
+        <nav class="right-align">
+            <button type="button" class="button transparent" onclick="ui('#cropper-dialog')">{% trans "Cancel" %}</button>
+            <button type="button" class="button primary" onclick="applyCrop()">{% trans "Apply" %}</button>
+        </nav>
+    </div>
+</dialog>
 {% endblock %}
 
 {% block admin_scripts %}
 <script>
-    let currentRotation = 0;
-
-    function rotatePreview(angle) {
-        currentRotation = (currentRotation + angle) % 360;
-        const img = document.getElementById('image-preview');
-        if (img) {
-            img.style.transform = `rotate(${currentRotation}deg)`;
-            document.getElementsByName('rotation')[0].value = currentRotation;
+    let cropper;
+    const imagePreview = document.getElementById('image-preview');
+    const imagePlaceholder = document.getElementById('image-placeholder');
+    const imageTools = document.getElementById('image-tools');
+    const imageInput = document.getElementById('id_image');
+    const imageDataInput = document.getElementById('id_image_data');
+    const cropperImage = document.getElementById('cropper-image');
+
+    function openCropper() {
+        if (!imagePreview.src || imagePreview.src === window.location.href) return;
+        cropperImage.src = imagePreview.src;
+        ui('#cropper-dialog');
+
+        if (cropper) {
+            cropper.destroy();
         }
+
+        setTimeout(() => {
+            cropper = new Cropper(cropperImage, {
+                viewMode: 1,
+                autoCropArea: 1,
+                responsive: true,
+                restore: false,
+                checkCrossOrigin: true,
+                guides: true,
+                center: true,
+                highlight: false,
+                cropBoxMovable: true,
+                cropBoxResizable: true,
+                toggleDragModeOnDblclick: false,
+            });
+        }, 100);
     }
 
+    function applyCrop() {
+        const canvas = cropper.getCroppedCanvas({
+            maxWidth: 2000,
+            maxHeight: 2000,
+        });
+
+        const croppedData = canvas.toDataURL('image/jpeg', 0.9);
+        imagePreview.src = croppedData;
+        imagePreview.style.display = 'block';
+        if (imagePlaceholder) imagePlaceholder.style.display = 'none';
+        imageTools.style.display = 'flex';
+        imageDataInput.value = croppedData;
+
+        ui('#cropper-dialog');
+    }
+
+    imageInput.addEventListener('change', function(e) {
+        const files = e.target.files;
+        if (files && files.length > 0) {
+            const reader = new FileReader();
+            reader.onload = function(event) {
+                imagePreview.src = event.target.result;
+                imagePreview.style.display = 'block';
+                if (imagePlaceholder) imagePlaceholder.style.display = 'none';
+                imageTools.style.display = 'flex';
+                // Automatically open cropper for new images
+                openCropper();
+            };
+            reader.readAsDataURL(files[0]);
+        }
+    });
+
     document.addEventListener('DOMContentLoaded', function() {
         const fields = ['id_description', 'id_ingredients', 'id_instructions'];
         fields.forEach(id => {