Upload image

This commit is contained in:
eraden 2024-11-01 18:10:58 +01:00
parent 263e0aa8e7
commit 02aa8f54b4
2 changed files with 18 additions and 2 deletions

View File

@ -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"));
}

View File

@ -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 %}