mirrors/VogelSocialMedia
1
0
Fork 0
mirror of https://github.com/bubblecup-12/VogelSocialMedia.git synced 2025-07-06 15:18:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fixed one Image problem

Browse source
This commit is contained in:
Ilay Eble 2025-07-01 12:32:39 +02:00 • committed by Luisa Bellitto
parent 14829caf7c
commit 095cbafb64
2 changed files with 10327 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

15
code/frontend/src/pages/PostCreation.tsx
View file

@ -9,7 +9,7 @@ import ButtonPrimary from "../components/buttons/buttonRotkehlchen/ButtonRotkehl
import api from "../api/axios"; import api from "../api/axios";
import { useAuth } from "../api/Auth"; import { useAuth } from "../api/Auth";
import {Box,Card,CardMedia,CardActionArea,IconButton} from '@mui/material'; import {Box,Card,CardMedia,CardActionArea,IconButton, Typography} from '@mui/material';
import CloseIcon from '@mui/icons-material/Close'; import CloseIcon from '@mui/icons-material/Close';
import { createTheme, ThemeProvider } from '@mui/material/styles'; import { createTheme, ThemeProvider } from '@mui/material/styles';
@ -35,7 +35,7 @@ function PostCreation(){
const [data, setData] = useState<ImageItem[]>([]); const [data, setData] = useState<ImageItem[]>([]);
const navigate = useNavigate(); const navigate = useNavigate();
const [fileList,setFileList] = useState<FileList|null>(null); const [fileList,setFileList] = useState<File[]>([]);
const inputFile = useRef<HTMLInputElement | null>(null); const inputFile = useRef<HTMLInputElement | null>(null);
useEffect(() => { useEffect(() => {
@ -66,18 +66,20 @@ function PostCreation(){
const handleImageUpload = (event: React.ChangeEvent<HTMLInputElement>) => { const handleImageUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
const files = event.target.files; const files = event.target.files;
if (files && files.length > 0) { if (files && files.length > 0) {
const fileArr = Array.from(files);
const newItems: ImageItem[] = Array.from(files).map((file) => ({ const newItems: ImageItem[] = Array.from(files).map((file) => ({
src: URL.createObjectURL(file), src: URL.createObjectURL(file),
title: file.name, title: file.name,
} }
)); ));
const lastImageUrl = newItems[newItems.length - 1].src; const lastImageUrl = newItems[newItems.length - 1].src;
setData((prev) => [...prev, ...newItems]); setData((prev) => [...prev, ...newItems]);
setSelectedImage(lastImageUrl); setSelectedImage(lastImageUrl);
setFileList(prev => [...prev, ...fileArr]);
} }
setFileList(files);
}; };
const onEmptyImgClick = () =>{ const onEmptyImgClick = () =>{
if(inputFile.current){ if(inputFile.current){
@ -136,7 +138,7 @@ function PostCreation(){
</label>} </label>}
</div> </div>
<div className="create-post-desc"> <div className="create-post-desc">
<h2>Description</h2> <h2>Description*</h2>
<textarea className="create-post-description" value={description} onChange={handleChange} required></textarea> <textarea className="create-post-description" value={description} onChange={handleChange} required></textarea>
</div> </div>
<Box <Box
@ -179,6 +181,7 @@ function PostCreation(){
onChange={handleImageUpload} onChange={handleImageUpload}
style={{ display: 'none' }} style={{ display: 'none' }}
ref={inputFile} ref={inputFile}
required
/> />
</label> </label>
</Card> </Card>
@ -258,7 +261,7 @@ function PostCreation(){
<ButtonPrimary style="secondary" label="Cancel" type="button" onClick={onCancel} ></ButtonPrimary> <ButtonPrimary style="secondary" label="Cancel" type="button" onClick={onCancel} ></ButtonPrimary>
<ButtonPrimary style="primary" label="Post" type="submit" ></ButtonPrimary> <ButtonPrimary style="primary" label="Post" type="submit" ></ButtonPrimary>
</div> </div>
</div> </div>
</form> </form>
</div> </div>
</div> </div>

10318
code/frontend/yarn.lock Normal file
View file

File diff suppressed because it is too large Load diff