Netlify Dynamic Site Challenge : Building blob playground with Netlify Blob

This is a submission for the Netlify Dynamic Site Challenge: Build with Blobs.

What I Built

I implemented a file upload feature in an Angular application, allowing users to store files in Netlify Blobs storage. Users can upload files, which are then stored in the Netlify Blobs store. Additionally, I integrated Netlify Functions to handle processing tasks, enabling efficient retrieval and management of blob objects, including metadata handling.

Demo

img-playground.netlify.app

Platform Primitives

• Angular Application: I've created an Angular application as the front end for interacting with the Netlify Blobs.

• File Upload Feature: Users can upload files through the Angular application's interface. This involves creating a form with a file input field and handling the file submission in the Angular component.

• Netlify Blob Storage Integration: I've integrated Netlify Blobs into the Angular application. This includes setting up the necessary configurations to interact with the Netlify Blobs API provided by Netlify. To use the Netlify Blobs API, first install the @netlify/blobs module using the
  

npm install @netlify/blobs

• Storing Files as Blobs: Upon file upload, the Angular application converts the file into an object and sets it into the Netlify Blobs. This involves making API requests to Netlify Blob storage endpoints. First we will get store after that we will setJson into it.

 const mystore = getStore("your-store-name");
 await mystore.setJSON("file-1", { type: "file", filesize: "10kb" });

• Retrieving Files: Users can retrieve files stored in the Netlify Blobs through your Angular application. This involves making API requests to fetch Blob objects from Netlify Blobs and rendering them appropriately in the application interface.

 const mystore = getStore("your-store-name");
 const entry1 = await my store.get("file-1");
 console.log(entry1) //you will get the above setjson value

• Metadata Handling: The application handles metadata associated with the uploaded files. This might include storing additional information like file name, file size, upload timestamp, etc., along with the Blob object in the storage.

//set(key, value, { metadata? })
const mystore = getStore("your-store-name");
 await mystore.setJSON("file-1", { type: "file", fileData: "xyz" }, {metadata: { name: "font.png", type: "image/png", size: "1.2 KiB" });

• Integration with Netlify Functions: I've integrated Netlify Functions into project for processing tasks related to Blobs. This could include tasks like file manipulation, set metadata, or any other custom operations you need to perform on the Blobs.

npm install @netlify/functions

import type { Context } from "@netlify/functions"

export default async (req: Request, context: Context) => {
  return new Response("Hello, world!")
}

Netlify Dynamic Site Challenge : Building a All in one Image playground with Netlify Image CDN

chintanonweb ・ May 2

#netlifychallenge #devchallenge #webdev #javascript

Netlify Dynamic Site Challenge : Building News Article Cache Management playground

chintanonweb ・ May 8

#netlifychallenge #devchallenge #webdev #javascript