1
0
mirror of https://github.com/stonith404/pingvin-share.git synced 2024-07-02 07:20:38 +02:00

added max file size validation to frontend

This commit is contained in:
Elias Schneider 2022-04-25 15:29:15 +02:00
parent 61be87b72a
commit 6ef118fa14
No known key found for this signature in database
GPG Key ID: D5EC1C72D93244FD
3 changed files with 9 additions and 1 deletions

View File

@ -1,4 +1,6 @@
APPWRITE_FUNCTION_API_KEY= APPWRITE_FUNCTION_API_KEY=
# IMPORTANT If you're running the website inside docker and your Appwrite instance runs on localhost host, # IMPORTANT If you're running the website inside docker and your Appwrite instance runs on localhost host,
# use host.docker.internal instead of localhost # use host.docker.internal instead of localhost
APPWRITE_HOST=http://appwrite/v1 APPWRITE_HOST=http://host.docker.internal/v1
# Must be the same as in the _APP_STORAGE_LIMIT in the Appwrite env file
NEXT_PUBLIC_MAX_FILE_SIZE=300000000

View File

@ -37,6 +37,7 @@ To set up the frontend of Pingvin Share follow these steps.
2. Rename the `.env.example` file to `.env` 2. Rename the `.env.example` file to `.env`
3. Paste the key in the `.env` file 3. Paste the key in the `.env` file
4. Change `APPWRITE_HOST` in the `.env` file to the host where your Appwrite instance runs 4. Change `APPWRITE_HOST` in the `.env` file to the host where your Appwrite instance runs
5. Change `NEXT_PUBLIC_MAX_FILE_SIZE` in the `.env` file to the max file size limit you want
Start the frontend: Start the frontend:

View File

@ -10,6 +10,7 @@ import {
import { Dropzone as MantineDropzone, DropzoneStatus } from "@mantine/dropzone"; import { Dropzone as MantineDropzone, DropzoneStatus } from "@mantine/dropzone";
import React, { Dispatch, ForwardedRef, SetStateAction, useRef } from "react"; import React, { Dispatch, ForwardedRef, SetStateAction, useRef } from "react";
import { CloudUpload, Upload } from "tabler-icons-react"; import { CloudUpload, Upload } from "tabler-icons-react";
import toast from "../../utils/toast.util";
const useStyles = createStyles((theme) => ({ const useStyles = createStyles((theme) => ({
wrapper: { wrapper: {
@ -57,6 +58,10 @@ const Dropzone = ({
return ( return (
<div className={classes.wrapper}> <div className={classes.wrapper}>
<MantineDropzone <MantineDropzone
maxSize={parseInt(process.env["NEXT_PUBLIC_MAX_FILE_SIZE"] as string)}
onReject={(e) => {
toast.error(e[0].errors[0].message);
}}
disabled={isUploading} disabled={isUploading}
openRef={openRef as ForwardedRef<() => void>} openRef={openRef as ForwardedRef<() => void>}
onDrop={(files) => { onDrop={(files) => {