File & Image Uploads in Next.js 15 Are Easy Now

preview_player
Показать описание

Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship).

👉 Discord: all my courses have a private Discord

⏱️ Timestamps:
00:00 File / Image upload problems
02:43 input with type="file" + styling
06:12 Pinata setup
08:02 import server-only
09:10 isUploading state
09:43 Upload file from browser to API route
11:34 Upload file from API route to Pinata
13:30 Display image with Signed URL
17:01 CDN + Signed URL
18:01 Image optimization (size, webp)
20:47 srcSet
21:52 Custom loader (Pinata)

#webdevelopment #reactjs #nextjs

Note that my videos may contain mistakes. Always verify yourself that your code is safe and does what you want it to do for your specific situation. You agree by watching the videos that you are solely responsible for any mistakes in your code.

This channel and all its content is owned & operated by ByteGrad Sp. z o.o. with Tax ID: PL6762676561
  1. ByteGrad
Рекомендации по теме
File & Image 0:23:37

File & Image Uploads in Next.js 15 Are Easy Now

HTML File Uploads 0:12:44

HTML File Uploads in 5 Minutes (Plus Some JavaScript Features)

How to Upload 0:06:52

How to Upload Files in Node.js Using Express and Multer

51: Upload Files 0:23:08

51: Upload Files and Images to Website in PHP | PHP Tutorial | Learn PHP Programming | Image Upload

Uploading Files With 0:12:20

Uploading Files With Next.js Just Got Way Easier

How to Upload 0:34:33

How to Upload Images in React / Next.js (File Uploads, Filestack)

Uploading Files with 0:14:11

Uploading Files with NodeJS and Multer

16 Laravel Filament 0:09:35

16 Laravel Filament - Upload images using File upload advanced

How To Reduce 0:01:14

How To Reduce File Size Of Photo On iPhone - Full Guide

Laravel 10 - 0:21:35

Laravel 10 - File / Image Upload with Example | Complete File Upload Tutorial in Laravel 10

Upload Files in 0:12:21

Upload Files in React - Typescript, Drag and Drop, & Form Examples

Image and File 0:05:40

Image and File Uploading in React JS with Axios and FormData

Spring Boot | 0:20:27

Spring Boot | File Upload and Download REST API | Store images in File System | JavaTechie

File Upload in 0:00:20

File Upload in HTML & CSS

Replace input type 0:06:24

Replace input type file by Icon/Image | Display image uploaded below icon or image | Jquery

File Upload in 0:13:58

File Upload in Laravel: Main Things You Need To Know

Use Server Actions 0:06:14

Use Server Actions to Upload Files in Next.js with Cloudinary - Dev Hints

🚀 Image and 0:16:07

🚀 Image and File Uploading in React JS with Axios and FormData in Hindi 2024 🧑‍💻

Django Media Files 0:30:15

Django Media Files - Handling User Uploads in Django Forms & Models

How to upload 0:38:21

How to upload file in backend | Multer

Upload file using 0:02:46

Upload file using Nestjs and multer Nestjs Tutorial

How to Implement 0:09:48

How to Implement Multiple File Uploads in React? File Uploading in React JS

File Uploading in 0:04:15

File Uploading in React.JS

(#67) Upload file 0:12:47

(#67) Upload file (image) in asp.net core mvc | IFormFile in asp.net core | Asp.Net Core tutorial

Комментарии
Автор

Having had to do this manually many times (using e.g. Google Storage etc), I can confirm it is a massive headache, This looks SO much easier

siciliandefense
Автор

Very nice actually. i give it a try in my projects

williamsbolu
Автор

My guy drops a banger video and disappears for a month

Sahil.
Автор

what is the difference between between "user server" and import "server-only" package .Is "server-only" package give us extra security.Actually, Delba from Vercel team also used this "server-only" package in her examples and it is very new for me.

Tayyab-gp
Автор

how can i integrate MongoDB and Pinata ?

mustafaebid-ry
Автор

i'm using next 15, but does it matter that i rolled back to react 18?

nickwoodward
Автор

can you do a complete server action video with crud.

sidds
Автор

Can we use server actions instead of API routes for this?

evheniydan