PDF Files Browse & Drag and Drop with Preview is a light and simple react.js component ready to use in your react projects or any projects that are built using react frameworks like Next.js to preview selected PDF files.

“Components let you split the UI into independent, reusable pieces, and think about each piece in isolation”.

This project is built using Nextjs which is a react framework, the component built in this project can be used in any react project, all you have to do is just copy the components in your project as well as the CSS and install the required dependencies.

Click To Select Or Drag & Drop PDF Files

Rotate and Delete One or Multiple PDF Files

This is just the UI for selecting the files. Once the files get dropped, you will need to do something with them. You might want to use a HTTP client like axios or fetch to upload the files to your server, for example.

What is the Language/Framework Used for development?

• JavaScript.
• Next.js framework.

Features:

• Drag and drop one or multiple PDF file(s).
• Click and select file(s) in the traditional way.
• User Friendly.
• File Type Validation
• PDF file size restriction (It is set to 5GB per PDF file size).
• File Size Validation
• Display Files preview
• Add and delete files.
• Rotate Files Previews (Rotation is applied only on files previews and it is not applied on the actual PDF ).
• Errors handling.
• Fully Responsive.
• Specific for PDF file type.

Code maintenance

Source code is regularly maintained. After each update, it’s better to use the last published version of the project to guaranty code and features quality and optimization.