diff --git a/src/lib/components/crear-post.svelte b/src/lib/components/crear-post.svelte index 0078df4..fd2aaed 100644 --- a/src/lib/components/crear-post.svelte +++ b/src/lib/components/crear-post.svelte @@ -5,21 +5,17 @@ import InputGroup from './ui/input-group/input-group.svelte'; import ArrowUpIcon from '@lucide/svelte/icons/arrow-up'; import Paperclip from '@lucide/svelte/icons/paperclip'; + import Trash from '@lucide/svelte/icons/trash-2'; import Loader2Icon from '@lucide/svelte/icons/loader-2'; import Kbd from './ui/kbd/kbd.svelte'; - - import { apiBase } from '@/stores/url'; - import { sesionStore } from '@/stores/usuario'; - import type { CreatePostDto } from '../../types'; - import { addPost } from '@/stores/posts'; import { Tooltip } from './ui/tooltip'; import TooltipContent from './ui/tooltip/tooltip-content.svelte'; import TooltipTrigger from './ui/tooltip/tooltip-trigger.svelte'; import { publicarPost } from '@/hooks/publicarPost'; - import Button from './ui/button/button.svelte'; - import InputGroupInput from './ui/input-group/input-group-input.svelte'; + import { filtrarImagen } from '@/utils'; let mensaje = $state(''); + let imagen: File | null = $state(null); let cargando = $state(false); let mostrarError = $state(''); @@ -29,7 +25,7 @@ cargando = true; const formData = new FormData(); formData.append('content', mensaje); - // formData.append('imageUrl', ''); + formData.append('imagen', imagen); // formData.append('parentPostId', ''); mostrarError = await publicarPost(formData); if (mostrarError == '') mensaje = ''; @@ -41,12 +37,29 @@ handlePost(e); } } + + function handleDrop(e: Event) { + const target = e.target as HTMLInputElement; + const file = target?.files?.[0]; + imagen = filtrarImagen(file); + } + function seleccionarImagen() { + const input = document.createElement('input'); + input.type = 'file'; + input.accept = '.png,.jpg,.jpeg,.gif,.webp'; + input.onchange = () => { + const file = input.files?.[0]; + imagen = filtrarImagen(file); + }; + input.click(); + }
handlePost(e)}>
- + {#if imagen} + + {/if} + diff --git a/src/lib/utils.ts b/src/lib/utils.ts index f92bfcb..c9f5098 100644 --- a/src/lib/utils.ts +++ b/src/lib/utils.ts @@ -11,3 +11,14 @@ export type WithoutChild = T extends { child?: any } ? Omit : T; export type WithoutChildren = T extends { children?: any } ? Omit : T; export type WithoutChildrenOrChild = WithoutChildren>; export type WithElementRef = T & { ref?: U | null }; + +export function filtrarImagen(file) { + if (file) { + const allowed = ['image/png', 'image/jpg', 'image/jpeg', 'image/gif', 'image/webp']; + if (allowed.includes(file.type)) { + return file; + } else{ + return null; + } + } +}