t/tetratto
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add: post image uploads (supporter)

Browse source
This commit is contained in:
trisua 2025-05-11 14:27:55 -04:00
parent ba1f8ef063
commit 70965298b5
18 changed files with 455 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

83
crates/app/src/image.rs
View file

@ -4,6 +4,7 @@ use axum::{
http::{StatusCode, header::CONTENT_TYPE},
};
use axum_extra::extract::Multipart;
use serde::de::DeserializeOwned;
use std::{fs::File, io::BufWriter};
/// An image extractor accepting:
@ -80,3 +81,85 @@ pub fn save_buffer(path: &str, bytes: Vec<u8>, format: image::ImageFormat) -> st
Ok(())
}
/// A file extractor accepting:
/// * `multipart/form-data`
///
/// Will also attempt to parse out the **last** field in the multipart upload
/// as the given struct from JSON. Every other field is put into a vector of bytes,
/// as they are seen as raw binary data.
pub struct JsonMultipart<T: DeserializeOwned>(pub Vec<Bytes>, pub T);
impl<S, T> FromRequest<S> for JsonMultipart<T>
where
Bytes: FromRequest<S>,
S: Send + Sync,
T: DeserializeOwned,
{
type Rejection = (StatusCode, String);
async fn from_request(req: Request, state: &S) -> Result<Self, Self::Rejection> {
let Some(content_type) = req.headers().get(CONTENT_TYPE) else {
return Err((
StatusCode::BAD_REQUEST,
"no content type header".to_string(),
));
};
let content_type = content_type.to_str().unwrap();
if !content_type.starts_with("multipart/form-data") {
return Err((
StatusCode::BAD_REQUEST,
"expected multipart/form-data".to_string(),
));
}
let mut multipart = Multipart::from_request(req, state).await.map_err(|_| {
(
StatusCode::BAD_REQUEST,
"could not read multipart".to_string(),
)
})?;
let mut body: Vec<Bytes> = {
let mut out = Vec::new();
while let Ok(Some(field)) = multipart.next_field().await {
out.push(field.bytes().await.map_err(|_| {
(
StatusCode::BAD_REQUEST,
"could not read field as bytes".to_string(),
)
})?);
}
out
};
let last = match body.pop() {
Some(b) => b,
None => {
return Err((
StatusCode::BAD_REQUEST,
"could not read json data".to_string(),
));
}
};
let json: T = match serde_json::from_str(&match String::from_utf8(last.to_vec()) {
Ok(s) => s,
Err(_) => return Err((StatusCode::BAD_REQUEST, "json data isn't utf8".to_string())),
}) {
Ok(s) => s,
Err(_) => {
return Err((
StatusCode::BAD_REQUEST,
"could not parse json data as json".to_string(),
));
}
};
Ok(Self(body, json))
}
}

56
crates/app/src/public/css/style.css
View file

