✅ Typically how is an image stored?
Im trying to set up an ASP.NET Project where i have a profile section.
Users can then choose to upload a Profile Picture of themselves.
I want to store this profile picture in my MSSQL Database so they stick around.
How would you typically do it? Im trying to find info on what the "Best approach" would typically be. As it feels like a lot of storage space for a simple cause.
68 Replies
typically they are stored in the filesystem with a path in the database
filesystem could be azure, cdn etc
I see 😮
The info i found was basically i should convert the image to byte arrays and then unpack it when i take it out again; Its a small part of a simple school project
like this
That's bad info
Or rather, it will work, yes, but it's a generally dogshit solution
You give up the ability to cache those images, to process them in any way
Fetches from the database take longer
Oh i see; Do you have any guides or documentation on using Azure to store the images?
I cannot seem to find anything
If it's just a school project I'd just use the server's filesystem tbh
Never used Azure myself, I don't fancy myself going bankrupt at 30 lmao
Hmmmm i dont think i've ever used that before 😮
Just
File.WriteAllBytesAsync() the filesHahahaha makes sense; we have access to a Student subscription but we do need it for next semester
Thanks again guys; i'll do some research 😄
You'd probably use the BLOB client library
I'll look into that 😮
That's good advice. Azure blob storage sounds like the right approach for you, if you have a free subscription to play with. You don't always have access to persistent storage, that's why blob or cloud storage services can be useful.
Then you have a blob URL in your DB instead of a file path.
@Fady yeah sorry I was busy to provide the full info that is what I mean with azure above, thx Z
there are also events where u just use the filesystem, but given the technology these days, using CDN is the way to go
No problem @leowest
Well to me it comes down to money; Does using CDN cost any money?
it depends on what u already have
it could reduce costs
could raise
it depends on some variables u see not something I can tell without having more information
but u can always go and look up azure blob, how much it costs
cloudflare
etc
research 😉
So we are likely looking at a ~30-50 users at most. Its a group project that will be presented infront of our school
and people will test it; and each user can only upload one image lol
im not sure what 30~50 users at most represents here, I dont know if it needs to have an actual website
if all u need to do is present for ur school
could be as simple as running the whole project in a notebook with visual studio
so it could be a completely no cost type of thing
or if ur school offers vm or something
u could run it there
or if u use your school credentials u could get free vps etc
github offers some cool educational stuff
GitHub Education
GitHub Student Developer Pack
The best developer tools, free for students. Get your GitHub Student Developer Pack now.
gives u free credit for azure, digital ocean and more
So basically
we have set up a full website; We have set up the Backend as well as the Database in Azure
the Frontend is up through Github Pages
All the Profile Picture will do is show up in the Profile; all i want it to do is stick around
sure but who is paying for it or how it goes down
is the school providing everything?
Price depends on what you use... a lot
Some CDNs will have paid egress, so you pay for all the data sent
Some only want money for storage and the amount of fetches, but egress is free
If you can cache the file served, that reduces both fetches and egress, so you can even get under the free tier
Assuming there is a free tier
Microsoft is offering $100 for every student; So the school pays nothing really as long as we're deemed eligible 😮
I definitely get that;
Basically i'm looking at perhaps 100 images called at the very most; As it'll be visible to students for a day; so we'll likely ~50 students trying it and likely uploading their own profile pictures; and then we'll get some traffic over the next couple days
(So not being used a lot)
With proper caching and a cheap-ish CDN it should be fine
Should be fine even without a CDN tbh, just serving from the server
I actually ended up setting up the Blobs with some pointers from a wonderful individual from this Discord channel
The Backend as well as the DB is already up on Azure
and the Frontend is up on Github Pages; So i'm trying to get away from anything local haha
I'm sure Azure Blobs wont set me back too much
Make sure images are served with a long cache duration
And use cache busting to make any changes the user makes still visible immediately
should be more than enough for a demo
how do i manage that? Through Azure itself? or within my code?
to me it sounds like a frontend thing
Whatever serves the files
The cache header has to be set
hmm; serves how? Its up on Azure and my implementation is in backedn?
Afaik cache etc is a frontend thing?
(sorry for the weird questions; I'm meant to touch on Azure as a whole in ~4-5 months from now)
Whatever sends the file to the browser
It sends that file alongside some headers
Some of those headers control how the image is cached
Manage expiration of Azure Blob storage - Azure Content Delivery Ne...
Learn about the options for controlling time to live for blobs in Azure Content Delivery Network caching.
Many thanks 😄 I'll test this out later today
That doesn't seem like what you want. That's TTL for the entire blob, meaning the picture will get deleted when it expires
And as far as I understand the question here, you will be storing the actual image in the blob, not a cached version that can easily be refreshed?
Huh? Where do you get that? It's setting the Cache-Control header for GET calls.
Oh sorry, didn't see the subheader
"manage expiration of blob content" is a curious place to put cache headers
So what i've done is; I've set up so the Image gets stored using Azure Blob Storage; And i get a SAS URL that gets stored in the Database. I haven't thought about Cache or anything like that
Which is definitely something to do
You wouldn't put a cache here
The blob.storage handles that for you
Oh; So what do i need to do with it next? Azure as a whole is a new concept to me haha; This takes it a step further
The browser will see the URL, check the cache lifetime that was set by the blob storage (configured by you as per the link above)
Oooooooh okay
Is there any standard Cache Lifetime that people tend to follow?
Think of the blob storage as an external storage place. That's it
If you make it so an updated profile image won't reuse the same URL, you could set the maximum
Yeah haha; that much i gathered; I didnt have access to the Azure subscription account of where we have everything; As it belongs to a classmate. So i tested everyting using Azurite
That seems to be coming up quite often here lol
It's problematic that the person who set it all up isn't the one doing the work
If the SAS token keeps changing (i.e. you generate a new one for each request), the browser cache will not be used. Just FYI.
Since you are limited to student accounts, which I guess don't allow adding other users
Good point. Do you need SAS tokens here?
Yeah; its definitely a problem. Took this upon myself but we have to work around eachother.
Without the SAS URL that i'm generating, the User cannot really see the image i felt?
As they need proper authentication; or at least thats the error message i received
in the browser
Iirc you can remove the need for a token, so the images are available without a token
If it's ok to have public anonymous access to the pictures (definitely not OK in the real world 😄), you can skip the SAS token. Otherwise, the app can generate a container token per user that lasts for some time and keep reusing it.
You can allow anonymous access. But again, it depends on the requirements of your stakeholders. In the real world, you definitely do not want to allow public anonymous access to user pictures.
How would that work in practice? 😮 All i really want is for the image to be readable by the user; as it'll be put as an html img tag in our frontend
Hmm; Any chance i could demo what i've done to you guys?
I think its easier that way
Think of the SAS token as a proof that the URL was generated from your app
And it has a duration encoded in it
Meaning it becomes invalid after a while
So I can't hotlink your images on my blog
I see 😮
As mentioned, I would generate a token for the entire container (probably named "user_images"?), per user. Then when the user goes to a profile, you use the token tacked on to the picture and can reuse that same token for all pictures for that one user.
The reason that we use per-user, is to detect malicious users and can shut down individuals instead of forcing all users to re-cache if we need to kick someone out.
So the thing is, every User can only have ONE picture at a time anyway
As its just a Profile Picture, i limited it mainly because its not really central in our app
Sure but what about the profile pic of other users?
How do you mean? Like if i upload a Profile Picture; Im the only person that can see it
and if you upload one of your own; I cannot access it or even see it
as it is right now
Then why bother having profile pics at all? :p
Hahaha; We felt like it "Looked nicer" 😛
Alr, well zendists approach still works here
User logs in, gets a token, uses that to fetch images during their session
Also; I want to show up on the presentation on Tuesday and be like "So i used Azure Blob Storage, and SAS Tokens" :PatrickChad:
😄
Good excuse:p
Hahaha 😄
If you can only see your own photo, I would probably base64-encode a thumbnail of the image into the DB and just cache it in-memory on first request, given how few users you have 😄. But good opportunity to learn about blobs and doing it right with SAS etc.
Yeah definitely; we are going to work more with Azure this fall (we havent even touched on the subject yet); But i intend on using it in a more practical way when the time comes 😄
Thanks so much guys 😄
I've learned a ton
With cache busting, a year or so