File Uploader

This is a File uploader project using React-TypeScipt. In this app, you can upload, edit, and view files.

Demo

https://file-uploader-cf.netlify.app/

Features

• Allow users to upload PDF files from their devices.
• During the upload process there is a progress bar.
• User can upload multiple files.
• Store the file or text in localStorage. (file max size 1 md)
• Applied drag and drop function to the text item.
• If the page reloads, all elements remain in their original positions.
• User-friendly UI.

Tech Stack

To make this app the core technology is 'React JS', 'TypeScript', 'Tailwind CSS'. Besides these, I have used some libraries.

React Js, TypeScript, Tailwind CSS, React-dnd-kit, React-dropzone, Konva JS

Challenges

• The first challenge I faced was to use TypeScript. I only work a little with TypeScript. For this project, I have learned TypeScript and implemented it in this project.
• The second challenge I faced was to show the uploading progress bar. I have solved it using React-dropzone.
• The third challenge I faced was to implement drag-and-drop functionality. First I used react-beautiful-dnd. But after 4 hours of bug fixing, I found a documentation page from their official GitHub repo. This problem is due to their library not being updated for a long time. After that, I used 'React-dnd-kit' and solved the drag-and-drop feature.