Where to store pictures? Gallery Page
Hey, I did my first private project for someone which is a Gallery.
I used vite to create it and used mainly typescript in there. Its now just a frontend application.
I store all the pictures in the project itself which is now quite much and I would like to move the pictures somewhere else.
My first thought would be to store it in S3 and then to the api call to like get in into the gallery. Unfortunately I don't know exactly how this should be done or even how to google it correctly. Do you know guys if there is like a documentation on how to achieve such things? Or will I need even a backend for it? I would really appreciate any guideline on how I could start on this.
Moreover I also heard much things about cloudflares stored etc. What are here the best practices or what are your experience with using cloud storage in general?
6 Replies
You can use uploadThing or Firebase
I recently used cloudinary for such an application since I was well below free tier quota and it got some helper components for next. You just need to look up how to create a signing api and then you can just upload it and store the image id / url in a db.
But as I quickly saw on UploadThing its for next.js project and I am using vite
Will check that out, thanks! I would have one more question and its on how do you call the api, do you have a backend for it and do some SSR or is it just a component in your frontend application? Maybe my question dont make a lot of sense just don't know how to get started with all of that
There is two part to its api. Signing and uploading. Signing is optional but recommended for security and it is an api point you create. Rest is just a http post request. It gives you the option to either use their own pre-built widgets or you can handle all of the file operations and call the api yourself. I have a backend for signing but upload happens on client side.
I don't know what you are using vite with but if react: https://www.npmjs.com/package/@uploadthing/react
npm
@uploadthing/react
Learn more: docs.uploadthing.com. Latest version: 5.2.0, last published: 10 days ago. Start using @uploadthing/react in your project by running
npm i @uploadthing/react. There are no other projects in the npm registry using @uploadthing/react.Thank you will have a look into all of this in more detail today!