feat(be): implement image upload #1514

Jaehyeon1020 · 2024-02-27T04:00:07Z

Description

Closes #1495

이미지 업로드 기능을 구현합니다.
Problem description에 이미지를 삽입하는 용도로 사용이 가능합니다.

Additional context

이미지의 최대 크기는 5MB입니다.
src 속성에 업로드된 이미지의 url이 담겨 반환됩니다. img 태그의 src 속성에 넣어 이미지 삽입 기능의 구현이 가능합니다.

참고 스크린샷

Before submitting the PR, please make sure you do the following

Read the Contributing Guidelines
Read the Contributing Guidelines and follow the Commit Convention
Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
Ideally, include relevant tests that fail without this PR but pass with it.

vercel · 2024-02-27T04:00:15Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
codedang	✅ Ready (Inspect)	Visit Preview	May 29, 2024 1:23am

collection/admin/Problem/Upload Image/Succeed.bru

backend/apps/admin/src/problem/model/image.output.ts

cho-to · 2024-02-29T09:19:20Z

균서님이랑 저랑 branch 전환해서 이미지 파일 바꿔서 시도했는데 아래 에러가 공통적으로 떠서.. 혹시 확인가능하실까요?

{
  "errors": [
    {
      "message": "Cannot return null for non-nullable field Image.src.",
      "locations": [
        {
          "line": 1,
          "column": 64
        }
      ],
      "path": [
        "uploadImage",
        "src"
      ],
      "extensions": {
        "code": "INTERNAL_SERVER_ERROR",
        "stacktrace": [
          "Error: Cannot return null for non-nullable field Image.src.",
          "    at completeValue (/workspace/node_modules/.pnpm/graphql@16.8.1/node_modules/graphql/execution/execute.js:605:13)",
          "    at executeField (/workspace/node_modules/.pnpm/graphql@16.8.1/node_modules/graphql/execution/execute.js:500:19)",
          "    at executeFields (/workspace/node_modules/.pnpm/graphql@16.8.1/node_modules/graphql/execution/execute.js:414:22)",
          "    at completeObjectValue (/workspace/node_modules/.pnpm/graphql@16.8.1/node_modules/graphql/execution/execute.js:925:10)",
          "    at completeValue (/workspace/node_modules/.pnpm/graphql@16.8.1/node_modules/graphql/execution/execute.js:646:12)",
          "    at completeValue (/workspace/node_modules/.pnpm/graphql@16.8.1/node_modules/graphql/execution/execute.js:595:23)",
          "    at /workspace/node_modules/.pnpm/graphql@16.8.1/node_modules/graphql/execution/execute.js:497:9",
          "    at processTicksAndRejections (node:internal/process/task_queues:95:5)",
          "    at execute (/workspace/node_modules/.pnpm/@apollo+server@4.10.0_graphql@16.8.1/node_modules/@apollo/server/src/requestPipeline.ts:547:31)",
          "    at processGraphQLRequest (/workspace/node_modules/.pnpm/@apollo+server@4.10.0_graphql@16.8.1/node_modules/@apollo/server/src/requestPipeline.ts:433:26)",
          "    at internalExecuteOperation (/workspace/node_modules/.pnpm/@apollo+server@4.10.0_graphql@16.8.1/node_modules/@apollo/server/src/ApolloServer.ts:1313:12)",
          "    at runHttpQuery (/workspace/node_modules/.pnpm/@apollo+server@4.10.0_graphql@16.8.1/node_modules/@apollo/server/src/runHttpQuery.ts:232:27)",
          "    at runPotentiallyBatchedHttpQuery (/workspace/node_modules/.pnpm/@apollo+server@4.10.0_graphql@16.8.1/node_modules/@apollo/server/src/httpBatching.ts:85:12)",
          "    at ApolloServer.executeHTTPGraphQLRequest (/workspace/node_modules/.pnpm/@apollo+server@4.10.0_graphql@16.8.1/node_modules/@apollo/server/src/ApolloServer.ts:1087:14)"
        ]
      }
    }
  ],
  "data": null
}

Jaehyeon1020 · 2024-02-29T10:42:50Z

균서님이랑 저랑 branch 전환해서 이미지 파일 바꿔서 시도했는데 아래 에러가 공통적으로 떠서.. 혹시 확인가능하실까요?

