Uploading Files With Next.js Just Got Way Easier
Vložit
- čas přidán 10. 07. 2024
- 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 - Věda a technologie
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 👏
Love it! Good luck to you! Rooting for edgestore!
Awesome! I hope this will become the most used and standard app for every app. You deserve it!
Love the solution and simplicity. Keep it up!
The best thing about this tutor is that he covers everything, keep up!
You went away for a long time and came back with this 👏👏
Yeah! Hopefully next video won’t take that long.. 😅
So nice, clearly explain and easy to understand. Thank you.
I’m definitely using this, thanks bro
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!
Thank you!! ☺️
Yes 👍
Subbed as well
Awesome product! Probably use it in my coming project
Your teaching skills are amazing! Thanks a lot.
Wow, just wow! thank you bro! edgestore save my day
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.
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🎉
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.
Wonderful... 🎉, starting to use this asap
i like that i have more control over my images. def migrating to this project.
My mind is blown, thanks for creating this, solve my problems
one of the best cloud files storage solution i have ever seen 🤩🤩
Feeling that Edge Store will take off 🚀
Insane edit skill btw!! Great stuff you’re building here Ravi 👍
Thanks, Philippe!! ☺️
I hope you’re right!
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!
❤❤ 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.
Thank you!!
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.
Thank you for the feedback! Glad you liked it! 🙏
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!
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)
🤯 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.
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
Just 😮!!! Jaws dropping content
Thanks for this easy and understandable video
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.
Yes I used it on my airbnb clone project thanks ravi love from india
you save my life with this kkkk tanks a lot
can you also add the 'cropping' feature for profile image upload ?
What a GEM
Wow i was like upload-things is great this seems super cool i will definitely try this in my project
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.
@@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
Thanks for the feedback!
Yes! That would definitely be a nice feature to have.
Looks alot like uploadthing. Awesome stuff
Great video... Great package!!
Epic ❤
if i use protected file, the url will not display in image ?
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.
Nice video….. what’s the name of the theme u using?
is it work on deploy? is it free? i get bug when deploy by use cloudinary
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
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!
@@perfectbase Oh, I believe you can do that much better. I’m just starting with Typescript and NextJS 😀
Very nice!
I have a question, if I use AWS to storage my files, how is the pricing? Or its free to use?
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…)
its only usable for jpg not video ?
Does this handle virus scanning and image filters or do i need to do that separatly?
Sorry.. no such features at the moment.
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!
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! ☺️
@@perfectbase Signing up now! Thanks dude!
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.
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.
So the edgestore server is an external service? Can I also self host the EdgeStore server and save the files on my own disk?
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.
Great
Question; how do you handle a filesize > 4MB, I thought this was blocked my NextJS app routes?
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.
When are you planning to add gcp storage in edge store?
It’s probably gonna happen when someone that uses gcp contributes to the project to add the gcp provider.
@@perfectbase your doing great job keep it up.
What wallpaper r u using for ur pc background
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
Is this a rotateable vertical monitor or did you buy it like that
Yes, It’s on an arm mount. I can rotate it. 😉
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
Hi @ratanib5458!
Sorry to hear that you are having trouble with the package.
CZcams 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!
Do you like this more than filestack? I've implemented that but my app isnt finished.. maybe I should switch
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.
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,
It should work… I’ll take a look.
Consider joining the discord to facilitate communication.
@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!
Can i use it with basic react and express js?
Yes. An express adapter was recently released.
edgestore.dev/docs/express-adapter
on 00:09:20 if i try to upload 3 image, why just one url shown not 3 of them? not url1 url2 url3
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
Thanks, that's what i looking for ✨... In this video just shown one urls not all of them
Can I upload any type of files? For example: pdf, csv, json etc
Yes. 👍
How can i use edgestore if i use javascript, not typescript yet
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.
Is there a way to know when a file has finished uploading and then do something to it on the server?
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.
@@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
@@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.
wtf i'm only at 3:49 and i have a error with the api, when i click upload it doens't work
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.
Why it is not indexed in google?
It is.. it’s just not ranked high yet.
I will need to take a better look into SEO soon.
What are the differences between Edgestore and Uploadthing?
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.
loved the product, but I guess it isn't production ready yet?
I am switching to edgestore :) .. can you please provide more tutorials on how to use it? specially with authenticated users?
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.
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
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.
@@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
@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
What is your vs code font name
Fira Code
Muito top! mas não é possivel criar diretórios, certo?
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
hi, will it works for gifs too?
Yes! You can upload any type of file.
@@perfectbase cool, great software
Wow
Does this use S3?
Yes! It uses S3 internally.
Can i use this outside next.js?
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.
Your making adapaters for every thing i want to avoid😂. @@perfectbase
great video , but please
we need to use less external solutions when working with professionals
teach us about this
Just a note. 1024 * 1024 is just fine. You don't need to multiply by 1.
😂
How will this work in React Native? possible?
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.
@@perfectbase will wait for Bun adapter :)
Are you still in Japan broo?
Yes! I live here! 😉
Thank you! But I must say, it still sucks compared to how easy file uploads are in say Django and other frameworks.
Never used it.
Only nextjs?
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.
Is it work with javascript or just typescript ?
It works with JavaScript
Why so late ravi ?? Upload video often
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!
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
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
1. don't be rude
2. This is simply not true
I don’t get the concern.. but it’s probably a misunderstanding.
@@Zipp3rZero what did the creator do wrong?the auth was perfectly fine for a prototype
Using state in setState is considered bad practice. Please use the closure provided be setState.
Bad: setState(state+1)
Good: setState(state => state+1)
cfbr
gonna be honest this looks identical to uploadthing in both concept and implementation. like even the component using react dropzone is basically identical
I think probably because there aren't a thousand ways to implement a file upload service
Agreed. Almost to the point of seeming a bit like a clone. Are there any differences in features?
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.
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.
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
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
Congrats
Isn't this a same thing as uploadthing?
Yes. Same goal with a different implementation.
Feel free to choose the one you like more.
So dificult
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
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