Skip to content

Instantly share code, notes, and snippets.

View codeBelt's full-sized avatar
💭
I may be slow to respond.

Robert S. codeBelt

💭
I may be slow to respond.
159 followers · 47 following
View GitHub Profile
@codeBelt
codeBelt / upload.axios.ts
Last active July 15, 2021 12:44
Snippet from https://betterprogramming.pub/upload-files-to-next-js-with-api-routes-839ce9f28430
...
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
codeBelt / UiFileInputButton.tsx
Last active July 15, 2021 12:44
Snippet from https://betterprogramming.pub/upload-files-to-next-js-with-api-routes-839ce9f28430
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
codeBelt / upload_api_v3.ts
Last active July 15, 2021 12:44
Snippet from https://betterprogramming.pub/upload-files-to-next-js-with-api-routes-839ce9f28430
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
codeBelt / upload_api_final.ts
Last active November 20, 2021 00:10
Snippet from https://betterprogramming.pub/upload-files-to-next-js-with-api-routes-839ce9f28430
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
codeBelt / upload_api_v2.ts
Last active July 15, 2021 12:44
Snippet from https://betterprogramming.pub/upload-files-to-next-js-with-api-routes-839ce9f28430
...
export default apiRoute;
export const config = {
api: {
bodyParser: false, // Disallow body parsing, consume as stream
},
};
@codeBelt
codeBelt / upload_api_v1.ts
Last active July 15, 2021 12:44
Snippet from https://betterprogramming.pub/upload-files-to-next-js-with-api-routes-839ce9f28430
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
codeBelt / nextjs-api-route.js
Last active July 15, 2021 12:44
Snippet from https://betterprogramming.pub/upload-files-to-next-js-with-api-routes-839ce9f28430
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
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
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
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" />;
};