{
  "errors": [
    {
      "message": "Cannot return null for non-nullable field Image.src.",
      "locations": [
        {
          "line": 1,
          "column": 64
        }
      ],
      "path": [
        "uploadImage",
        "src"
      ],
      "extensions": {
        "code": "INTERNAL_SERVER_ERROR",
        "stacktrace": [
          "Error: Cannot return null for non-nullable field Image.src.",
          "    at completeValue (/workspace/node_modules/.pnpm/graphql@16.8.1/node_modules/graphql/execution/execute.js:605:13)",
          "    at executeField (/workspace/node_modules/.pnpm/graphql@16.8.1/node_modules/graphql/execution/execute.js:500:19)",
          "    at executeFields (/workspace/node_modules/.pnpm/graphql@16.8.1/node_modules/graphql/execution/execute.js:414:22)",
          "    at completeObjectValue (/workspace/node_modules/.pnpm/graphql@16.8.1/node_modules/graphql/execution/execute.js:925:10)",
          "    at completeValue (/workspace/node_modules/.pnpm/graphql@16.8.1/node_modules/graphql/execution/execute.js:646:12)",
          "    at completeValue (/workspace/node_modules/.pnpm/graphql@16.8.1/node_modules/graphql/execution/execute.js:595:23)",
          "    at /workspace/node_modules/.pnpm/graphql@16.8.1/node_modules/graphql/execution/execute.js:497:9",
          "    at processTicksAndRejections (node:internal/process/task_queues:95:5)",
          "    at execute (/workspace/node_modules/.pnpm/@apollo+server@4.10.0_graphql@16.8.1/node_modules/@apollo/server/src/requestPipeline.ts:547:31)",
          "    at processGraphQLRequest (/workspace/node_modules/.pnpm/@apollo+server@4.10.0_graphql@16.8.1/node_modules/@apollo/server/src/requestPipeline.ts:433:26)",
          "    at internalExecuteOperation (/workspace/node_modules/.pnpm/@apollo+server@4.10.0_graphql@16.8.1/node_modules/@apollo/server/src/ApolloServer.ts:1313:12)",
          "    at runHttpQuery (/workspace/node_modules/.pnpm/@apollo+server@4.10.0_graphql@16.8.1/node_modules/@apollo/server/src/runHttpQuery.ts:232:27)",
          "    at runPotentiallyBatchedHttpQuery (/workspace/node_modules/.pnpm/@apollo+server@4.10.0_graphql@16.8.1/node_modules/@apollo/server/src/httpBatching.ts:85:12)",
          "    at ApolloServer.executeHTTPGraphQLRequest (/workspace/node_modules/.pnpm/@apollo+server@4.10.0_graphql@16.8.1/node_modules/@apollo/server/src/ApolloServer.ts:1087:14)"
        ]
      }
    }
  ],
  "data": null
}

아마 일건님이 추가로 작업하신 내용과 관련해서 문제가 있을 것 같은데, 제가 아직 코드를 정리를 하지 못해서 확인 후 수정하고 나서 다시 알려드리겠습니다!

- 샘플 이미지 추가 - src, alt 반환하던 것에서 src만 반환하는 것으로 변경

github-actions · 2024-03-01T07:45:44Z

Images automagically compressed by Calibre's image-actions ✨

Compression reduced images by 25.2%, saving 19.63 KB.

Filename	Before	After	Improvement	Visual comparison
`backend/apps/admin/src/problem/mock/sample.png`	77.86 KB	58.24 KB	-25.2%	View diff

19 images did not require optimisation.

Jaehyeon1020 · 2024-03-01T07:52:36Z

@cho-to 오류 해결 되었습니다~

collection/admin/Problem/Upload Image/Succeed.bru

apps/backend/prisma/schema.prisma

.

apps/backend/apps/admin/src/problem/problem.service.ts

apps/backend/apps/admin/src/problem/problem.resolver.ts

* feat(be): implement image upload to S3 * docs(be): add upload image api docs * chore(be): modify image bucket baseurl * docs(be): add assert * chore(be): add alt property to return type of image-upload api * chore(infra): rename testcase to storage * feat(infra): add env for media bucket * chore(be): add sample image and modify return object - 샘플 이미지 추가 - src, alt 반환하던 것에서 src만 반환하는 것으로 변경 * Optimised images with calibre/image-actions * chore(be): add s3-media-provider to test code * chore(be): use relative path for sample image * chore(be): replace client with media-client * feat(be): add delete-image function * refactor: combine bucket setup scripts * fix(be): modify modify image size calculating logic - 5MB 초과 파일이 들어왔을 때도 계속해서 파일 사이즈를 계산하는 문제 수정 - 5MB 초과 시 파일 사이즈 계산 중지, 예외 던지도록 구현 * chore(be): modify filename to use uuid only * chore(be): remove duplicated import lines * chore(be): remove file extension * feat(be): add delete-image and improve image upload, delete logic * docs(be): add delete-image api docs * chore(be): parallelize deleting image logic * chore(be): parallelize image-delete api --------- Co-authored-by: k1g99 <idmatthew9546@gmail.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Jiyun Park <80032256+cho-to@users.noreply.github.com>

Jaehyeon1020 added 2 commits February 27, 2024 03:56

feat(be): implement image upload to S3

d5906cd

docs(be): add upload image api docs

3113831

Jaehyeon1020 self-assigned this Feb 27, 2024

Jaehyeon1020 added the ⛳️ team-backend label Feb 27, 2024

vercel bot deployed to Preview February 27, 2024 04:02 View deployment

Jaehyeon1020 added 2 commits February 27, 2024 04:03

chore(be): modify image bucket baseurl

3444125

docs(be): add assert

2088b0d

vercel bot deployed to Preview February 27, 2024 04:14 View deployment

chore(be): add alt property to return type of image-upload api

ec52997

