# Hello! Here my first app for upload images

**URL:** <https://discuss.ipfs.tech/t/hello-here-my-first-app-for-upload-images/14246>\
**Category:** Ecosystem and Usage\
**Created:** [May 17, 2022, 12:52am UTC](https://discuss.ipfs.tech/t/hello-here-my-first-app-for-upload-images/14246 "2022-05-17T00:52:09Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![unllamas](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ipfs.tech/unllamas/32/6471_2.png) [@unllamas](https://discuss.ipfs.tech/u/unllamas)\
**Post date:** [May 17, 2022, 12:52am UTC](https://discuss.ipfs.tech/t/hello-here-my-first-app-for-upload-images/14246/1 "2022-05-17T00:52:09Z")

</div>

Hi,

I have set up a small project to upload images to IPFS. The node is with NextJS in a context and everything is great. I was doing performance tests on different devices, and on mobiles the older, the more difficult to process the information

**Desktop:** ~7/9s in Macbooks  
**Mobile:**

- ~2s iPhone 13 Pro Max
- ~8s iPhone 11
- ~10s iPhone 8
- ~30s Samsung A52
- Never init in Motorola G8 Power Lite

**All tests were performed on:** [Upload image to IPFS](https://simple-image-upload-ipfs.vercel.app/cid/QmPrVmpeEThfeJUD58BMRFTci1aAiYEshZUuNw5BUgKbAD)  
_Image taken from the Apollo 12 project_. Image: 2mb (4400 × 4430)

**Proyect:** [https://simple-image-upload-ipfs.vercel.app/](https://simple-image-upload-ipfs.vercel.app/)  
**Repo:** [GitHub - jonallamas/simple-image-upload-ipfs: Simple app for upload and share images with IPFS](https://github.com/jonallamas/simple-image-upload-ipfs)

Any comment or suggestion is welcome 😊 i’m front-end developer

**Analytics by Vercel for Mobile:**

 ![Screen Shot 2022-05-16 at 22.09.32](https://us1.discourse-cdn.com/flex020/uploads/ipfs1/original/2X/a/aeb7c175076c698d47966e04aea66b1847c446e8.png)  
 ![Screen Shot 2022-05-16 at 22.09.53](https://us1.discourse-cdn.com/flex020/uploads/ipfs1/original/2X/5/57cc868679e9691d98ff1b68532cedb0440062b4.png)

**Analytics by Vercel for Desktop:**

 ![Screen Shot 2022-05-16 at 22.26.59](https://us1.discourse-cdn.com/flex020/uploads/ipfs1/original/2X/1/1ca47a8543f945bcccf55583ff87347c10255c7f.png)  
 ![Screen Shot 2022-05-16 at 22.27.13](https://us1.discourse-cdn.com/flex020/uploads/ipfs1/original/2X/5/5483ba5679812079e2e1b143307a0f45cad81e48.png)

---

<div class="post-metadata">

**Author:** ![danieln](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ipfs.tech/danieln/32/6408_2.png) [@danieln](https://discuss.ipfs.tech/u/danieln)\
**Post date:** [May 17, 2022, 8:51am UTC](https://discuss.ipfs.tech/t/hello-here-my-first-app-for-upload-images/14246/2 "2022-05-17T08:51:54Z")

</div>

This is great stuff!

You could take this further and use a bunch of services like [Pinata](https://docs.pinata.cloud/api-pinning/pin-by-hash), [infura](https://docs.infura.io/infura/networks/ipfs/how-to/manage-files) and [web3.storage](https://web3.storage/docs/how-tos/pinning-services-api/) to pin the CID after it’s been added to the network.

---

<div class="post-metadata">

**Author:** ![Galactus](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ipfs.tech/galactus/32/6540_2.png) [@Galactus](https://discuss.ipfs.tech/u/Galactus)\
**Post date:** [May 18, 2022, 7:18am UTC](https://discuss.ipfs.tech/t/hello-here-my-first-app-for-upload-images/14246/3 "2022-05-18T07:18:39Z")

</div>

Awesome work @unllamas

When image is uploaded to IPFS, the UI shows button to “See Image”.  
It will be better if you provide option to copy publicly sharable link with any available public gateway.

---

<div class="post-metadata">

**Author:** ![unllamas](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ipfs.tech/unllamas/32/6471_2.png) [@unllamas](https://discuss.ipfs.tech/u/unllamas)\
**Post date:** [May 18, 2022, 2:12pm UTC](https://discuss.ipfs.tech/t/hello-here-my-first-app-for-upload-images/14246/4 "2022-05-18T14:12:04Z")

</div>

Thanks Daniel!  
I’m not knowing web3.storage

So I would have to do `ipfs.add` and `ipfs.pin` ?

---

<div class="post-metadata">

**Author:** ![unllamas](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ipfs.tech/unllamas/32/6471_2.png) [@unllamas](https://discuss.ipfs.tech/u/unllamas)\
**Post date:** [May 18, 2022, 2:22pm UTC](https://discuss.ipfs.tech/t/hello-here-my-first-app-for-upload-images/14246/5 "2022-05-18T14:22:21Z")

</div>

Thanks!

You say add a 2nd share button? I don’t understand 😅

---

<div class="post-metadata">

**Author:** ![Galactus](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ipfs.tech/galactus/32/6540_2.png) [@Galactus](https://discuss.ipfs.tech/u/Galactus)\
**Post date:** [May 18, 2022, 3:01pm UTC](https://discuss.ipfs.tech/t/hello-here-my-first-app-for-upload-images/14246/6 "2022-05-18T15:01:28Z")

</div>

no no.  
Just an option to share same url using any public gateway, say cloudflare gateway.

---

<div class="post-metadata">

**Author:** ![unllamas](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ipfs.tech/unllamas/32/6471_2.png) [@unllamas](https://discuss.ipfs.tech/u/unllamas)\
**Post date:** [May 19, 2022, 2:54am UTC](https://discuss.ipfs.tech/t/hello-here-my-first-app-for-upload-images/14246/7 "2022-05-19T02:54:08Z")

</div>

Change `.com/cid/QmP...` by `.com/QmP...` ?

---

<div class="post-metadata">

**Author:** ![danieln](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ipfs.tech/danieln/32/6408_2.png) [@danieln](https://discuss.ipfs.tech/u/danieln)\
**Post date:** [May 20, 2022, 12:37pm UTC](https://discuss.ipfs.tech/t/hello-here-my-first-app-for-upload-images/14246/8 "2022-05-20T12:37:42Z")

</div>

Great question.

When a file is added to the new IPFS node that you instantiated in the browser, there’s a good chance that even if you upload the file and it’s cached on some of the bootstrap servers, after a while the CID will be garbage collected and won’t be available after that.

By using a pinning service, you basically ask services that operate IPFS nodes to keep the file available to the network.

As @Galactus suggested, you could also share a link to view the file from a [public gateway](https://docs.ipfs.io/concepts/ipfs-gateway/#gateway-providers)

---

<div class="post-metadata">

**Author:** ![unllamas](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ipfs.tech/unllamas/32/6471_2.png) [@unllamas](https://discuss.ipfs.tech/u/unllamas)\
**Post date:** [May 21, 2022, 3:30pm UTC](https://discuss.ipfs.tech/t/hello-here-my-first-app-for-upload-images/14246/9 "2022-05-21T15:30:47Z")

</div>

What is the purpose of pinning a file?

I understand that the CID derives from the file’s metadata, so only by obtaining the CID can I generate a file, right?

 ![Screen Shot 2022-05-21 at 12.29.24](https://us1.discourse-cdn.com/flex020/uploads/ipfs1/original/2X/1/1e6ac0d770f7e2498fc0efa7cc939d9534c5b413.png)

![Screen Shot 2022-05-21 at 12.32.28](https://us1.discourse-cdn.com/flex020/uploads/ipfs1/original/2X/6/621f1d7b24a2a5f492dc9133933fba7ebedb50eb.png)

In this way it does not depend on nodes that have the file, but on the CID itself.  
It is valid?

---

<div class="post-metadata">

**Author:** ![Galactus](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ipfs.tech/galactus/32/6540_2.png) [@Galactus](https://discuss.ipfs.tech/u/Galactus)\
**Post date:** [May 23, 2022, 7:15am UTC](https://discuss.ipfs.tech/t/hello-here-my-first-app-for-upload-images/14246/10 "2022-05-23T07:15:57Z")

</div>

> [@unllamas](#):
>
> so only by obtaining the CID can I generate a file, right?

No. That’s not true. You can’t **generate** the file just by using it’s CID.  
If the IPFS network (on any public connected node, globally) has the file, you can fetch the file by using it’s CID. But if no one has the file, it’s impossible to reconstruct the file from CID.

---

<div class="post-metadata">

**Author:** ![danieln](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ipfs.tech/danieln/32/6408_2.png) [@danieln](https://discuss.ipfs.tech/u/danieln)\
**Post date:** [May 23, 2022, 4:13pm UTC](https://discuss.ipfs.tech/t/hello-here-my-first-app-for-upload-images/14246/11 "2022-05-23T16:13:11Z")

</div>

> [@unllamas](#):
>
> I understand that the CID derives from the file’s metadata, so only by obtaining the CID can I generate a file, right?

As @Galactus pointed out this is not possible. Generating the CID is a “one-way function” meaning that you cannot derive the original data just from the CID.

You need at least one node to have the file to retrieve it.
