8 replies

Need Help Understanding How to handle file uploads using Multipart Module

Hi all, I recently started working on a ts fullstack template (https://github.com/adophilus/templates/tree/main/nodejs-fullstack) which I plan on using in future projects. It's currently based on effect's http api and http server modules. The issue I'm currently facing is with file uploads. I have this image file which I plan on uploading about (5.5kb: 5581 bytes) but when I upload the file and logout the length and byteLength of the Uint8Array I get 1481 so surely I must be doing something wrong.

So far I've got the api definition for the upload endpoint defined like so

import { HttpApiEndpoint, HttpApiSchema } from '@effect/platform'
import { StatusCodes } from 'http-status-codes'
import { OpenApi } from '@effect/platform'
import BadRequestError from '../common/BadRequestError'
import UnexpectedError from '../common/UnexpectedError'
import { Schema } from 'effect'
import ImageFiles from '../common/ImageFiles'
import MediaDescription from '../common/MediaDescription'

const Request = HttpApiSchema.Multipart(
  Schema.Struct({
    files: ImageFiles
  })
).annotations({
  description: 'Upload media request body'
})

export const Success = Schema.Struct({
  code: Schema.Literal('MEDIA_UPLOADED'),
  data: Schema.Array(MediaDescription)
})

const UploadMediaEndpoint = HttpApiEndpoint.post(
  'uploadMedia',
  '/storage/upload'
)
  .setPayload(Request)
  .addSuccess(Success, { status: StatusCodes.OK })
  .addError(BadRequestError, { status: StatusCodes.BAD_REQUEST })
  .addError(UnexpectedError, { status: StatusCodes.INTERNAL_SERVER_ERROR })
  .annotate(OpenApi.Description, 'Upload multiple media files')

export default UploadMediaEndpoint

import { HttpApiEndpoint, HttpApiSchema } from '@effect/platform'
import { StatusCodes } from 'http-status-codes'
import { OpenApi } from '@effect/platform'
import BadRequestError from '../common/BadRequestError'
import UnexpectedError from '../common/UnexpectedError'
import { Schema } from 'effect'
import ImageFiles from '../common/ImageFiles'
import MediaDescription from '../common/MediaDescription'

const Request = HttpApiSchema.Multipart(
  Schema.Struct({
    files: ImageFiles
  })
).annotations({
  description: 'Upload media request body'
})

export const Success = Schema.Struct({
  code: Schema.Literal('MEDIA_UPLOADED'),
  data: Schema.Array(MediaDescription)
})

const UploadMediaEndpoint = HttpApiEndpoint.post(
  'uploadMedia',
  '/storage/upload'
)
  .setPayload(Request)
  .addSuccess(Success, { status: StatusCodes.OK })
  .addError(BadRequestError, { status: StatusCodes.BAD_REQUEST })
  .addError(UnexpectedError, { status: StatusCodes.INTERNAL_SERVER_ERROR })
  .annotate(OpenApi.Description, 'Upload multiple media files')

export default UploadMediaEndpoint

import { HttpApiEndpoint, HttpApiSchema } from '@effect/platform'
import { StatusCodes } from 'http-status-codes'
import { OpenApi } from '@effect/platform'
import BadRequestError from '../common/BadRequestError'
import UnexpectedError from '../common/UnexpectedError'
import { Schema } from 'effect'
import ImageFiles from '../common/ImageFiles'
import MediaDescription from '../common/MediaDescription'

const Request = HttpApiSchema.Multipart(
  Schema.Struct({
    files: ImageFiles
  })
).annotations({
  description: 'Upload media request body'
})

export const Success = Schema.Struct({
  code: Schema.Literal('MEDIA_UPLOADED'),
  data: Schema.Array(MediaDescription)
})

const UploadMediaEndpoint = HttpApiEndpoint.post(
  'uploadMedia',
  '/storage/upload'
)
  .setPayload(Request)
  .addSuccess(Success, { status: StatusCodes.OK })
  .addError(BadRequestError, { status: StatusCodes.BAD_REQUEST })
  .addError(UnexpectedError, { status: StatusCodes.INTERNAL_SERVER_ERROR })
  .annotate(OpenApi.Description, 'Upload multiple media files')

export default UploadMediaEndpoint

import { HttpApiEndpoint, HttpApiSchema } from '@effect/platform'
import { StatusCodes } from 'http-status-codes'
import { OpenApi } from '@effect/platform'
import BadRequestError from '../common/BadRequestError'
import UnexpectedError from '../common/UnexpectedError'
import { Schema } from 'effect'
import ImageFiles from '../common/ImageFiles'
import MediaDescription from '../common/MediaDescription'

const Request = HttpApiSchema.Multipart(
  Schema.Struct({
    files: ImageFiles
  })
).annotations({
  description: 'Upload media request body'
})

export const Success = Schema.Struct({
  code: Schema.Literal('MEDIA_UPLOADED'),
  data: Schema.Array(MediaDescription)
})

const UploadMediaEndpoint = HttpApiEndpoint.post(
  'uploadMedia',
  '/storage/upload'
)
  .setPayload(Request)
  .addSuccess(Success, { status: StatusCodes.OK })
  .addError(BadRequestError, { status: StatusCodes.BAD_REQUEST })
  .addError(UnexpectedError, { status: StatusCodes.INTERNAL_SERVER_ERROR })
  .annotate(OpenApi.Description, 'Upload multiple media files')

export default UploadMediaEndpoint

The

ImageFiles

ImageFiles

ImageFiles

ImageFiles schema is simply just:

import { Schema } from 'effect'
import { Multipart } from '@effect/platform'

const ImageFiles = Multipart.FilesSchema.pipe(
  Schema.annotations({
    description: 'Image file'
  })
)

export default ImageFiles

import { Schema } from 'effect'
import { Multipart } from '@effect/platform'

const ImageFiles = Multipart.FilesSchema.pipe(
  Schema.annotations({
    description: 'Image file'
  })
)

export default ImageFiles

import { Schema } from 'effect'
import { Multipart } from '@effect/platform'

const ImageFiles = Multipart.FilesSchema.pipe(
  Schema.annotations({
    description: 'Image file'
  })
)

export default ImageFiles

import { Schema } from 'effect'
import { Multipart } from '@effect/platform'

const ImageFiles = Multipart.FilesSchema.pipe(
  Schema.annotations({
    description: 'Image file'
  })
)

export default ImageFiles

Need Help Understanding How to handle file uploads using Multipart Module

Similar Threads

Similar Threads

Similar Threads