# file upload

geniee1220

Project Restoration - 댕근이다옹(DangGeuneDaong) 프로젝트에서 업로드 기능을 구현하면서 파일과 함께 JSON 데이터를 함께 보내야 할 상황을 마주하게 되었습니다. API 명세서에서 요구한 내용은 다음과 같습니다. body에 File을 리스트에 담아 보내고, Content-type은 multipart/form-data로 지정할 것 body에 JSON 데이터를 오브젝트에 담아 보내고, Content-type은 application/json으로 지정할 것 평소 서버에 데이터를 보낼 때 HTTP의 헤더에 일반적인 데이터(JSON 객체)를 보낼 때는 "Content-Type: application/json"을, 파일을 전송할 때는 "Content-T

inmo

What is File Upload? 업로드 되는 파일의 검증이 미흡해 발생하며 공격자가 임의의 파일을 업로드 할 수 있는 공격이다. 서버에서 지정한 파일이 아닌 공격자가 원하는 파일을 업로드하는 것이 핵심이다. 어떤 공격이 가능할까? 파일 크기와 개수를 제한하지 않는 경우 → 서버의 연결 자원과 디스크 자원을 고갈 시키는 DOS 공격으로 정상적인 서비스를 방해한다. 피싱 Deface (index.html 변조) XSS (악성 스크립트로 악성코드 유포) Server Side Script (Web Shell) Web Shell 웹 서버에서 실행할 수 있는 파일이며 실행 가능해야 한다. 어떻게 실행하는가? 웹 브라우저로 업로드한 파일을 요청한다. 그리고 파일이 어느 경로에 위치하는지 알아야 한다. 웹 쉘이 실행되면 해야 할 일! 소스 코드 탈취 소스 코드

sujin-create

이번주는 일주일동안 GCS를 spring에 연동하고 사용할 api를 만들어봤는데, 알고 시작했으면 좋았을 꿀팁들에 대해서 공유하려고 합니다.!!! 특히 graphql을 사용하며 postman으로 협업 혹은 test를 진행하고 있는 분들에게 도움이 될 거라고 믿습니다!! (사실 조회수는 0에 가깝지만,,,공유는 합니다^^) 0. Intro 회사에서 CKeditor를 사용하는데 이때, CKeditor에서 image를 upload할 때 plugin은 file loader 객체를 생성한다. upload adapter를 이용해서 파일을 읽어서 서버에 업로드를 해주는데 이때 이 서버!! 어떻게 해야할까? CKeditor 유로버전을 사용하면 storage를 제공한다. 그러나 너 cloud storage service를 사용하기로한다. 회사에서는 google cloud platform을 사용하고 있기에 GCS를 사용하기로 했다! 그러면 나는 무엇을하

neos960518

파일 업로드 일반적으로 파일 업로드를 할 때에는 multipart/form-data 형식으로 업로드를 진행하도록 API를 디자인하게 된다. 이때, 일반적인 파일들은 파일 크기가 그렇게 크지 않겠지만, 영상 파일과 같이 용량이 GB 단위가 되는 경우에는 단순히 한번의 요청으로 전체 파일을 올리는 것이 매우 어려워지게 된다. 다음 코드는 multipart/form-data 형식으로 데이터를 업로드하기 위한 API를 Flask와 flask-restx로 구현한 간단한 예제이다: 위의 코드에서는 "video"라는 key 값으로 업로드된 파일을 검색한 뒤, 해당 키값이 없으면 400 에러를 반환한다. 그 후, savevideoinfo 라는 커스텀 함수(데이터베이스에 업로드된 파일에 대한 정보를 저장하는 함수)를 호출한 뒤, Exception 없이 정상적으로 처리가 되면 200 코드를 리턴한다. 위의 코드로 15MB 정도 되는 파일을 업로드할 때에는 큰 문제가 없이 여러명의

sheoae12

FormData XMLHttpRequest 전송을 위하여 설계된 특수한 객체 형태 문자열화 하려면 특정한 조작이 필요 key, value 형식으로 되어 있음 header의 content-type을 multipart/form-data 로 반드시 설정해주어야 함 > file input 받기 1) form 태그(다중 업로드 가능) 2) 받아온 파일 데이터 보관 3) 서버로 전송

from_numpy

시작하기에 앞서 이번 포스팅에선 "nest에서 이미지(혹은 파일)를 업로드 시키는 방법"에 대해 간단히 알아보고자 하며, 구현하는데 있어 부딪히게 되었던 몇가지 상황들을 함께 언급해보고 코드를 개선해보고자 한다. 기록용으로나, 정보 공유용으로나 의미있지 않을까 싶어 간단히 작성해보고자 한다. 💥 Multer와 Interceptor를 통한 파일 업로딩 타이틀을 위와 같이 정하긴 하였지만, nest에서 파일 업로딩을 처리하는 단계적인 방법에 대한 서술은 하지 않겠다. 필요한 라이브러리 설치 및 사용법 및 대략적 방법은 공식문서에서 알아볼 수 있다. NestJS _File upload ✔ 위는 공식문서에서 제시하는 "Basic example" 이다. 위 예시는 정확히 말하면 "단일 파일 업로드 (Single fi

