Robert S. codeBelt

💭

I may be slow to respond.

Next.js, MobX & TypeScript are awesome

codeBelt / upload.axios.ts

Last active July 15, 2021 12:44

	...
	const config = {
	headers: { 'content-type': 'multipart/form-data' },
	onUploadProgress: (event) => {
	console.log(`Current progress:`, Math.round((event.loaded * 100) / event.total));
	},
	};

	const response = await axios.post('/api/uploads', formData, config);
	...

codeBelt / UiFileInputButton.tsx

Last active July 15, 2021 12:44

	export interface IProps {
	acceptedFileTypes?: string;
	allowMultipleFiles?: boolean;
	label: string;
	onChange: (formData: FormData) => void;
	uploadFileName: string;
	}

	export const UiFileInputButton: React.FC<IProps> = (props) => {
	const fileInputRef = React.useRef<HTMLInputElement \| null>(null);

codeBelt / upload_api_v3.ts

Last active July 15, 2021 12:44

	import nextConnect from 'next-connect';
	import multer from 'multer';

	// Returns a Multer instance that provides several methods for generating
	// middleware that process files uploaded in multipart/form-data format.
	const upload = multer({
	storage: multer.diskStorage({
	destination: './public/uploads',
	filename: (req, file, cb) => cb(null, file.originalname),
	}),

codeBelt / upload_api_final.ts

Last active November 20, 2021 00:10

	import nextConnect from 'next-connect';
	import multer from 'multer';

	const upload = multer({
	storage: multer.diskStorage({
	destination: './public/uploads',
	filename: (req, file, cb) => cb(null, file.originalname),
	}),
	});

codeBelt / upload_api_v2.ts

Last active July 15, 2021 12:44

	...
	export default apiRoute;

	export const config = {
	api: {
	bodyParser: false, // Disallow body parsing, consume as stream
	},
	};

codeBelt / upload_api_v1.ts

Last active July 15, 2021 12:44

	import nextConnect from 'next-connect';

	const apiRoute = nextConnect({
	// Handle any other HTTP method
	onNoMatch(req, res) {
	res.status(405).json({ error: `Method '${req.method}' Not Allowed` });
	},
	});

	// Process a POST request

codeBelt / nextjs-api-route.js

Last active July 15, 2021 12:44

	export default (req, res) => {
	if (req.method === 'POST') {
	// Process a POST request
	res.status(200).json({ data: 'success' });
	} else {
	// Handle any other HTTP method
	res.status(405).json({ error: `Method '${req.method}' Not Allowed` });
	}
	};

codeBelt / about-route.tsx

Created November 29, 2020 20:13

	const AboutRoute: NextPage<IProps> = (props) => {
	return (
	<>
	<Head>
	<AnyChartScript />
	</Head>
	<Layout title="About">
	<AboutPage />
	</Layout>
	</>

codeBelt / _document.tsx

Created November 29, 2020 19:56

	class NextDocument extends Document {
	render() {
	return (
	<Html lang="en" dir="ltr">
	<Head>
	<AnyChartScript />
	</Head>
	<body>
	<Main />
	<NextScript />

codeBelt / AnyChartScript.tsx

Last active November 29, 2020 19:45

	// AnyChartScript.tsx
	export const AnyChartScript: React.FC<IProps> = (props) => {
	return <script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-base.min.js" type="text/javascript" />;
	};