Let's say I have a website made with Vue.js as a single-page app. I need to include a component that fetches a set of images uploaded by the client from a suitable object storage service and displays them in eg. grid form. Later on, this might extend to hosting other types of media as well.
Here are some requirements:
- Client should be able to use an easy UI for dragging images to folder.
- Client should be able to add basic metadata to objects like title, description, and the date taken.
- Client should be able to delete images or mark them as private.
- This folder should be exposed via an API for querying image data (REST or GraphQL are okay).
- The service shouldn't be too costly.
What is the best service for solving a problem like this? Do tell!
Top comments (5)
Personally, I suggest to use Google Firebases Cloud Storage.
Client should be able to use an easy UI for dragging images to folder.
You could give them access to the firebase console directly, with a specific role, where they can upload images.
Client should be able to add basic metadata to objects like title, description, and the date taken.
Users can set fixed metadata or custom metadata, see docs for more info.
Client should be able to delete images or mark them as private.
They can delete content, but I don't think they might set objects as private. I know than you can set a scope or access control list, so non-logged users cannot see the object (an end-side user is a non-auth user).
This folder should be exposed via an API for querying image data (REST or GraphQL are okay).
You can use the set of firebase API's to query the cloud storage, more info here.
The service shouldn't be too costly.
The service has a per-usage cost, so it increases with your usage. I think you have a limit of free usage per month.
Thanks! I will look into Firebase.
The project will be deployed to Netlify so any additional integration to that platform as well is welcome.
I think firebase is ok for Netlify, is totally platform-independent
If it is just images you are looking into I have been pretty happy with Cloudinary. It seems to fit your bullet list requirements and has a ton of great image optimization features.
This looks good as well. They even maintain their own Vue library which is a big plus.
github.com/cloudinary/cloudinary-vue