Uploading Files With Next.js Just Got Way Easier
Ғылым және технология
Edge Store is finally ready for you to use it in an open beta release.
I hope you like it! Let me know what you think in the comments.
Edge Store homepage:
edgestore.dev
Edge Store Demo:
examples.edgestore.dev/compon...
Edge Store Github:
github.com/edgestorejs/edgestore
This video's code:
github.com/perfectbase/edgest...
---------------------------------------------------------------
Inquiry and Collaborations:
contact@perfectbase.dev
---------------------------------------------------------------
Join my Discord:
/ discord
---------------------------------------------------------------
Follow me on twitter:
/ ravicoding
---------------------------------------------------------------
Chapters:
0:00 Introduction
0:57 Public images
4:04 Progress bar
4:59 Sample components
5:39 Additional config
7:19 Protected files
9:53 Multi-part uploads
10:28 Parallel uploads
11:00 Temporary files
Пікірлер: 173
Channels like yours are so underrated! Thank you for the awesome content!! Keep it coming 🔥🔥
Your videos are getting better and better, beautiful editing. Very interesting project
Congrats, the editing and video quality is another level 👏
The best thing about this tutor is that he covers everything, keep up!
Awesome! I hope this will become the most used and standard app for every app. You deserve it!
Love it! Good luck to you! Rooting for edgestore!
You went away for a long time and came back with this 👏👏
@perfectbase
10 ай бұрын
Yeah! Hopefully next video won’t take that long.. 😅
Love the solution and simplicity. Keep it up!
Dude, you really explain well! I love the way you talk and code while the animation shows the effect immediately without switching to browser and IDE back and forth. This is clever! I subbed!
@perfectbase
9 ай бұрын
Thank you!! ☺️
@bimonnongsiej
8 ай бұрын
Yes 👍
@dodomukunzi7269
5 ай бұрын
Subbed as well
I couldn't understand anything the first time i watched this video as i was admiring the video quality and editing... Awesome!
Just used this for file uploads in my new service. Really great documentation and examples. Took very little effort to integrate and test.
Awesome product! Probably use it in my coming project
I’m definitely using this, thanks bro
So nice, clearly explain and easy to understand. Thank you.
I’m literally in need of exactly what this offers. Been trying to find something for a while now that fits my needs and this is it🎉
@perfectbase
10 ай бұрын
Nice!! When you use it, I would love to hear your feedback on the discord server! 🙏 You can reach me there as well if you have any questions or suggestions.
It looks great. I'm building a SaaS and I think I'm going to choose your product to handle user file uploads! I'm going to do some testing with the free version to see how it works. Thank you very much!
Your teaching skills are amazing! Thanks a lot.
I did not expect that level of attention to detail for both UX and DX, congrats man! I will be using this for my next project. Btw which tools did you use for the video editing, zooming and animations etc.? They looked so slick!
@perfectbase
9 ай бұрын
Thank you! ☺ I didn't use anything fancy for the zoom and arrow animations.. just keyframes in Final Cut Pro. For a few of the motion graphics, I used Apple motion. (specially in the introduction) But I plan to use "Screen Studio" in a few places in the future. (I didn't use it in this video)
i like that i have more control over my images. def migrating to this project.
Wonderful... 🎉, starting to use this asap
Wow, just wow! thank you bro! edgestore save my day
Unbelievable and exhaustive features.Edge store thought about all the use cases. Also, not using a database for protected files is a nice idea. Very clear explanation in the video.
@perfectbase
9 ай бұрын
Thank you for the feedback! Glad you liked it! 🙏
one of the best cloud files storage solution i have ever seen 🤩🤩
❤❤ You explained like a short Ads but you cover a lot in a single video. I love the way you made a tutorial and love for the Edge Store too.
@perfectbase
8 ай бұрын
Thank you!!
🤯 Blown away by the simplicity of defining the types of asset uploaded, which then determines the file path. Awesome video, and amazing job on Edge Store btw! Highly considering it for my current project! Just one question, can I use my own S3 Bucket? Specifically, I use Cloudflare R2 which has compatibility with the S3 API.
@perfectbase
9 ай бұрын
Thanks for the feedback!! ☺️ Yes! you can use the library with your own AWS infrastructure if you use the AWS Provider. you will lose some of the features (like protected files or temporary files) which are specific to the Edge Store Provider. edgestore.dev/docs/providers/aws I haven't tried it with the Cloudflare R2. In case it is not compatible, you can still create a custom provider for it. edgestore.dev/docs/providers/custom
My mind is blown, thanks for creating this, solve my problems
Feeling that Edge Store will take off 🚀 Insane edit skill btw!! Great stuff you’re building here Ravi 👍
@perfectbase
10 ай бұрын
Thanks, Philippe!! ☺️ I hope you’re right!
Just 😮!!! Jaws dropping content
This service looks easier to use than upload thing, keep up the good work. I was looking for a better way to upload files in nextjs, and I like edge store.
can you also add the 'cropping' feature for profile image upload ?
Yes I used it on my airbnb clone project thanks ravi love from india
does anyone know how can i remove the protected so i can access the files in the edge stores?
What a GEM
i noticed that when you delete data from the dashboard the deployed edgestore url stil remains active
Adding server-side functions to confirm or delete temporary files would be good. I am having problems using confirm/delete from server action.
you save my life with this kkkk tanks a lot
if i use protected file, the url will not display in image ?
Looks alot like uploadthing. Awesome stuff
Nice video….. what’s the name of the theme u using?
Epic ❤
Wow i was like upload-things is great this seems super cool i will definitely try this in my project
@perfectbase
10 ай бұрын
Thanks! I hope you like it! Btw, wether you like it or not, I would love if you could leave a feedback in discord after you try it out.
@nabinsaud4688
10 ай бұрын
@@perfectbase definitely
This is so amazing! It's better and cheaper than other solutions. But I hope if you can add Image optimization feature in the future like Cloudinary
@perfectbase
8 ай бұрын
Thanks for the feedback! Yes! That would definitely be a nice feature to have.
Very nice! I have a question, if I use AWS to storage my files, how is the pricing? Or its free to use?
@perfectbase
10 ай бұрын
Thanks!! If you use the AWS provider, it’s free to use. You just won’t be able to use features that are specific for the Edge Store provider. (Like protected files, temporary files, etc…)
is it work on deploy? is it free? i get bug when deploy by use cloudinary
its only usable for jpg not video ?
Amazing video! Good job, @perfectbase! While on topic, does anyone know how to get this to work via Next.js Server Actions? In 2023 (Next 13 and 14) almost everyone in production has moved towards using Server Actions. Personally, I don't care - but uploading like this gets really messy (and often broken) in most middleware setups - unless we stick to Server Actions.
@perfectbase
7 ай бұрын
Thank you! Glad you liked it! It does not have a server actions feature. It is actually the first time I hear of such problems. I've been using Next 14 myself and I use Server Actions and middlewares in some places. In my view, this doesn't feel like a good use case for server actions, but I could be wrong. If you want, you can create a feature request issue on GitHub, or send a message on discord so we can have a better discussion about it. If you could show the problems you are having and also maybe share an example repo with the problems that would be great! Also feel free to share any ideas on how you would use server actions to solve them.
Great video... Great package!!
Wow, open source upload components with S3 support! And inexpensive Edge Storage service! What else we could wish for! Would be great to have multi image upload support with image thumbnails grid on upload
@perfectbase
9 ай бұрын
Thanks for the feedback! This would indeed be a good example component to have in the docs! I might make it in the future. btw, if you want to make it and send a PR, I'll probably accept it!
@anatoliikostin3613
9 ай бұрын
@@perfectbase Oh, I believe you can do that much better. I’m just starting with Typescript and NextJS 😀
hey Ravi! Thanks a lot for putting this together! I am considering using this over Uploadthing for a big project at work. What are the odds for us to sign up to this and it discontinues in the next couple of months? Thanks alot again!
@perfectbase
9 ай бұрын
Thanks for considering Edge Store for your project! This is my main project and I’m pretty exited about it, so I would say the chances of the project being discontinued are almost none! I hope you enjoy using it! ☺️
@rotivanov
9 ай бұрын
@@perfectbase Signing up now! Thanks dude!
So the edgestore server is an external service? Can I also self host the EdgeStore server and save the files on my own disk?
@perfectbase
9 ай бұрын
Thanks for the interest in the service! There are 2 parts of the project, the package is open source, and it allows you to use it with your own s3 bucket if you want, but you lose on some of the functionality from the Edge Store provider. And then there is the Edge Store provider, which is not open source and cannot be self hosted.
ok, we posted the images. But what if want to display them? We should download for it? Or just passing the url to src of component?
@perfectbase
2 күн бұрын
You can just use the URLs directly in the src of the image component.
What wallpaper r u using for ur pc background
@perfectbase
9 ай бұрын
I created with Midjourney.. 😆 This was the prompt I used: a hyper tech wallpaper for a mac, dark background --ar 16:9 --v 5 --q 2
Question; how do you handle a filesize > 4MB, I thought this was blocked my NextJS app routes?
@perfectbase
9 ай бұрын
The upload is not going though the api. It’s using a signed url to upload from the frontend directly to s3. Which means that it should probably work even with terabyte file sizes.
Is this a rotateable vertical monitor or did you buy it like that
@perfectbase
9 ай бұрын
Yes, It’s on an arm mount. I can rotate it. 😉
Thanks for this easy and understandable video
loved the product, but I guess it isn't production ready yet?
Do you like this more than filestack? I've implemented that but my app isnt finished.. maybe I should switch
@perfectbase
9 ай бұрын
Sorry for the late reply. I never used filestack. I’ve been getting a lot of great feedback about edgestore, so people are enjoying it. But it is a new product, that’s something to keep in mind.
Can i use it with basic react and express js?
@perfectbase
6 ай бұрын
Yes. An express adapter was recently released. edgestore.dev/docs/express-adapter
Does this handle virus scanning and image filters or do i need to do that separatly?
@perfectbase
9 ай бұрын
Sorry.. no such features at the moment.
How can we delete private file from client , facing some issues. please upload a video about how to delete private file from client side by user
@perfectbase
8 ай бұрын
Hi @ratanib5458! Sorry to hear that you are having trouble with the package. KZread comments are not a very good way to get support. If you can ask on the discord server or in a github issue and share more about your configuration. Ideally with a minimal reproduction repo, I would do what I can to help you figure it out! Have a nice day!
How can i use edgestore if i use javascript, not typescript yet
@perfectbase
Ай бұрын
You can use it in JavaScript by removing the types from the code. But you will miss out on most of the things that make the developer experience better.
Can I upload any type of files? For example: pdf, csv, json etc
@perfectbase
7 ай бұрын
Yes. 👍
When are you planning to add gcp storage in edge store?
@perfectbase
8 ай бұрын
It’s probably gonna happen when someone that uses gcp contributes to the project to add the gcp provider.
@pranavbhatkar
8 ай бұрын
@@perfectbase your doing great job keep it up.
I am switching to edgestore :) .. can you please provide more tutorials on how to use it? specially with authenticated users?
@perfectbase
9 ай бұрын
Thank you! I hope you have a good experience with it. I’ll eventually add more complete example apps for it! You can also take a look at the latest video of Code With Antonio. He made a full stack Notion clone using edgestore.
Hi, How to handle larger files like 2mb to 3mb in next routes in app directory. It is not working for large files, and giving Internal Server Error. Thanks,
@perfectbase
9 ай бұрын
It should work… I’ll take a look. Consider joining the discord to facilitate communication.
@perfectbase
9 ай бұрын
@zakriarehan2379 I just tried it with one of the example apps with the app router and it seems to be working as expected even with 20mb files or larger. Feel free to join the discord channel and share more about your project. If you could share a github repo for a minimal reproduction project, that would be great!
What are the differences between Edgestore and Uploadthing?
@perfectbase
8 ай бұрын
Sorry, I actually haven't used UploadThing yet. And I feel that anything I say can't be completely trusted as I'm the creator of Edge Store. So I'll leave the comparisons for the actual users. There are a few people in the discord channel that have switched from UploadThing. Feel free to try to ask them there.
What is your vs code font name
@perfectbase
8 ай бұрын
Fira Code
on 00:09:20 if i try to upload 3 image, why just one url shown not 3 of them? not url1 url2 url3
@perfectbase
9 ай бұрын
Not sure what you mean. You can see an example in the link below. If you upload multiple files, all urls will be shown. There is also a link to the code in the example. examples.edgestore.dev/components/multi-file
@garudaputro
9 ай бұрын
Thanks, that's what i looking for ✨... In this video just shown one urls not all of them
wtf i'm only at 3:49 and i have a error with the api, when i click upload it doens't work
@perfectbase
Ай бұрын
Sorry to hear it. You might have missed some step. Here are the docs to setup the service: edgestore.dev/docs/quick-start And this is the troubleshooting docs: edgestore.dev/docs/troubleshooting If you still have problems, feel free to reach out on discord.
Is there a way to know when a file has finished uploading and then do something to it on the server?
@perfectbase
9 ай бұрын
At 3:18 in the video I show this part. The place with the comment “save your data here” is where you would want to call your api to do something on the server. Is this what you were asking? Sorry if I’m misunderstanding the question.
@begris
9 ай бұрын
@@perfectbase I just checked the docs, I was referrering to a life cycle hook for after uploading, similar to beforeUpload. Seems like there isnt one yet
@perfectbase
9 ай бұрын
@@begris I see.. yes there is no afterUpload hook. The way to do it right now is by calling your api after awaiting the upload. But I think it would be nice to have a way to set it for all uploads in the app. Thanks for the suggestion.
Muito top! mas não é possivel criar diretórios, certo?
@perfectbase
8 ай бұрын
Valeu! Você pode criar o path pra o arquivo. Que eh meio como diretório. E você pode procurar arquivos por prefixo. Mas sim, vc não visualiza como diretórios. edgestore.dev/docs/configuration#metadata--file-path
Caralhooooo, muito massa. Será que esse projeto tem risco de parar de rodar do nada? Pq tenho uma startup e acho que se encaixaria muito bem no projeto
@perfectbase
9 ай бұрын
Eh meu projeto principal… e o pessoal tá gostando bastante. Então não acredito que ele pararia de rodar… Que bom que gostou! E valeu por assistir.
@rossanovinicius7373
9 ай бұрын
@@perfectbase que legal!! vcs tem algum planejamento para avisar os clientes previamente caso encerrem as atividades? Para não perder o conteúdo e passar para outro db
@perfectbase
9 ай бұрын
@rossanovinicius7373 certeza! Se for acontecer (o que eu acho muito difícil) l, vou fazer de tudo para que os clientes não saiam prejudicados. E entregar todos os dados necessários para não terem problemas
Does this use S3?
@perfectbase
6 ай бұрын
Yes! It uses S3 internally.
Great
hi, will it works for gifs too?
@perfectbase
5 ай бұрын
Yes! You can upload any type of file.
@vladguzun2522
5 ай бұрын
@@perfectbase cool, great software
Can i use this outside next.js?
@perfectbase
9 ай бұрын
Not yet. Right now there are only 2 adapters: Next.js (pages router) and Next.js (app router) The next one I plan to implement is the express adapter. When that happens, you'll be able to use it outside Next.js if you're using express as your backend.
@raphaeljaggerd3585
9 ай бұрын
Your making adapaters for every thing i want to avoid😂. @@perfectbase
How will this work in React Native? possible?
@perfectbase
9 ай бұрын
I've never used React Native, but I think it would be possible if you were using Next.js as the backend. Otherwise you would need to wait for the express adapter (if you're using express), which will come in the future.
@ThomazMartinez
9 ай бұрын
@@perfectbase will wait for Bun adapter :)
Just a note. 1024 * 1024 is just fine. You don't need to multiply by 1.
@perfectbase
9 ай бұрын
😂
Are you still in Japan broo?
@perfectbase
7 ай бұрын
Yes! I live here! 😉
Only nextjs?
@perfectbase
9 ай бұрын
For now, yes. Other frameworks will be added in the future. Contributors are also welcome do add support for other frameworks. The package is architected to be easy to add new adapters.
great video , but please we need to use less external solutions when working with professionals teach us about this
Thank you! But I must say, it still sucks compared to how easy file uploads are in say Django and other frameworks.
@perfectbase
8 ай бұрын
Never used it.
Using state in setState is considered bad practice. Please use the closure provided be setState. Bad: setState(state+1) Good: setState(state => state+1)
gonna be honest this looks identical to uploadthing in both concept and implementation. like even the component using react dropzone is basically identical
@yassinesafraoui
9 ай бұрын
I think probably because there aren't a thousand ways to implement a file upload service
@JoshuaMelville
8 ай бұрын
Agreed. Almost to the point of seeming a bit like a clone. Are there any differences in features?
@perfectbase
8 ай бұрын
Yes, we were building a similar thing in parallel… which is very unfortunate, cuz I’m also part of Theo’s community and I didn’t want to have to compete with him… I actually made a video about that in the past. But yeah.. I believe there are some core differences in the services. I have never actually used UploadThing yet, so I can’t say much. But I encourage anyone to try both of them and share the comparison on an article or something.
You must be tripping to say that a frontend must have access to a user role. This way anyone can get access to admin resources
@Zipp3rZero
8 ай бұрын
All of this is getting out of hand. People should start learning about backend dev instead of trying this kind of spaghetti architecture violating every aspect of proper software development
@kaaaxcreators
8 ай бұрын
1. don't be rude 2. This is simply not true
@perfectbase
8 ай бұрын
I don’t get the concern.. but it’s probably a misunderstanding.
@kaaaxcreators
8 ай бұрын
@@Zipp3rZero what did the creator do wrong?the auth was perfectly fine for a prototype
Is it work with javascript or just typescript ?
@perfectbase
9 ай бұрын
It works with JavaScript
Why so late ravi ?? Upload video often
@perfectbase
9 ай бұрын
I’ll try! 😅 I was building Edge Store these past few months. And editing like that takes quite some time. But I’ll try to improve my process little by little to become more consistent 😉 Thanks for watching and commenting!
Wow
So dificult
What will happn when client dont wants to use edge store, as client have confidentials file data example - user onboarding details. try not to use 3rd party as they can see all of the user files.
@perfectbase
9 ай бұрын
This is a common problem. Most people will still use some 3rd party service that they trust (something like AWS S3). It all depends on how much you trust the privacy policy of the service. You can still use the Edge Store open source package with other storage providers as well. Right now there is an official AWS provider and you can also create custom providers for your specific storage service. This way you can leverage the easy to use package but still own your data. (you will just lose some features that are specific to Edge Store) edgestore.dev/docs/providers/aws
Isn't this a same thing as uploadthing?
@perfectbase
9 ай бұрын
Yes. Same goal with a different implementation. Feel free to choose the one you like more.
cfbr
I remember some few yrs ago, made up a quick library for this using vanilla js. Simple but efficient. I wonder why these frameworks are having hard times handling these. Skill issues for modern day devs. Kekw moments lewls
@perfectbase
9 ай бұрын
Congrats
Good tutorial but you go through stuff too fast . You have to show the commands for a few more seconds if not half a minute and it'll be much better.
Awesome product! But I think you’re pricing it way too cheap
@perfectbase
10 ай бұрын
Thanks for the feedback! 🙏 I do plan to test different prices until I find the right one. That’s just the first iteration.
EdgeStoreCredentialsError: Missing EDGE_STORE_ACCESS_KEY or EDGE_STORE_SECRET_KEY. How do I goo about this...I already added them to my .env file
Bro made our life easy 🤌🤌🤌