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!
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.
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.
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
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!
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.
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.
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!
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
Hi @ratanib5458! Sorry to hear that you are having trouble with the package. TH-cam 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!
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.
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…)
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.
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.
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.
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! ☺️
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
Using state in setState is considered bad practice. Please use the closure provided be setState. Bad: setState(state+1) Good: setState(state => state+1)
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.
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,
@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!
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 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
gonna be honest this looks identical to uploadthing in both concept and implementation. like even the component using react dropzone is basically identical
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.
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.
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.
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
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.
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!
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
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.
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
You went away for a long time and came back with this 👏👏
Yeah! Hopefully next video won’t take that long.. 😅
Channels like yours are so underrated! Thank you for the awesome content!! Keep it coming 🔥🔥
I couldn't understand anything the first time i watched this video as i was admiring the video quality and editing... Awesome!
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!
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!
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’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.
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)
Congrats, the editing and video quality is another level 👏
❤❤ 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!!
🤯 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
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 videos are getting better and better, beautiful editing. Very interesting project
Love it! Good luck to you! Rooting for edgestore!
one of the best cloud files storage solution i have ever seen 🤩🤩
My mind is blown, thanks for creating this, solve my problems
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.
i like that i have more control over my images. def migrating to this project.
Yes I used it on my airbnb clone project thanks ravi love from india
Awesome product! Probably use it in my coming project
Love the solution and simplicity. Keep it up!
Your teaching skills are amazing! Thanks a lot.
Finally, thanks Ravi!
Wow, just wow! thank you bro! edgestore save my day
So nice, clearly explain and easy to understand. Thank you.
I’m definitely using this, thanks bro
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.
Thanks for this easy and understandable video
Adding server-side functions to confirm or delete temporary files would be good. I am having problems using confirm/delete from server action.
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
Wonderful... 🎉, starting to use this asap
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.
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 😀
Just 😮!!! Jaws dropping content
how to delete file i always get an error EdgeStoreError: Failed to delete file. i already set the beforeDelete lifecycle hook on the bucket.
can you also add the 'cropping' feature for profile image upload ?
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?
You can just use the URLs directly in the src of the image component.
loved the product, but I guess it isn't production ready yet?
Looks alot like uploadthing. Awesome stuff
you save my life with this kkkk tanks a lot
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
i noticed that when you delete data from the dashboard the deployed edgestore url stil remains active
if i use protected file, the url will not display in image ?
does anyone know how can i remove the protected so i can access the files in the edge stores?
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.
TH-cam 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!
thanks bro
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.
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…)
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.
great video , but please
we need to use less external solutions when working with professionals
teach us about this
is it work on deploy? is it free? i get bug when deploy by use cloudinary
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.
Nice video….. what’s the name of the theme u using?
Just a note. 1024 * 1024 is just fine. You don't need to multiply by 1.
😂
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.
its only usable for jpg not video ?
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!
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
Using state in setState is considered bad practice. Please use the closure provided be setState.
Bad: setState(state+1)
Good: setState(state => state+1)
What a GEM
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 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.
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.
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.
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 upload any type of files? For example: pdf, csv, json etc
Yes. 👍
Does this handle virus scanning and image filters or do i need to do that separatly?
Sorry.. no such features at the moment.
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.
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
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 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.
Can i use it with basic react and express js?
Yes. An express adapter was recently released.
edgestore.dev/docs/express-adapter
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 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.
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
Will this work on vercel?
Sure! 👍
Epic ❤
Great
Does this use S3?
Yes! It uses S3 internally.
What is your vs code font name
Fira Code
hi, will it works for gifs too?
Yes! You can upload any type of file.
@@perfectbase cool, great software
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 :)
Wow
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!
Great video... Great package!!
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
cfbr
So dificult
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
Is it work with javascript or just typescript ?
It works with JavaScript
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.
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.
Bro made our life easy 🤌🤌🤌
Just used this for file uploads in my new service. Really great documentation and examples. Took very little effort to integrate and test.
Are you still in Japan broo?
Yes! I live here! 😉
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