phraqe

이번에는 유저의 프로필 사진을 저장하기 위한 UserFile엔티티 관련 로직을 알아보도록 하자. UserFile 파일업로드 >먼저, 유저의 프로필사진을 저장하기 위한 폴더를 Sekkison 폴더 바로 밑에 만들어 주었다. 이후 application.properties 세팅을 해 준다. ( 게시글의 처음부터 따라왔다면 되어 있을 것이다.) > >>#### application.properties 업로드 파일의 경로를 upload로 하고, 파일의 최대 크기를 5MB로 지정하였다. > >>#### UserFileController 컨트롤러에서는 userFiles/upload라는 요청에 프로필 업로드 함수를 실행시킨다. >> userId와 MultipartFile을 받

bongbong2da

❌ 증상 Image Picker로 고른 파일을 업로드 하려고 했으나, iOS는 정상적으로 API를 호출하는 반면 Android는 API 호출 전에 예외가 발생 (Status Code 0) 🕵️‍♂️ 과정 Image Picker에서 넘어온 해당 파일의 경로는 모두 file://{path}로 받음. Metro 콘솔 상 특별히 찍히는 로그가 없어, 플리퍼로 네이티브 레벨 로그를 확인. 확인 결과 위 로그가 찍혀있는 것을 확인하였고, 헤더에가 제대로 들어가 있는지 확인 💻 해결 바이너리 코드(base64)가 폼 데이터 형태로 API에 전송될 경우에 헤더가 로 할당되어있어야 한다. 현재 다루는 프로젝트에서는 Axios를 싱글톤 형태로 사용하기 때문에 body가 form data일 경우 로직을 추가하여 헤더를 정상적으로 할당해주었다.

neos960518

tl;dr: 이 에러는 플라스크에서 request body의 데이터에 대해 미리 정의한 key로 접근하는데에 실패하면서 발생하는 에러이다. "The browser (or proxy) sent a request that this server could not understand" Flask를 사용해서 파일 업로드 및 data form을 받는 웹 서버를 구현할 때에 가끔씩 다음과 같은 메세지를 리턴 받는 경우가 발생한다: 서버 로그를 확인해보면 다음과 같은 내용이 있을 것이다: 예외 이름에서 알 수 있듯이, 이 에러가 발생하는 주된 이유는 key와 관련된 것으로, 일반적으로 request.form나 request.files로 부터 미리 정의한 key를 사용해서 파일 혹은 데이터에 접근하려다 실패하였을 때 발생하게 된다. 보통 플라스크 서버에서는 이러한 경우에 어떤 key에 대해서 에러가 발생하였는지 로그를 남기기에 이를 확인하는 것이 최선이다. 예시

pkyh2

Vue js에서 이미지 파일을 선택 했을 때 미리보기 하는 방법 1. input tag(type="file") 구현 input tag를 file type으로 생성하면 파일선택 이라는 버튼이 생성된다. 이 버튼을 없애고 업로드 아이콘을 선택하면 파일 선택창이 나오도록 구현 하였다. 위의 코드와 같이 file type의 `에 id="upload-image" id값을 주고, 에 결합 될 수 있도록 id값과 똑같이 for="upload-image"로 설정해 준다. 는 hidden` 옵션으로 숨긴다. 그리고 ` 안에 `테그를 넣어 이미지를 선택하면, 파일 선택창이 나오게 된다. 2. @change 이벤트 업로드 하고자 하는 이

inmo

path-traversal-secret.jpg 파일을 찾아라! show random cat picture버튼을 클릭하면 고양이 사진이 변경된다. 고양이 사진이 변경되는 과정을 버프스위트로 인터셉트 한다. location 부분의 ?id=6.png 부분이 계속 변경된다. 따라서 해당 파라미터 값이 변경되는 것을 알 수 있다. 위 사진과 같이 해당 파라미터를 ?id=6으로

lee_yesol421

