How do I upload an image to a canister?

Developers Programs & Applications
1

I want the flow to be :
A user uploads an image → It gets stored in a canister → A user can visit a url and see that image.

I do know about cancan but its a bit complicated.

3 Likes
2

Static images: use “asset” canisters (see the SDK quick start)
User-generated images: chunk image blobs in the client and call custom canister methods with those blobs as arguments (see CanCan’s source)

1 Like
3

@jzxchiang Where exactly should i look in cancans code

4

@kpeacock another dev with the same question on uploading blobs. I think I’ve made my point so I’ll stop @'ing you on stuff now. My apologies again :sweat_smile:

5

Check this out: File Storage On IC - #7 by jzxchiang

2 Likes
6

I just created another example here: GitHub - pattad/imgTank

1 Like
7

Hi guys,
I’m running into this - since I would like users of my app to upload images - and a lot of questions of popping up:

  • What is the best architecture to support this: is it recommended to have a separate canister just for hosting the uploaded images ?
  • Feels like most apps are going to need such a feature: is there any recent working guide/example of uploading images to a canister ? (I have a react + motoko app). @pattad Would you say you’re example is still up to date ? Are you still using it ?

Thanks !

8

yes I’m still using it and its working. However, please check the latest Api documentation of Motoko to check its status.

1 Like
9

In the end I simply stored images as a base64 string. It appears to work quite nicely, but I haven’t tried in production yet.
Anyway, thanks for your help :slight_smile: