Add image to auto-fill

src/api/wishes.php

@@ -98,16 +98,6 @@ switch ($_SERVER['REQUEST_METHOD']) {
             ;');
 
             $response['success'] = true;
-        } elseif (isset($_PUT['wish_id'], $_PUT['wish_url'])) {
-            /**
-             * Update Wish Image
-             */
-            $database
-            ->query('UPDATE `wishes`
-                        SET `image` = "' . $_PUT['wish_url'] . '"
-                      WHERE `id`    = ' . $_PUT['wish_id'] . ';');
-
-            $response['wish_url'] = $_PUT['wish_url'];
         }
         break;
 

src/assets/css/wish.css

@@ -4,5 +4,6 @@
     object-fit: cover;
     object-position: 50%;
 
+    background-color: #fff;
     cursor: pointer;
 }

src/assets/js/wish.js

@@ -11,10 +11,12 @@ $(function () {
         var modalAutoFill = $('.modal.auto-fill');
         var modalValidate = $('.modal.validate');
 
-        var formWish = $('.form.wish');
+        var formWish     = $('.form.wish');
+        var imagePreview = $('img.preview');
 
         var inputTitle       = $('[name="wish_title"]');
         var inputDescription = $('[name="wish_description"]');
+        var inputImage       = $('[name="wish_image"]');
         var inputURL         = $('[name="wish_url"]');
 
         modalAutoFill
@@ -53,6 +55,14 @@ $(function () {
                         inputDescription.val(info.description);
                     }
 
+                    /**
+                     * Image
+                     */
+                    if (info.image) {
+                        inputImage.val(info.image);
+                        imagePreview.attr('src', info.image);
+                    }
+
                     /**
                      * URL
                      */
@@ -119,29 +129,16 @@ $(function () {
 
         modalImage
         .modal({
-            onApprove: function(buttonApprove) {
-                var formImage = modalImage.find('form.preview');
-                var formData  = new URLSearchParams(new FormData(formImage[0]));
+            onApprove: function() {
+                var newImageURL = modalImage.find('[name="wish_image"]').val();
 
-                formImage.addClass('loading');
+                $('img.preview').attr('src', newImageURL);
+                $('.form.wish [name="wish_image"]').val(newImageURL);
 
-                fetch('/src/api/wishes.php', {
-                    method: 'PUT',
-                    body:   formData
-                })
-                .then(handleFetchError)
-                .then(handleFetchResponse)
-                .then(function(response) {
-                    var elementImage = $('.form.wish img.preview');
-                    elementImage.attr('src', response.wish_url);
-
-                    formImage.removeClass('loading');
-                    modalImage.modal('hide');
-
-                    $('body').toast({ message: 'Wish image successfully updated.' });
+                $('body').toast({
+                    class:   'primary',
+                    message: 'Don\'t forget to save your changes.'
                 });
-
-                return false;
             }
         })
         .modal('show');

src/pages/wish.php

@@ -16,7 +16,8 @@ $page = new Page(__FILE__, $wish->title);
 if ('POST' === $_SERVER['REQUEST_METHOD'] && count($_POST) >= 0) {
     $wish_id          = $_POST['wish_id'];
     $wish_title       = trim($_POST['wish_title']);
-    $wish_description = trim($_POST['wish_description']);
+    $wish_description = $_POST['wish_description'] ?: 'NULL';
+    $wish_image       = trim($_POST['wish_image']);
     $wish_url         = trim($_POST['wish_url']);
     $wish_priority    = $_POST['wish_priority'] ?: 'NULL';
 
@@ -24,6 +25,7 @@ if ('POST' === $_SERVER['REQUEST_METHOD'] && count($_POST) >= 0) {
     ->query('UPDATE `wishes`
                 SET `title`       = "' . $wish_title . '",
                     `description` = "' . $wish_description . '",
+                    `image`       = "' . $wish_image . '",
                     `url`         = "' . $wish_url . '",
                     `priority`    = ' . $wish_priority . '
               WHERE `id`          = ' . $wish_id . ';');
@@ -96,7 +98,8 @@ $referer = '/?page=wishlists&wishlist=' . $wish->wishlist;
 
         <div class="ui segment">
             <form class="ui form wish" method="POST">
-                <input type="hidden" name="wish_id" value="<?= $_GET['id'] ?>">
+                <input type="hidden" name="wish_id" value="<?= $_GET['id'] ?>" />
+                <input type="hidden" name="wish_image" />
 
                 <div class="ui two column grid">
 
@@ -183,14 +186,12 @@ $referer = '/?page=wishlists&wishlist=' . $wish->wishlist;
     <div class="content">
         <p>Define a new URL to be used as a preview.</p>
 
-        <form class="ui form preview">
-            <input type="hidden" name="wish_id" value="<?= $_GET['id'] ?>" />
-
+        <div class="ui form preview">
             <div class="field">
                 <label>URL</label>
-                <input class="current" type="url" name="wish_url" />
+                <input class="current" type="url" name="wish_image" />
             </div>
-        </form>
+        </div>
     </div>
     <div class="actions">
         <div class="ui primary approve button">