오늘 한 일 프로젝트 : 검토의견 ppt 완성해서 메일로 송부 및 연락 완료 뉴스레터 : 임원 인터뷰 질문 구성 사이드 프로젝트 : 게시물 생성, 수정 시 업로드 이미지 미리보기 구현 완료 업로드 이미지 미리보기 기존 문제 : input-file의 버튼을 클릭해서 업로드 할 이미지를 고른 상태에서 미리보기 이미지 기능을 제공하지 않았다. 특히 게시물 수정 시 기존 이미지가 있을 때 새로운 이미지를 선택하면 선택한 이미지를 보여주어야 하는데 그대로 기존 이미지만 보여줄 수 있었다. 기능 구현 : 게시물 생성, 수정 시 input에서 선택한 파일 이미지를 바로 보여준다. 기존 파일 이미지가 있을 경우, 해당 이미지를 삭제한다. 오류: ajax를 사용해야 하는가? 처음에는 페이지 이동 없이 보여주어야 하니 ajax로 구현해야 되는건가 싶었다. 마침 팀원 중 ajax를 사용하는 분이 있어 그 분의 코드를 참고하여 ajax로 임시 파일을 저장하고 res

lee_yesol421

오늘 한 일 인프런 스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 파일 업로드 부분 수강 사이드 프로젝트에 파일 업로드, 다운로드 구현 file-upload-download-homey file-upload-download-practice 이클립스 Slf4j log 에러처리 > Slf4j log cannot be resolved 전자정부프레임워크에서 lombok 라이브러리가 제대로 설치되지 않아서 생기는 문제였다. 마침 나도 블로그와 같은 전자정부프레임워크 버전을 사용하고 있어서 쉽게

bagt

파일이 전송되는 방식 는 일반적으로 HTML Form을 통해 이루어진다. HTML Form 전송 방식에는 두 가지가 있다. 1. 파일을 업로드하려면 문자가 아니라 binary 데이터를 전송해야 하는데, 문자를 전송하는 이 방식으로는 파일 전송이 어렵다. 이 문제를 해결하기 위해 HTTP는 multipart/form-data 방식을 제공한다. 2. 이 방식은 다른 종류의 여러 파일과 폼의 내용(문자)을 함께 전송할 수 있다. 이 방식을 사용하려면 Form 태그에 를 지정해줘야 한다. > ![](https://velog.velcdn.com/images/bagt/post/20472dcf-12f0-4a1a-9f76-b2204fbaefa6/ima

gin2808

이미지를 업로드 하면 이미지 View가 보이는 기능을 구현했다. 필요한것 > input type="file" URL.createObjectURL() useState() Step 1 > ref는 업로드 button을 따로 두어 input 핸들링을 하기위해 써주었다. 우선 input태그의 type을 file로 두어 업로드 하는 input을 만들어 준다. multiple 속성을 주어 다중 업로드가 가능하도록 한다. 디자인을 위한 div 태그를 감싸준다. 이 div에는 onChange 이벤트를 주어 이벤트가 발생할시 실행될 함수를 넣어준다. Step 2 > useState에 저장 div 태그에 onChange 이벤트가 발생할시 실행되는 storeImage함수를 만들어준다

guo32

form에 파일 업로드 부분을 추가하고 테스트하는 과정에서 400 에러가 발생했다. 검색해보니 dto에서 선언한 변수(파일 이름 저장)의 이름과 form 내 input 태그의 name 속성 값이 같기 때문이라고 한다. 참고한 포스트 파일 업로드 시 400 에러 해당 포스트를 참고하여 input 부분의 name 값을 dto와 다른 값으로 수정해주니 정상 작동하였다.

j1h00

Project Note / 2022-02-19 intro 이 글에선, 아래 두 과정에 대해 작성해보려고 한다. (React + Node Express) input tag 로 이미지 파일 등의 파일을 입력받아, 이를 node 백엔드 서버에 전송한다. node 에선 "multer" 라는 middleware 를 사용하여 파일 객체를 받아, 이를 서버 디렉터리에 파일로 저장한다. > > node multer middleware > Multer is a node.js middleware for handling multipart/form-data, which is primarily used for uploading files. multer 는 요청으로 받은 multipart/form-data 형식의 데이터를 가공하여, 서버에 "파일"로 저장

ronglong

.png)

rudwnd33

구글에 검색했을 때 한글로 된 명확한 해결 방법이 나오지 않는 것 같아서 작성해보았습니다. 😎 EB로 배포한 프로젝트에 이미지 파일을 업로드 할 때 아래와 같은 에러가 뜨는 경우가 있었다. 내가 이미지 업로드 했을 때는 분명 정상적으로 되는데 다른 분이 업로드 했을 때는 정상적으로 되지 않았다. 그래서 컴퓨터 환경마다 다른가? 생각했는데 혹시나 해서 용량이 큰 이미지를 업로드 해봤다. 업로드가 안 된다... 다른 분이 용량이 큰 이미지를 업로드 하려고 하셨나 보다. 아래와 같은 에러가 웹 브라우저 콘솔에 떴다. > POST https://api.' from origin 'https://www. **`HTT