{"id":19294593,"url":"https://github.com/web3-storage/example-image-gallery","last_synced_at":"2025-04-22T08:30:34.519Z","repository":{"id":40458403,"uuid":"389778300","full_name":"web3-storage/example-image-gallery","owner":"web3-storage","description":"A simple example of using Web3.Storage to share images using decentralized storage","archived":true,"fork":false,"pushed_at":"2023-05-05T10:49:20.000Z","size":195,"stargazers_count":25,"open_issues_count":2,"forks_count":18,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-12T22:42:35.977Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/web3-storage.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-07-26T21:58:56.000Z","updated_at":"2024-09-27T18:29:03.000Z","dependencies_parsed_at":"2022-08-26T16:52:20.672Z","dependency_job_id":null,"html_url":"https://github.com/web3-storage/example-image-gallery","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/web3-storage%2Fexample-image-gallery","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/web3-storage%2Fexample-image-gallery/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/web3-storage%2Fexample-image-gallery/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/web3-storage%2Fexample-image-gallery/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/web3-storage","download_url":"https://codeload.github.com/web3-storage/example-image-gallery/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250205975,"owners_count":21392157,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-09T22:38:50.450Z","updated_at":"2025-04-22T08:30:34.200Z","avatar_url":"https://github.com/web3-storage.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Web3.Storage example-image-gallery\n\nThis is an example of using [Web3.Storage](https://web3.storage) to create a simple image gallery that can be shared with your friends using decentralized web tech like [IPFS](https://ipfs.io) and [Filecoin](https://filecoin.io).\n\n## Usage\n\nClone this repository and enter the new directory:\n\n```shell\ngit clone https://github.com/web3-storage/example-image-gallery\ncd example-image-gallery\n```\n\nInstall dependencies:\n\n```shell\nnpm install\n```\n\nRun the dev server:\n\n```shell\nnpm run dev\n```\n\nOpen http://localhost:3000 in your browser.\n\nOn the first run, you'll be redirected to http://localhost:3000/settings.html to paste in an API token. If you don't have a token yet, see the [Quickstart guide](https://docs.web3.storage/) to learn how to get one.\nThe token is saved to your browser's local storage, so you should only need to do this once.\n\n### Building for production\n\nThe commands above will run a development server that supports fancy features like hot-reloading when you change the code. This is provided by [Vite.js](https://vitejs.dev), which also bundles up the site for a production deployment.\n\nIf you want to deploy the site somewhere, you can run\n\n```shell\nnpm run build\n```\n\nThis will create a `dist` folder with the compiled site. It will look something like this:\n\n```\ndist\n├── assets\n│   ├── favicon.17e50649.svg\n│   ├── gallery.c6431f3b.js\n│   ├── main.af36d20e.js\n│   ├── main.b06b9f34.js\n│   ├── main.b26a67ee.css\n│   ├── settings.ad3ba2b6.js\n│   └── vendor.061fb27f.js\n├── gallery.html\n├── index.html\n└── settings.html\n```\n\nThe contents of the `dist` folder can be copied to any static web host, or even published to IPFS and Filecoin using Web3.Storage.\n\nTo view the compiled site on your local computer, you'll need to run a basic web server - just opening the `.html` files in your browser won't work, since it will block the request to load the javascript files thanks to CORS policies.\n\nYou can run a simple static HTTP server to preview the build output by running:\n\n```shell\nnpm run serve\n```\n\nYou should see something like this:\n\n```\n\u003e example-image-gallery@0.0.0 serve\n\u003e vite preview\n\n\n  vite v2.4.3 build preview server running at:\n\n  \u003e Local: http://localhost:5000/\n  \u003e Network: use `--host` to expose\n```\n\nOpening http://localhost:5000 should then take you to the site.\n\n### Deploying to Web3.Storage\n\nYou can upload the compiled site directly to Web3.Storage by running:\n\n```shell\nexport WEB3STORAGE_TOKEN=\"your-API-token\"\nnpm run deploy\n```\n\nYou'll need to replace `your-API-token` with an API token from Web3.Storage.\n\nThe [deploy script](./scripts/deploy.js) will output something similar to this:\n\n```\nLoading site files...\nUploading 10 files to Web3.Storage...\nDeployed to Web3.Storage!\nRoot cid:  bafybeifl6l3b4s7hpdm4d32vkh3gwi3cuta7owap3gooxfbrqhp7olx6m4\nGateway url: https://bafybeifl6l3b4s7hpdm4d32vkh3gwi3cuta7owap3gooxfbrqhp7olx6m4.ipfs.dweb.link\n```\n\n## Code Overview\n\nThis example project is written in \"vanilla\" JavaScript, HTML and CSS, so there's no UI framework like React or Vue in the mix, just good old `document.getElementById` and friends.\n\nThe JavaScript code uses features from the ES2018 language standard, which is supported by all modern browsers (Internet Explorer [officially doesn't count](https://techcommunity.microsoft.com/t5/windows-it-pro-blog/internet-explorer-11-desktop-app-retirement-faq/ba-p/2366549)).\n\nThere are three HTML pages inside the `src` directory:\n\n- `index.html` has the image upload UI\n- `gallery.html` has a carousel that displays your uploaded images\n- `settings.html` has a box to paste your API token into (or delete it)\n\nEach page has a corresponding JavaScript file that it imports a [JavaScript module](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules). \nFor example, `src/gallery.html` imports `src/js/gallery.js`.\n\nThere are also some helpers for DOM manipulation and other common needs in `src/js/helpers.js`, and the code for interacting with Web3.Storage in `src/js/storage.js`. Each page imports some code from these common files.\n\n### Web3.Storage interactions\n\nThe code that's specific to Web3.Storage lives in [`src/js/storage.js](./src/js/storage.js).\n\n#### Uploading images\n\nImages are uploaded in the `storeImage` function, which takes a [File](https://developer.mozilla.org/en-US/docs/Web/API/File) object and some caption text as input.\n\nThe `storeImage` function actually stores two files - we also create a small `metadata.json` file that includes the caption text and the original filename. Both files are bundled up by Web3.Storage into one IPFS directory listing.\n\n#### Listing images for the gallery view\n\nThe `listImageMetadata` function returns an [async iterator](https://2ality.com/2016/10/asynchronous-iteration.html) that will `yield` metadata about our stored images. This includes the caption we stored, as well as the IPFS Content ID and an IPFS gateway URL to the image.\n\n`listImageMetadata` uses the [`list` Web3.Storage client method](https://docs.web3.storage/reference/client-library/#list-uploads) to get metadata about all files stored using Web3.Storage and selects the ones we're interested in by checking their `name` field for a special string prefix (added in the `storeImage` method when uploading). Once it has the root CID for each upload, `listImageMetadata` will fetch the stored `metadata.json` and `yield` a metadata object to the calling function.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweb3-storage%2Fexample-image-gallery","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fweb3-storage%2Fexample-image-gallery","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweb3-storage%2Fexample-image-gallery/lists"}