Upload image

cooked/src/routes.rs

@@ -1,6 +1,7 @@
 use crate::actors::search::{Find, Search};
 use crate::types::*;
 use crate::{entities, entities::prelude::*, filters};
+use actix_files::Files;
 use actix_identity::Identity;
 use actix_multipart::form::{tempfile::TempFile, MultipartForm};
 use actix_web::http::header::{CONTENT_LENGTH, CONTENT_TYPE};
@@ -505,5 +506,7 @@ pub fn configure(config: &mut actix_web::web::ServiceConfig) {
         .service(search_page)
         .service(search_results)
         .service(recipe_form)
-        .service(create_recipe);
+        .service(create_recipe)
+        .service(recipe_image_upload)
+        .service(Files::new("/assets", "./assets"));
 }

cooked/templates/recipies/create_form.jinja

@@ -15,7 +15,7 @@
         <div class="flex flex-wrap gap-8 justify-center">
             <form action="/create" method="post" class="flex flex-col gap-4 md:w-1/2 md:mb-10">
                 <label for="image" class="flex gap-4">
-                    <input type="file" class="file-input w-full max-w-xs" name="image" id="image" onchange="{ const f = new FormData(); f.append('image', this.files[0]); fetch('/upload', { body: f, method: 'post' }).then(res = res.json()).then(res => document.body.querySelector('#image_url').res.image_url); }" />
+                    <input type="file" class="file-input w-full max-w-xs" name="image" id="image" />
                     <input name="image_url" id='image_url' class="hidden" />
                 </label>
 
@@ -97,4 +97,17 @@
         </div>
     </div>
 </main>
+<script type="module">
+document.addEventListener("DOMContentLoaded", (event) => {
+    const image = document.body.querySelector('input#image');
+    const image_url = document.body.querySelector('#image_url');
+    image.addEventListener('change', () => {
+        const f = new FormData();
+        f.append('image', image.files[0]);
+        fetch('/recipe-image', { body: f, method: 'post' })
+            .then(res => res.json())
+            .then(res => image_url.value = res.image_url);
+    });
+});
+</script>
 {% endblock %}