@ -317,6 +317,60 @@ img.emoji {
aspect-ratio: 1 / 1;
}
.media_gallery {
display: grid;
grid-auto-columns: 1fr 1fr;
grid-auto-flow: column dense;
border-radius: var(--radius);
width: fit-content;
max-width: 100%;
}
@media screen and (max-width: 900px) {
.media_gallery {
grid-auto-flow: row dense;
}
}
.media_gallery img {
border-radius: var(--radius);
object-fit: cover;
width: 100%;
height: 100%;
cursor: pointer;
transition: filter 0.15s;
}
.media_gallery img:hover {
filter: brightness(80%);
}
.lightbox {
position: absolute;
z-index: 9999;
background: hsla(0, 0%, 0%, 50%);
backdrop-filter: blur(5px);
display: flex;
justify-content: center;
align-items: center;
width: 100dvw;
height: 100dvh;
top: 0;
left: 0;
}
.lightbox_exit {
top: 1rem;
right: 1rem;
position: absolute;
}
.lightbox img {
box-shadow: var(--shadow-x-offset) var(--shadow-y-offset) var(--shadow-size)
var(--color-shadow);
border-radius: var(--radius);
}
/* avatar/banner */
.avatar {
--size: 50px;
@ -802,7 +856,7 @@ nav .button:not(.title):not(.active):hover {
top: unset;
}
body {
#page {
padding-bottom: 72px;
}

37
crates/app/src/public/html/communities/create_post.html
View file

@ -61,9 +61,13 @@
></textarea>
</div>
<div id="files_list" class="flex gap-2 flex-wrap"></div>
<div class="flex gap-2">
{{ components::emoji_picker(element_id="content",
render_dialog=true) }}
render_dialog=true) }} {% if is_supporter %} {{
components::file_picker(files_list_id="files_list") }}
{% endif %}
<button
class="small square quaternary"
@ -85,17 +89,32 @@
async function create_post_from_form_town_square(e) {
e.preventDefault();
await trigger("atto::debounce", ["posts::create"]);
fetch("/api/v1/posts", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
e.target
.querySelector("button.primary")
.classList.add("hidden");
// create body
const body = new FormData();
for (const file of e.target.file_picker.files) {
body.append(file.name, file);
}
body.append(
"body",
JSON.stringify({
content: e.target.content.value,
community: document.getElementById(
"community_to_post_to",
).selectedOptions[0].value,
}),
);
// ...
fetch("/api/v1/posts", {
method: "POST",
body,
})
.then((res) => res.json())
.then(async (res) => {
@ -130,6 +149,10 @@
setTimeout(() => {
window.location.href = `/post/${res.payload}`;
}, 100);
} else {
e.target
.querySelector("button.primary")
.classList.remove("hidden");
}
});
}

18
crates/app/src/public/html/communities/feed.html
View file

@ -78,15 +78,21 @@
async function create_post_from_form(e) {
e.preventDefault();
await trigger("atto::debounce", ["posts::create"]);
fetch("/api/v1/posts", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
// create body
const body = new FormData();
body.append(
"body",
JSON.stringify({
content: e.target.content.value,
community: "{{ community.id }}",
}),
);
// ...
fetch("/api/v1/posts", {
method: "POST",
body,
})
.then((res) => res.json())
.then((res) => {

105
crates/app/src/public/html/components.html
View file

@ -238,7 +238,8 @@ and show_community and community.id != config.town_square or question %}
>
{{ post.content|markdown|safe }}
</span>
{% else %}
{{ self::post_media(upload_ids=post.uploads) }} {% else %}
<details>
<summary
class="card flex gap-2 items-center tertiary red w-full"
@ -247,13 +248,17 @@ and show_community and community.id != config.town_square or question %}
<b>{{ post.context.content_warning }}</b>
</summary>
<span
id="post-content:{{ post.id }}"
class="no_p_margin"
hook="long"
>
{{ post.content|markdown|safe }}
</span>
<div class="flex flex-col gap-2">
<span
id="post-content:{{ post.id }}"
class="no_p_margin"
hook="long"
>
{{ post.content|markdown|safe }}
</span>
{{ self::post_media(upload_ids=post.uploads) }}
</div>
</details>
{% endif %}
@ -386,6 +391,17 @@ and show_community and community.id != config.town_square or question %}
{% if community and show_community and community.id != config.town_square or
question %}
</div>
{% endif %} {%- endmacro %} {% macro post_media(upload_ids) -%} {% if
upload_ids|length > 0%}
<div class="media_gallery gap-2">
{% for upload in upload_ids %}
<img
src="/api/v1/uploads/{{ upload }}"
alt="Image upload"
onclick="trigger('ui::lightbox_open', ['/api/v1/uploads/{{ upload }}'])"
/>
{% endfor %}
</div>
{% endif %} {%- endmacro %} {% macro notification(notification) -%}
<div class="w-full card-nest">
<div class="card small notif_title flex items-center">
@ -1262,8 +1278,77 @@ show_kick=false, secondary=false) -%}
</div>
</div>
</dialog>
{% endif %} {%- endmacro %} {% macro supporter_ad(body="") -%} {% if
config.stripe and not is_supporter %}
{% endif %} {%- endmacro %} {% macro file_picker(files_list_id) -%}
<button
class="button small square quaternary"
onclick="pick_file()"
title="Images"
type="button"
>
{{ icon "image-up" }}
</button>
<input
type="file"
multiple
accept="image/png,image/jpeg,image/avif,image/webp"
style="display: none"
name="file_picker"
/>
<div style="display: none" id="file_template">
{{ icon "image" }}
<b class="name shorter" style="overflow-wrap: normal">.file_name</b>
</div>
<script>
(() => {
const input = document.querySelector("input[name=file_picker]");
const element = document.getElementById("{{ files_list_id }}");
const template = document.getElementById("file_template");
globalThis.pick_file = () => {
input.click();
};
globalThis.render_file_picker_files = () => {
element.innerHTML = "";
let idx = 0;
for (const file of input.files) {
element.innerHTML += `<div class="card small secondary flex items-center gap-2" onclick="remove_file(${idx})" style="cursor: pointer">${template.innerHTML.replace(
".file_name",
file.name,
)}</div>`;
idx += 1;
}
};
globalThis.remove_file = (idx) => {
const files = Array.from(input.files);
files.splice(idx - 1, 1);
// update files
const list = new DataTransfer();
for (item of files) {
list.items.add(item);
}
input.files = list.files;
// render
render_file_picker_files();
};
input.addEventListener("change", () => {
render_file_picker_files();
});
})();
</script>
{%- endmacro %} {% macro supporter_ad(body="") -%} {% if config.stripe and not
is_supporter %}
<div
class="card w-full supporter_ad"
ui_ident="supporter_ad"

