Skip to main content

File upload

Marblism includes a system for uploading both public and private files.

It integrates with Amazon Web services S3. If AWS is not set-up on your app , it will stores files on the server's disk (this is intended for local development only and is not recommended for production use).

Activation​

In the "Hosting" tab on your project, click on "Addons" then tick the Marblism File Storage. You will need to click on "Restart your app" so the changes propagate.

Usage​

Upload a public file​

import { useUploadPublic } from '@/plugins/upload/client'
import { RcFile } from 'antd/es/upload'

export default function UploadSomething() {
  const [fileList, setFileList] = useState<UploadFile[]>([])
  const { mutateAsync: upload } = useUploadPublic()

  const handleUpload = async () => {
    const urlPictureUploaded = await upload({ file: fileList[0] as RcFile })
    console.log(urlPictureUploaded)
  }

  const beforeUpload = file => {
    setFileList([...fileList, file])
  }

  return (
    <>
      <Upload fileList={fileList} beforeUpload={beforeUpload}>
        <Button icon={<UploadOutlined />}>Select File</Button>
      </Upload>
      <Button type="primary" onClick={handleUpload}>
        Start Upload
      </Button>
    </>
  )
}

For different style of upload button/behaviors, check the Ant Design Upload documentation.

Upload a private file​

Same as before with useUploadPrivate()

Get the a public url from a private file URL​

By default, the public url you fetch are valid 1h.

const { mutateAsync: upload } = useUploadPrivate()
const { mutateAsync: getPublicLink } =
  Api.upload.fromPrivateToPublicUrl.useMutation()

const handleUpload = async () => {
  const privateLink = await upload({ file: fileList[0] as RcFile })
  const publicUrlValid1hour = await getPublicLink(privateLink)
}

Tips​

  • Use the public upload for non-sensitive information such as logos, or blog post pictures.
  • Use the private upload for sensitive information that requires protection.
  • Although we expose the Private to Public URL endpoint for simplicity, consider hiding it and handling the creation of public URLs for private files directly on your server for enhanced security.

Use your own AWS S3​

If you don't want to use the default Marblism File Storage, you can use your own AWS S3:

  • Sign up to AWS
  • Create a set of access and secret keys
  • Create a public S3 bucket for public files (e.g., my-app--public). You can watch this 2-minute tutorial.
  • Create a private S3 bucket for private files (e.g., my-app--private).
  • Add the following environment variables:
SERVER_UPLOAD_AWS_ACCESS_KEY=
SERVER_UPLOAD_AWS_SECRET_KEY=
SERVER_UPLOAD_AWS_BUCKET_PUBLIC_NAME=
SERVER_UPLOAD_AWS_BUCKET_PRIVATE_NAME=
SERVER_UPLOAD_AWS_REGION=