bmvantunes/youtube-2021-feb-multiple-file-upload-formik

Multiple file upload with progress bar, using formik, yup, material-ui, react-dropzone and cloudinary

This is a Next.js project bootstrapped with create-next-app.

Demo deployed on vercel

Application URL: https://youtube-2021-feb-multiple-file-upload-formik-bmvantunes.vercel.app/

YouTube video

YouTube video URL: https://youtu.be/MAw0lQKqjRA

Getting Started

First, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.js.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

youtube-2021-feb-multiple-file-upload-formik's Issues

If someone have issues to understand at singleFile cloudinary url

const url = https://api.cloudinary.com/v1_1/${your_cloudinary_name}/folder_name/upload(this is the action);

if you set it using process.env.your_cloudinary_name then use type assurance as string.
You will get the 'upload preset' from your acc settings>upload>upload preset (see the page). For test purpose enable it unsigned.

Argument of type'{ OnDrop: () => void; }' not assignable to parameter of type DropzoneOptions

I am seeing the following error for some unfamiliar reason.

Argument of type '{ onDrop: (accFiles: any, rejFiles: any) => void; accept: string[]; maxSize: number; }' is not assignable to parameter of type 'DropzoneOptions'. Type '{ onDrop: (accFiles: any, rejFiles: any) => void; accept: string[]; maxSize: number; }' is missing the following properties from type 'Pick<any, PropTypes>': multiple, onDragEnter, onDragOver, onDragLeavets(2345)

Using axios for calling API

Hi, first thanks for the code example and your video is very helpful !!:)
I'm using Axios for calling the upload API,
I found that when I used reject, I didn't get any error in the error[] (on useCallback --> rejectedFiles)
I created a fake server and when I disconnected it, I got exception but nothing was appearing in the callback of the file...
any thoughts ?

[ESLint] - React Hook `useEffect` has missing dependencies

Description

After I run eslint with react-hooks plugin, I get warnings about useEffect hooks.

Steps to reproduce

1. npm i --save-dev @babel/core @babel/eslint-parser eslint eslint-plugin-react-hooks
2. Create files:

• .babelrc

{
  "presets": [
    "next/babel"
  ]
}

• .eslintrc

{
  "plugins": [
    "react-hooks"
  ],
  "extends": [
    "plugin:react-hooks/recommended"
  ],
  "rules": {
    "react-hooks/exhaustive-deps": "warn"
  },
  "parser": "@babel/eslint-parser"
}

3. npx eslint src/**

Results

Expected

No warnings.

Actual

.\src\upload\MultipleFileUploadField.tsx
  52:6  warning  React Hook useEffect has a missing dependency: 'helpers'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

.\src\upload\SingleFileUploadWithProgress.tsx
  25:6  warning  React Hook useEffect has missing dependencies: 'file' and 'onUpload'. Either include them or remove the dependency array. If 'onUpload' changes too often, find the parent component that defines it and 
wrap that definition in useCallback  react-hooks/exhaustive-deps

✖ 2 problems (0 errors, 2 warnings)

Additional Information

versions

@babel/core: 7.14.6

@babel/eslint-parser: 7.14.7

eslint: 7.30.0

eslint-plugin-react-hooks: 4.2.0