section-engineering-education / engineering-education

“Section's Engineering Education (EngEd) Program is dedicated to offering a unique quality community experience for computer science university students."
Apache License 2.0
363 stars 889 forks source link

How To Implement Drag and Drop File Upload In Next.js. #6723

Closed gisioraelvis closed 2 years ago

gisioraelvis commented 2 years ago

Topic Suggestion

How To Implement Drag and Drop File Upload In Next.js.

Writing sample(s):

ENGED PROGRAM CONTRIBUTOR Gisiora Elvis

Proposed article introduction

The Drag and Drop interfaces enable web applications to drag and drop files on a web page, providing a good user experience. This tutorial will guide the reader through how an application can accept one or more files that are dragged from the underlying platform's file manager and dropped on a web page. Will make use of the HTML5 Drag and Drop API and the FileReader API to accomplish this on a Next.js application without any additional libraries.

Key takeaways

Why use a drop zone for file uploads. An overview of the HTML5 Drag and Drop API and the FileReader API. How to implement drag and drop file upload in a Nextjs application.

Article quality

This is a beginner-friendly and in-depth guide that covers the HTML5 Drag and Drop API and the FileReader API and how to use them to implement drag and drop file upload in a Nextjs application without any additional libraries.

References

github-actions[bot] commented 2 years ago

👋 @gisioraelvis Good afternoon and thank you for submitting your topic suggestion. Your topic form has been entered into our queue and should be reviewed (for approval) as soon as a content moderator is finished reviewing the ones in the queue before it.

WanjaMIKE commented 2 years ago

Seems like a helpful topic. Let's ensure that it adds value to the community. Thanks