vercel bot deployed to Preview February 28, 2024 13:17 View deployment

k1g99 added 2 commits February 29, 2024 05:41

chore(infra): rename testcase to storage

14aa19c

feat(infra): add env for media bucket

89ff0f7

vercel bot deployed to Preview February 29, 2024 05:52 View deployment

gyunseo self-requested a review February 29, 2024 05:55

gyunseo reviewed Feb 29, 2024

View reviewed changes

collection/admin/Problem/Upload Image/Succeed.bru Outdated Show resolved Hide resolved

cho-to reviewed Feb 29, 2024

View reviewed changes

backend/apps/admin/src/problem/model/image.output.ts Outdated Show resolved Hide resolved

chore(be): add sample image and modify return object

e611dd9

- 샘플 이미지 추가 - src, alt 반환하던 것에서 src만 반환하는 것으로 변경

github-actions bot and others added 2 commits March 1, 2024 07:45

Optimised images with calibre/image-actions

5d2d4fc

chore(be): add s3-media-provider to test code

048191f

vercel bot deployed to Preview March 1, 2024 07:55 View deployment

gyunseo reviewed Mar 2, 2024

View reviewed changes

collection/admin/Problem/Upload Image/Succeed.bru Outdated Show resolved Hide resolved

k1g99 reviewed Mar 2, 2024

View reviewed changes

collection/admin/Problem/Upload Image/Succeed.bru Outdated Show resolved Hide resolved

chore(be): use relative path for sample image

b27dbde

Jaehyeon1020 requested review from gyunseo and k1g99 March 2, 2024 16:14

vercel bot deployed to Preview April 6, 2024 13:52 View deployment

Jaehyeon1020 added 2 commits April 6, 2024 14:58

feat(be): add delete-image and improve image upload, delete logic

fd79060

docs(be): add delete-image api docs

e5233fe

vercel bot deployed to Preview April 6, 2024 15:04 View deployment

Jaehyeon1020 requested a review from cho-to April 6, 2024 15:07

cho-to reviewed Apr 9, 2024

View reviewed changes

apps/backend/prisma/schema.prisma Show resolved Hide resolved

chore(be): parallelize deleting image logic

06e1cbd

vercel bot deployed to Preview April 9, 2024 08:22 View deployment

Merge branch 'main' into 1495-implement-image-upload

dbc5dfc

vercel bot had a problem deploying to Preview May 5, 2024 13:53 Failure

Jaehyeon1020 requested a review from cho-to May 5, 2024 13:57

Jaehyeon1020 commented May 14, 2024

View reviewed changes

apps/backend/apps/admin/src/problem/problem.service.ts Outdated Show resolved Hide resolved

Merge branch 'main' into 1495-implement-image-upload

cedef4a

vercel bot deployed to Preview May 14, 2024 02:43 View deployment

chore(be): parallelize image-delete api

209c2f9

Jaehyeon1020 commented May 14, 2024

View reviewed changes

apps/backend/apps/admin/src/problem/problem.service.ts Show resolved Hide resolved

vercel bot deployed to Preview May 14, 2024 02:55 View deployment

Merge branch 'main' into 1495-implement-image-upload

5f22f91

vercel bot deployed to Preview May 27, 2024 03:33 View deployment

cho-to approved these changes May 27, 2024

View reviewed changes

Merge branch 'main' into 1495-implement-image-upload

f6e48e5

vercel bot deployed to Preview May 27, 2024 09:51 View deployment

cho-to reviewed May 28, 2024

View reviewed changes

apps/backend/apps/admin/src/problem/problem.resolver.ts Show resolved Hide resolved

Merge branch 'main' into 1495-implement-image-upload

faa68b4

vercel bot deployed to Preview May 29, 2024 01:23 View deployment

Jaehyeon1020 merged commit 4680a36 into main May 29, 2024
10 checks passed

Jaehyeon1020 deleted the 1495-implement-image-upload branch May 29, 2024 07:20

jimin9038 mentioned this pull request Jul 31, 2024

[Feature] File Upload 기능 구현 #220

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(be): implement image upload #1514

feat(be): implement image upload #1514

Jaehyeon1020 commented Feb 27, 2024 •

edited

Loading

vercel bot commented Feb 27, 2024 •

edited

Loading

cho-to commented Feb 29, 2024

Jaehyeon1020 commented Feb 29, 2024

github-actions bot commented Mar 1, 2024

Jaehyeon1020 commented Mar 1, 2024

feat(be): implement image upload #1514

feat(be): implement image upload #1514

Conversation

Jaehyeon1020 commented Feb 27, 2024 • edited Loading

Description

Additional context

Before submitting the PR, please make sure you do the following

vercel bot commented Feb 27, 2024 • edited Loading

cho-to commented Feb 29, 2024

Jaehyeon1020 commented Feb 29, 2024

github-actions bot commented Mar 1, 2024

Jaehyeon1020 commented Mar 1, 2024

Jaehyeon1020 commented Feb 27, 2024 •

edited

Loading

vercel bot commented Feb 27, 2024 •

edited

Loading