├── .example.env
├── .gitignore
├── README.md
├── app
├── favicon.ico
├── globals.css
├── layout.tsx
└── page.tsx
├── next.config.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
├── next.svg
└── vercel.svg
├── tailwind.config.ts
└── tsconfig.json
/.example.env:
--------------------------------------------------------------------------------
1 | NEXT_PUBLIC_BYTESCALE_API_KEY=
2 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # next.js
12 | /.next/
13 | /out/
14 |
15 | # production
16 | /build
17 |
18 | # misc
19 | .DS_Store
20 | *.pem
21 |
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 |
27 | # local env files
28 | .env*.local
29 | .env
30 |
31 | # vercel
32 | .vercel
33 |
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Minimilistic Uploader
2 |
3 | A simple Next.js app that uploads a PDF using Bytescale.
4 |
5 | ## Instructions
6 |
7 | 1. `git clone github.com/nutlope/uploader`
8 | 2. Run `npm install` to install dependencies
9 | 3. Add a `.env` with the `NEXT_PUBLIC_BYTESCALE_API_KEY` variable with your Bytescale API key
10 |
--------------------------------------------------------------------------------
/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Nutlope/uploader/3323209d0ffccd8bcf3b3d14ba309b0fa3051e46/app/favicon.ico
--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import './globals.css'
2 | import type { Metadata } from 'next'
3 | import { Inter } from 'next/font/google'
4 |
5 | const inter = Inter({ subsets: ['latin'] })
6 |
7 | export const metadata: Metadata = {
8 | title: 'Create Next App',
9 | description: 'Generated by create next app',
10 | }
11 |
12 | export default function RootLayout({
13 | children,
14 | }: {
15 | children: React.ReactNode
16 | }) {
17 | return (
18 |
19 | {children}
20 |
21 | )
22 | }
23 |
--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { UrlBuilder } from '@bytescale/sdk';
4 | import { UploadDropzone } from '@bytescale/upload-widget-react';
5 | import { useState } from 'react';
6 |
7 | const options = {
8 | apiKey: !!process.env.NEXT_PUBLIC_BYTESCALE_API_KEY
9 | ? process.env.NEXT_PUBLIC_BYTESCALE_API_KEY
10 | : 'free',
11 | maxFileCount: 1,
12 | // mimeTypes: ['application/pdf'],
13 | editor: { images: { crop: false } },
14 | };
15 |
16 | export default function Home() {
17 | const [name, setName] = useState('');
18 | const [url, setUrl] = useState('');
19 |
20 | return (
21 |
22 |
Uploader app
23 |
{
26 | if (uploadedFiles.length !== 0) {
27 | const file = uploadedFiles[0];
28 | const fileName = file.originalFile.file.name;
29 | const fileUrl = UrlBuilder.url({
30 | accountId: file.accountId,
31 | filePath: file.filePath,
32 | });
33 | setName(fileName);
34 | setUrl(fileUrl);
35 | }
36 | }}
37 | onComplete={() => console.log('done')}
38 | width="670px"
39 | height="250px"
40 | />
41 | {name && url && (
42 |
43 |
44 | Name: {name}
45 |
46 |
52 |