다중 파일업로드를 위한 파일 인풋 map 함수 순회하고 중간인덱스의 파일인풋 삭제시, 화면에선 담겼던 파일중 마지막 파일명이 담긴 인풋만 삭제됩니다.

Question

create, create2 모드는 글 신규 작성 모드입니다. 글 신규작성 모드에서다중 파일업로드를 위한 파일 인풋이 map 함수로 순회되어 렌더링되고 있습니다.파일 인풋을 여러개 생성하고 각각의 파일인풋에 파일을 담아놓고, 중간 인덱스에 해당하는 인풋 삭제시, 담겼던 파일중, [중간이 아니라 마지막 파일명이 담긴 인풋만 삭제됩니다.] 하지만 글 작성을 누르면 의도한대로 파일들이 중간 인덱스의 파일이 삭제된 채로 저장된것을 확인할 수 있습니다. 글 작성 화면에서 파일명이 담긴 파일인풋을, 중간인덱스에 해당하는 삭제된 인덱스와 맞춰서 렌더링 가능할까요? 귀한 의견을 여쭙습니다 ㅠㅠimport './Request.css'; import BoardService from './BoardService.js'; import React, { Component } from 'react'; import { Link } from 'react-router-dom'; import { PItemsContext } from './PItemsContext'; import prevArwW from '../image/prev-arw-w.png'; class RequestWriteComponent extends Component { static contextType = PItemsContext; constructor(props) { super(props); let location2 = (window.location.pathname).toString(); let no = location2.replace('/request-write', '').replace('/', ''); //const storedFileInputs = localStorage.getItem('fileInputs'); //const fileInputs = storedFileInputs? JSON.parse(storedFileInputs) : []; if (no === "create") { this.state = { board_number: '', title: '', name: '', content: '', // Initialize content with an empty string phone: '', company: '', mail: '', created_time: '', updated_time: '', view_count: '', password: '', isPassword: false, isCreate: no.includes('create'), fileInputs: [], existingFiles: [], deletedFiles: [], no:"create" } localStorage.setItem('fileInputs', JSON.stringify('')); } else if (no === "create2") { this.state = { board_number: '', title: '', name: '', content: '', // Initialize content with quotation details phone: '', company: '', mail: '', created_time: '', updated_time: '', view_count: '', password: '', isPassword: false, isCreate: no.includes('create'), fileInputs: [], existingFiles: [], deletedFiles: [], no:"create2" } localStorage.setItem('fileInputs', JSON.stringify('')); }else { this.state = { board_number: no, title: '', name: '', content: '', // Initialize content with an empty string phone: '', company: '', mail: '', created_time: '', updated_time: '', view_count: '', password: '', isPassword: false, isCreate: no.includes('create'), fileInputs: [], existingFiles: [], deletedFiles: [] } } } componentDidUpdate(prevProps) { if (prevProps.match!== this.props.match && this.state.no === "create") { this.resetForm(); } } changePasswordHandler = (event) => { this.setState({password: event.target.value}); } changeTitleHandler = (event) => { this.setState({title: event.target.value}); } changeNameHandler = (event) => { this.setState({name: event.target.value}); } changeCompanyHandler = (event) => { this.setState({company: event.target.value}); } changePhoneHandler = (event) => { this.setState({phone: event.target.value}); } changeMailHandler = (event) => { this.setState({mail: event.target.value}); } createBoard = async (event) => { event.preventDefault(); const location2 = (window.location.pathname).toString(); const no = location2.replace('/request-write/', ''); if(no.includes('board_subject')){ no = no.split("?")[0]; } if(no.includes('create')) { let formData = new FormData(); formData.append('board', JSON.stringify({ board_number: this.state.board_number, title: this.state.title, name: this.state.name, content: this.state.content, phone: this.state.phone, company: this.state.company, mail: this.state.mail, created_time: this.state.created_time, updated_time: this.state.updated_time, view_count: this.state.view_count, password: this.state.password })); // Append each file input to formData this.state.fileInputs && this.state.fileInputs.forEach((input, index) => { if(input.files) { input.files.forEach((file, fileIndex) => { formData.append('files', file); }); } }); // Append existing files to formData this.state.existingFiles && this.state.existingFiles.forEach((file, index) => { if(file instanceof Blob) { // Check if the file is a Blob object formData.append('existing_files', file); } }); try { const response = await BoardService.createBoard(formData); console.log(response.data); if (response.data === "isDuplicate") { alert("중복된 파일명입니다."); } else { window.location.href='/request-list'; } } catch (error) { console.error("Error submitting board:", error); } } else { let formData = new FormData(); formData.append('board', JSON.stringify({ board_number: this.state.board_number, title: this.state.title, name: this.state.name, content: this.state.content, phone: this.state.phone, company: this.state.company, mail: this.state.mail, created_time: this.state.created_time, updated_time: this.state.updated_time, view_count: this.state.view_count, password: this.state.password })); // Append existing files to formData this.state.existingFiles.filter((_, index) =>!this.state.deletedFiles.includes(index)).forEach((file, index) => { if(file instanceof Blob) { // Check if the file is a Blob object formData.append('existing_files', file); } }); // Append each file input to formData this.state.fileInputs.filter((_, index) =>!this.state.deletedFiles.includes(index)).forEach((input, index) => { if(input.files) { input.files.forEach((file, fileIndex) => { formData.append('files', file); }); } }); try { const response = await BoardService.updateBoard(this.state.board_number, formData); console.log(response.data); if (response.data === "isDuplicate") { alert("중복된 파일명입니다."); } else { window.location.href='/request-list'; } } catch (error) { console.error("Error submitting board:", error); } try { await BoardService.removeMultipleFileEntries(this.state.board_number, this.state.deletedFiles); } catch (error) { console.error("Error removing multiple file entries:", error); // Handle error appropriately, possibly aborting the board update process } } } componentDidMount() { const { PItems, totalPrice } = this.context; let PItemsText = PItems.map(item => `${item.title}: ${item.price}`).join(' '); let contentWithQuotation = PItemsText.length > 0? (PItemsText + ' 합계:' + totalPrice.toString().replace(/\B(? { let board = res.data; if(board.files && board.files.charAt(0) == ","){ board.files.substring(1); } const filesArray = board.files? board.files.split(',').map(name => ({ fileName: name })) : []; console.log(filesArray); /*if (filesArray[0]?.fileName == "") { filesArray.shift(); }*/ // Check if fileInputs and existingFiles are empty before setting them this.setState(prevState => ({ title: board.title, name: board.name, content: board.content, phone: board.phone, company: board.company, mail: board.mail, created_time: board.created_time, updated_time: board.updated_time, view_count: board.view_count, password: board.password, isPassword:!!board.password, fileInputs: filesArray, existingFiles: filesArray }), () => { //localStorage.setItem('fileInputs', JSON.stringify(this.state.fileInputs)); }); }).catch(error => { console.error("Error fetching board data:", error); }); } } addFileInput = (event, index) => { const files = Array.from(event.target.files); if (files.length > 0) { // Generate a random alphanumeric string const generateRandomString = () => { const length = 10; const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; let result = ''; for (let i = 0; i < length; i++) { result += chars.charAt(Math.floor(Math.random() * chars.length)); } return result; }; // Modify the file names to include the random string const modifiedFiles = files.map(file => { const ext = file.name.split('.').pop(); const baseName = file.name.substring(0, file.name.lastIndexOf('.')); const newName = `${generateRandomString()}_${baseName}.${ext}`; return new File([file], newName, { type: file.type }); }); this.setState(prevState => ({ fileInputs: [ ...prevState.fileInputs.slice(0, index), { files: modifiedFiles }, ...prevState.fileInputs.slice(index + 1) ], existingFiles: [ ...prevState.existingFiles.slice(0, index), { files: modifiedFiles }, ...prevState.existingFiles.slice(index + 1) ] }), () => { //localStorage.setItem('fileInputs', JSON.stringify(this.state.fileInputs)); }); } }; addFileInputPlus = () => { this.setState(prevState => ({ fileInputs: [...prevState.fileInputs, { files: [] }] //existingFiles: [...prevState.existingFiles, { files: [] }] }), () => { //localStorage.setItem('fileInputs', JSON.stringify(this.state.fileInputs)); }); }; removeFileInput = (index) => { if((this.state.no == 'create') && (this.state.no == 'create2')) { this.setState(prevState => { // Create a copy of the current fileInputs array const updatedFileInputs = [...prevState.fileInputs]; // Remove the item at the given index from the updatedFileInputs array console.log("get prev fileInputs:",prevState.fileInputs); console.log("get index:",index); updatedFileInputs.splice(index, 1); console.log("updatedFileInputs:",updatedFileInputs); // Return the updated state return { fileInputs: updatedFileInputs, // No changes needed for existingFiles or deletedFiles in this case }; }, () => { // Optionally, log the updated state for debugging purposes console.log("get2 fileInputs:",this.state.fileInputs); }); } else { this.setState(prevState => { // Remove the item at the given index from both fileInputs and existingFiles arrays const updatedFileInputs = prevState.fileInputs.filter((_, i) => i!== index); const updatedExistingFiles = prevState.existingFiles.filter((_, i) => i!== index); // Extract the name of the deleted file and add it to the deletedFiles array // Assuming prevState.fileInputs[index] is an object with a fileName property const deletedFileName = prevState.fileInputs[index].fileName; console.log("prevState.fileInputs[index]:", prevState.fileInputs[index]); console.log("Deleted file name:", deletedFileName); return { fileInputs: updatedFileInputs, existingFiles: updatedExistingFiles, deletedFiles: [...prevState.deletedFiles, deletedFileName] }; }, () => { console.log(this.state.deletedFiles); // Debugging: Log the updated state }); } }; changeContentHandler = (event) => { this.setState({content: event.target.value}); } resetForm = () => { this.setState({ board_number: '', title: '', name: '', phone: '', company: '', mail: '', content: '', created_time: '', updated_time: '', view_count: '', password: '', isPassword: false, agreePrivacy: false }); } deleteView = async function (e) { if(!isNaN(this.state.board_number)){ if(window.confirm("정말로 글을 삭제하시겠습니까? 삭제된 글은 복구 할 수 없습니다.")) { BoardService.deleteBoard(this.state.board_number).then( res => { console.log("delete result => "+ JSON.stringify(res)); if (res.status == 200) { // 글 삭제 성공 시 처리 로직 window.location.href='/request-list'; } else { alert("글 삭제가 실패했습니다."); } }); } else { // "취소" 버튼을 누른 경우 처리 로직 alert("글 삭제가 취소되었습니다."); } } } changeCheckboxHandler = (event) => { // Update the checkbox state based on its current value this.setState({agreePrivacy: event.target.checked}); }; changePasswordCheckboxHandler = (event) => { // Update the checkbox state based on its current value this.setState({isPassword: event.target.checked}); }; render() { const { PItems, totalPrice } = this.context; let PItemsText = PItems.map(item => `${item.title}: ${item.price}`).join(' '); let contentWithQuotation = PItemsText.length > 0? (PItemsText + ' 합계: ' + totalPrice.toString().replace(/\B(? { event.preventDefault(); // event 객체를 인자로 받아 preventDefault 메소드를 호출합니다. if (!this.state.title.trim()) { alert("제목을 입력해주세요."); return; } if (!this.state.name.trim()) { alert("이름을 입력해주세요."); return; } if (!this.state.content.trim()) { alert("내용을 입력해주세요."); return; } if (!this.state.agreePrivacy) { alert("개인정보 수집 동의를 체크해주세요."); return; // Exit the function if the checkbox is not checked } if (!this.state.password.trim()) { alert("비밀번호를 입력해주세요."); return; } const phoneRegex = /^\d{2,3}-\d{3,4}-\d{4}$/; if (!phoneRegex.test(this.state.phone)) { alert("올바른 연락처를 입력해주세요."); return; } const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!emailRegex.test(this.state.mail)) { alert("올바른 이메일 주소를 입력해주세요."); return; } this.createBoard(event); // event 객체를 createBoard 함수에 전달합니다. }; console.log(this.state.board_number+"1111111111111111111111111111"); let boardData = this.state.board_number? this.state : {}; return (

Contact
이전으로

{this.state.fileInputs && this.state.fileInputs.map((input, index) => ( ))}

글번호	{boardData.board_number}
작성일	{boardData.created_time && boardData.created_time.replace(/T/g, ' ')}
조회수	{boardData.view_count}
비밀글
비밀번호
*제목
*이름
회사명
*연락처
*이메일
개인정보 수집 동의
*내용	',' ')} value={boardData.content &&boardData.content.replaceAll('<br>',' ')} onChange={this.changeContentHandler} required>
File {index + 1}	this.addFileInput(event, index)} multiple /> {(!this.state.isCreate && input.fileName)? {input.fileName} : (input.file && {input.file.name})}
파일추가

); } } export default RequestWriteComponent;

다중 파일업로드를 위한 파일 인풋 map 함수 순회하고 중간인덱스의 파일인풋 삭제시, 화면에선 담겼던 파일중 마지막 파일명이 담긴 인풋만 삭제됩니다.

0개의 답변

Q&A 목록