dev-resources.site

for different kinds of informations.

A file uploader built with shadcn/ui and react-dropzone

Published at

5/15/2024

Categories

upload

ui

Author

mohammadtaseenkhan

Main Article

https://dev.to/mohammadtaseenkhan/a-file-uploader-built-with-shadcnui-and-react-dropzone-2co7

Categories

2 categories in total

Author

18 person written this

mohammadtaseenkhan

A file uploader built with shadcn/ui and react-dropzone

File Uploader

This is a file uploader component built with shadnc/ui, and react-dropzone. It is bootstrapped with create-t3-app.

View Demo View Github

Tech Stack

Framework: Next.js
Styling: Tailwind CSS
UI Components: shadcn/ui
Storage: uploadthing
ORM: Drizzle ORM
Validation: Zod

Features

Reusable useFileUpload hook for uploading files with uploadthing
Drag and drop file upload component with progress bar
React-hook-form integration with shadnc/ui form components
File dialog demo with adding and removing files from the scrollable list

upload Article's

30 articles in total

UploadThing: A Modern File Upload Solution for Next.js Applications

NestJS - Armazenamento nas nuvens

NestJS - criar um endpoint para upload de diversos arquivos

NestJS - Validando o envio de arquivos

NestJS - Armazenamento local de upload

NestJS - criar endpoint para upload de 1 arquivo

Next.js: Upload de imagem para a Cloudflare R2 Utilizando Presigned URL

A file uploader built with shadcn/ui and react-dropzone

currently reading

Elevate Your GraphQL API: Mastering File Uploads with Yoga GraphQL

Mastering File Uploads in Laravel 11: A Comprehensive Guide

How To Upload Multiple File In Laravel 10

Different approaches to reduce AWS S3 file upload time using AWS-SDK v3 in NodeJS.

How would you handle image upload?

Upload File di Node JS

Uploading Images with Node.js and React.js

Simplifying AWS S3 File Uploads with the Android Library

Laravel 10 Crop Image Before Upload Cropper Js

Enhance Job Seeker Experience: Quick Image Upload for Portals

A file upload sample with NextJs

Azure Storage Account: Unleash the Potential of Cloud-Based Storage

Spheron Network: Browser Upload

Uploading files from terminal on file hosting service, and unlimited cloud storage

Process FormData file sent to Node server

Express file upload using Multer

Maximize Your Client Upload Efficiency with the Bulk Upload

Upload images in Ckeditor 5 with Laravel

Install & Upload WordPress Plugin

Laravel 9 Multiple Image Upload Example

How To Enhance JavaScript File Upload In Your Web App

Featured ones:

abubakersiddique761