19
crates/app/src/public/html/post/post.html
View file

@ -290,16 +290,23 @@
async function create_reply_from_form(e) {
e.preventDefault();
await trigger("atto::debounce", ["posts::create"]);
fetch("/api/v1/posts", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
// create body
const body = new FormData();
body.append(
"body",
JSON.stringify({
content: e.target.content.value,
community: "{{ community.id }}",
replying_to: "{{ post.id }}",
}),
);
// ...
fetch("/api/v1/posts", {
method: "POST",
body,
})
.then((res) => res.json())
.then((res) => {

13
crates/app/src/public/html/root.html
View file

@ -67,7 +67,7 @@ macros -%}
<body>
<div id="toast_zone"></div>
<div id="page" style="display: contents">
<div id="page">
<!-- prettier-ignore -->
{% if user and user.id == 0 %}
<article>
@ -281,6 +281,17 @@ macros -%}
</div>
</dialog>
<div class="lightbox hidden" id="lightbox">
<button
class="lightbox_exit small square quaternary red"
onclick="trigger('ui::lightbox_close')"
>
{{ icon "x" }}
</button>
<img src="" alt="Image" id="lightbox_img" />
</div>
{% if user %}
<dialog id="tokens_dialog">
<div class="inner flex flex-col gap-2">

10
crates/app/src/public/js/atto.js
View file

@ -1028,6 +1028,16 @@ ${option.input_element_type === "textarea" ? `${option.value}</textarea>` : ""}
return get_permissions_html;
},
);
// lightbox
self.define("lightbox_open", (_, src) => {
document.getElementById("lightbox_img").src = src;
document.getElementById("lightbox").classList.remove("hidden");
});
self.define("lightbox_close", () => {
document.getElementById("lightbox").classList.add("hidden");
});
})();
(() => {

2
crates/app/src/routes/api/v1/communities/communities.rs
View file

@ -309,7 +309,7 @@ pub async fn delete_membership(
Err(e) => return Json(e.into()),
};
match data.delete_membership(membership.id, user).await {
match data.delete_membership(membership.id, &user).await {
Ok(_) => Json(ApiReturn {
ok: true,
message: "Membership deleted".to_string(),

121
crates/app/src/routes/api/v1/communities/posts.rs
View file

@ -1,17 +1,30 @@
use axum::{Extension, Json, extract::Path, response::IntoResponse};
use std::fs::exists;
use axum::{body::Body, extract::Path, response::IntoResponse, Extension, Json};
use axum_extra::extract::CookieJar;
use tetratto_core::model::{ApiReturn, Error, communities::Post};
use image::ImageFormat;
use pathbufd::PathBufD;
use tetratto_core::model::{
communities::Post,
permissions::FinePermission,
uploads::{MediaType, MediaUpload},
ApiReturn, Error,
};
use crate::{
get_user_from_token,
routes::api::v1::{CreatePost, CreateRepost, UpdatePostContent, UpdatePostContext},
image::{save_buffer, JsonMultipart},
routes::api::v1::{
auth::images::read_image, CreatePost, CreateRepost, UpdatePostContent, UpdatePostContext,
},
State,
};
// maximum file dimensions: 2048x2048px (4 MiB)
pub const MAXIUMUM_FILE_SIZE: usize = 4194304;
pub async fn create_request(
jar: CookieJar,
Extension(data): Extension<State>,
Json(req): Json<CreatePost>,
JsonMultipart(images, req): JsonMultipart<CreatePost>,
) -> impl IntoResponse {
let data = &(data.read().await).0;
let user = match get_user_from_token!(jar, data) {
@ -19,6 +32,15 @@ pub async fn create_request(
None => return Json(Error::NotAllowed.into()),
};
if !user.permissions.check(FinePermission::SUPPORTER) {
if images.len() > 0 {
// this is currently supporter only until it's been tested better...
// after it's fully release, file limit will be raised to 8 MiB for supporters,
// and left at 4 for non-supporters
return Json(Error::RequiresSupporter.into());
}
}
let mut props = Post::new(
req.content,
match req.community.parse::<usize>() {
@ -44,12 +66,63 @@ pub async fn create_request(
};
}
match data.create_post(props).await {
Ok(id) => Json(ApiReturn {
ok: true,
message: "Post created".to_string(),
payload: Some(id.to_string()),
}),
// check sizes
for img in &images {
if img.len() > MAXIUMUM_FILE_SIZE {
return Json(Error::DataTooLong("image".to_string()).into());
}
}
// create uploads
for _ in 0..images.len() {
props.uploads.push(
match data
.create_upload(MediaUpload::new(MediaType::Webp, props.owner))
.await
{
Ok(u) => u.id,
Err(e) => return Json(e.into()),
},
);
}
// ...
match data.create_post(props.clone()).await {
Ok(id) => {
// write to uploads
for (i, upload_id) in props.uploads.iter().enumerate() {
let image = match images.get(i) {
Some(img) => img,
None => {
if let Err(e) = data.delete_upload(*upload_id).await {
return Json(e.into());
}
continue;
}
};
let upload = match data.get_upload_by_id(*upload_id).await {
Ok(u) => u,
Err(e) => return Json(e.into()),
};
if let Err(e) = save_buffer(
&upload.path(&data.0).to_string(),
image.to_vec(),
ImageFormat::WebP,
) {
return Json(Error::MiscError(e.to_string()).into());
}
}
// return
Json(ApiReturn {
ok: true,
message: "Post created".to_string(),
payload: Some(id.to_string()),
})
}
Err(e) => Json(e.into()),
}
}
@ -87,6 +160,32 @@ pub async fn create_repost_request(
}
}
pub async fn get_upload_request(
Path(id): Path<usize>,
Extension(data): Extension<State>,
) -> impl IntoResponse {
let data = &(data.read().await).0;
let upload = data.get_upload_by_id(id).await.unwrap();
let path = upload.path(&data.0);
if !exists(&path).unwrap() {
return Err((
[("Content-Type", "image/svg+xml")],
Body::from(read_image(PathBufD::current().extend(&[
data.0.dirs.media.as_str(),
"images",
"default-banner.svg",
]))),
));
}
Ok((
[("Content-Type", upload.what.mime())],
Body::from(read_image(path)),
))
}
pub async fn delete_request(
jar: CookieJar,
Extension(data): Extension<State>,

2
crates/app/src/routes/api/v1/mod.rs
View file

@ -348,6 +348,8 @@ pub fn routes() -> Router {
.route("/stacks/{id}/users", post(stacks::add_user_request))
.route("/stacks/{id}/users", delete(stacks::remove_user_request))
.route("/stacks/{id}", delete(stacks::delete_request))
// uploads
.route("/uploads/{id}", get(communities::posts::get_upload_request))
}
#[derive(Deserialize)]

15
crates/app/src/routes/pages/communities.rs
View file

@ -167,9 +167,20 @@ pub async fn list_request(jar: CookieJar, Extension(data): Extension<State>) ->
let mut communities: Vec<Community> = Vec::new();
for membership in &list {
match data.0.get_community_by_id(membership.community).await {
match data
.0
.get_community_by_id_no_void(membership.community)
.await
{
Ok(c) => communities.push(c),
Err(e) => return Err(Html(render_error(e, &jar, &data, &None).await)),
Err(_) => {
// delete membership; community doesn't exist
if let Err(e) = data.0.delete_membership(membership.id, &user).await {
return Err(Html(render_error(e, &jar, &data, &Some(user)).await));
}
continue;
}
}
}

4
crates/core/src/database/drivers/sql/create_posts.sql
View file

@ -10,5 +10,7 @@ CREATE TABLE IF NOT EXISTS posts (
likes INT NOT NULL,
dislikes INT NOT NULL,
-- other counts
comment_count INT NOT NULL
comment_count INT NOT NULL,
-- ...
uploads TEXT NOT NULL
)

1
crates/core/src/database/emojis.rs
View file

@ -1,5 +1,4 @@
use std::collections::HashMap;
use super::*;
use crate::cache::Cache;
use crate::model::{

2
crates/core/src/database/memberships.rs
View file

@ -250,7 +250,7 @@ impl DataManager {
}
/// Delete a membership given its `id`
pub async fn delete_membership(&self, id: usize, user: User) -> Result<()> {
pub async fn delete_membership(&self, id: usize, user: &User) -> Result<()> {
let y = self.get_membership_by_id(id).await?;
if user.id != y.owner {

12
crates/core/src/database/posts.rs
View file

@ -41,6 +41,8 @@ impl DataManager {
dislikes: get!(x->8(i32)) as isize,
// other counts
comment_count: get!(x->9(i32)) as usize,
// ...
uploads: serde_json::from_str(&get!(x->10(String))).unwrap(),
}
}
@ -1038,7 +1040,7 @@ impl DataManager {
let res = execute!(
&conn,
"INSERT INTO posts VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10)",
"INSERT INTO posts VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11)",
params![
&(data.id as i64),
&(data.created as i64),
@ -1053,7 +1055,8 @@ impl DataManager {
},
&0_i32,
&0_i32,
&0_i32
&0_i32,
&serde_json::to_string(&data.uploads).unwrap()
]
);
@ -1148,6 +1151,11 @@ impl DataManager {
}
}
// delete uploads
for upload in y.uploads {
self.delete_upload(upload).await?;
}
// return
Ok(())
}

3
crates/core/src/model/communities.rs
View file

@ -236,6 +236,8 @@ pub struct Post {
pub likes: isize,
pub dislikes: isize,
pub comment_count: usize,
/// IDs of all uploads linked to this post.
pub uploads: Vec<usize>,
}
impl Post {
@ -257,6 +259,7 @@ impl Post {
likes: 0,
dislikes: 0,
comment_count: 0,
uploads: Vec::new(),
}
}

2
sql_changes/posts_uploads.sql Normal file
View file

@ -0,0 +1,2 @@
ALTER TABLE posts
ADD COLUMN uploads TEXT NOT NULL DEFAULT '[]';