Update Cascade and Sense Protocol providers

examples/astro-example/package.json

@@ -17,6 +17,8 @@
 		"@astrojs/vue": "^4.0.9",
 		"@lukso/data-provider-ipfs-http-client": "workspace:*",
 		"@lukso/data-provider-pinata": "workspace:*",
+		"@lukso/data-provider-cascade": "workspace:*",
+		"@lukso/data-provider-sense": "workspace:*",
 		"@lukso/data-provider-urlresolver": "workspace:*",
 		"@types/react": "^18.2.73",
 		"@types/react-dom": "^18.2.23",

examples/astro-example/src/components/UploadCascade.tsx

@@ -0,0 +1,39 @@
+import { CascadeUploader } from "@lukso/data-provider-cascade";
+import React, { useCallback, useMemo, useRef, useState } from "react";
+import { urlResolver } from "./shared";
+
+export default function UploadPinata() {
+	const provider = useMemo(
+		() =>
+			new CascadeUploader(import.meta.env.CASCADE_API_KEY),
+		[],
+	);
+
+	const fileInput = useRef<HTMLInputElement>(null);
+	const [url, setUrl] = useState("");
+	const [resultId, setResultId] = useState("");
+	const [imageUrl, setImageUrl] = useState("");
+
+	const upload = useCallback(async () => {
+		const file = fileInput?.current?.files?.item(0) as File;
+		const { ipfs_url: url, result_id } = await provider.uploadToCascade(file);
+		setUrl(url);
+		setResultId(result_id);
+		const imageUrl = urlResolver.resolveUrl(url);
+		setImageUrl(imageUrl);
+	}, [provider.upload]);
+
+	return (
+		<div>
+			<input ref={fileInput} type="file" accept="image/*" />
+			<button type="button" onClick={upload}>
+				Upload
+			</button>
+			<div className="url">Url: {url}</div>
+			<div className="hash">Result Id: {resultId}</div>
+			<div>
+				<img className="image" src={imageUrl} alt="uploaded" />
+			</div>
+		</div>
+	);
+}

examples/astro-example/src/components/UploadSense.tsx

@@ -0,0 +1,39 @@
+import { SenseUploader } from "@lukso/data-provider-sense";
+import React, { useCallback, useMemo, useRef, useState } from "react";
+import { urlResolver } from "./shared";
+
+export default function UploadPinata() {
+	const provider = useMemo(
+		() =>
+			new SenseUploader(import.meta.env.SENSE_API_KEY),
+		[],
+	);
+
+	const fileInput = useRef<HTMLInputElement>(null);
+	const [url, setUrl] = useState("");
+	const [resultId, setResultId] = useState("");
+	const [imageUrl, setImageUrl] = useState("");
+
+	const upload = useCallback(async () => {
+		const file = fileInput?.current?.files?.item(0) as File;
+		const { ipfs_url: url, result_id } = await provider.uploadToSense(file);
+		setUrl(url);
+		setResultId(result_id);
+		const imageUrl = urlResolver.resolveUrl(url);
+		setImageUrl(imageUrl);
+	}, [provider.upload]);
+
+	return (
+		<div>
+			<input ref={fileInput} type="file" accept="image/*" />
+			<button type="button" onClick={upload}>
+				Upload
+			</button>
+			<div className="url">Url: {url}</div>
+			<div className="hash">Result Id: {resultId}</div>
+			<div>
+				<img className="image" src={imageUrl} alt="uploaded" />
+			</div>
+		</div>
+	);
+}

examples/astro-example/src/components/UploadVueCascade.vue

@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <input ref="fileInput" type="file" accept="image/*" />
+    <button @click="upload">Upload</button>
+    <div className="url">{{ url }}</div>
+    <div className="hash">{{ resultId }}</div>
+    <div>
+      <img className="image" :src="imageUrl" alt="uploaded image" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Hash } from "node:crypto";
+import { CascadeUploader } from "@lukso/data-provider-cascade";
+import { ref } from "vue";
+import { urlResolver } from "./shared";
+
+const url = ref("");
+const resultId = ref("");
+const imageUrl = ref("");
+const fileInput = ref<HTMLInputElement | null>(null);
+
+const provider = new CascadeUploader(import.meta.env.CASCADE_API_KEY);
+
+const upload = async () => {
+	const file = fileInput.value?.files?.item(0) as File;
+	const formData = new FormData();
+	formData.append("file", file); // FormData keys are called fields
+	const info = await provider.upload(file);
+	url.value = info.ipfs_url;
+	resultId.value = info.result_id;
+	imageUrl.value = urlResolver.resolveUrl(url.value);
+};
+</script>

examples/astro-example/src/components/UploadVueSense.vue

@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <input ref="fileInput" type="file" accept="image/*" />
+    <button @click="upload">Upload</button>
+    <div className="url">{{ url }}</div>
+    <div className="hash">{{ resultId }}</div>
+    <div>
+      <img className="image" :src="imageUrl" alt="uploaded image" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Hash } from "node:crypto";
+import { SenseUploader } from "@lukso/data-provider-sense";
+import { ref } from "vue";
+import { urlResolver } from "./shared";
+
+const url = ref("");
+const resultId = ref("");
+const imageUrl = ref("");
+const fileInput = ref<HTMLInputElement | null>(null);
+
+const provider = new SenseUploader(import.meta.env.SENSE_API_KEY);
+
+const upload = async () => {
+	const file = fileInput.value?.files?.item(0) as File;
+	const formData = new FormData();
+	formData.append("file", file); // FormData keys are called fields
+	const info = await provider.upload(file);
+	url.value = info.ipfs_url;
+	resultId.value = info.result_id;
+	imageUrl.value = urlResolver.resolveUrl(url.value);
+};
+</script>

examples/astro-example/src/pages/api-cascade.ts

@@ -0,0 +1,17 @@
+import { CascadeUploader } from "@lukso/data-provider-cascade";
+import type { APIContext } from "astro";
+
+// File routes export a get() function, which gets called to generate the file.
+// Return an object with `body` to save the file contents in your final build.
+// If you export a post() function, you can catch post requests, and respond accordingly
+export async function POST({ request }: APIContext) {
+	const formData = await request.formData();
+	const file = formData.get("file");
+
+	const provider = new CascadeUploader(process.env.CASCADE_API_KEY);
+
+	const result = await provider.uploadToCascade(file);
+	return new Response(JSON.stringify({ Hash: result.ipfs_url }), {
+		headers: { contentType: "application/json" },
+	});
+}

examples/astro-example/src/pages/api-sense.ts

@@ -0,0 +1,17 @@
+import { SenseUploader } from "@lukso/data-provider-sense";
+import type { APIContext } from "astro";
+
+// File routes export a get() function, which gets called to generate the file.
+// Return an object with `body` to save the file contents in your final build.
+// If you export a post() function, you can catch post requests, and respond accordingly
+export async function POST({ request }: APIContext) {
+	const formData = await request.formData();
+	const file = formData.get("file");
+
+	const provider = new SenseUploader(process.env.SENSE_API_KEY);
+
+	const result = await provider.uploadToSense(file);
+	return new Response(JSON.stringify({ Hash: result.ipfs_url }), {
+		headers: { contentType: "application/json" },
+	});
+}

examples/astro-example/src/pages/index.astro

@@ -4,8 +4,12 @@ import Card from "../components/Card.astro";
 import ReactCard from "../components/ReactCard.tsx";
 import Upload from "../components/Upload.tsx";
 import UploadPinata from "../components/UploadPinata.tsx";
+import UploadCascade from "../components/UploadCascade.tsx";
+import UploadSense from "../components/UploadSense.tsx";
 import UploadVue from "../components/UploadVue.vue";
 import UploadVuePinata from "../components/UploadVuePinata.vue";
+import UploadVueCascade from "../components/UploadVueCascade.vue";
+import UploadVueSense from "../components/UploadVueSense.vue";
 import VueCard from "../components/VueCard.vue";
 import Layout from "../layouts/Layout.astro";
 ---
@@ -56,6 +60,12 @@ import Layout from "../layouts/Layout.astro";
           }
         }}/>
       </ReactCard>
+			<ReactCard color="white" title="Upload to Cascade" client:only="react">
+        <UploadCascade client:only="react"/>
+      </ReactCard>
+			<ReactCard color="white" title="Upload to Sense" client:only="react">
+        <UploadSense client:only="react"/>
+      </ReactCard>
 
       <li><h3>Frontend Vue</h3></li>
       <VueCard color="white" title="Upload to Local" client:only="vue">
@@ -71,6 +81,12 @@ import Layout from "../layouts/Layout.astro";
           }
         }}/>
       </VueCard>
+			<VueCard color="white" title="Upload to Cascade" client:only="vue">
+        <UploadVueCascade client:only="vue"/>
+      </VueCard>
+			<VueCard color="white" title="Upload to Sense" client:only="vue">
+        <UploadVueSense client:only="vue"/>
+      </VueCard>
 
       <li><h3>Backend React</h3></li>
       <ReactCard color="white" title="Upload to Local" client:only="react">
@@ -82,6 +98,12 @@ import Layout from "../layouts/Layout.astro";
       <ReactCard color="white" title="Upload to Infura" client:only="react">
         <Upload client:only="react" gateway="/api-infura"/>
       </ReactCard>
+      <ReactCard color="white" title="Upload to Cascade" client:only="react">
+        <Upload client:only="react" gateway="/api-cascade"/>
+      </ReactCard>
+      <ReactCard color="white" title="Upload to Sense" client:only="react">
+        <Upload client:only="react" gateway="/api-sense"/>
+      </ReactCard>
 
       <li><h3>Backend Vue</h3></li>
       <VueCard color="white" title="Upload to Local" client:only="vue">
@@ -92,6 +114,12 @@ import Layout from "../layouts/Layout.astro";
       </VueCard>
       <VueCard color="white" title="Upload to Infura" client:only="vue">
         <UploadVue client:only="vue" gateway="/api-infura"/>
+      </VueCard>
+			<VueCard color="white" title="Upload to Cascade" client:only="vue">
+        <UploadVue client:only="vue" gateway="/api-cascade"/>
+      </VueCard>
+      <VueCard color="white" title="Upload to Sense" client:only="vue">
+        <UploadVue client:only="vue" gateway="/api-sense"/>
       </VueCard>
 		</ul>
 	</main>

examples/upload-cascade.mjs

@@ -0,0 +1,34 @@
+import { createReadStream } from "node:fs";
+import { CascadeUploader } from "@lukso/data-provider-cascade";
+import { config } from "dotenv";
+
+config({ path: "./.env.test" });
+
+const provider = new CascadeUploader(
+	process.env.CASCADE_API_KEY || ""
+);
+
+const file = createReadStream("./examples/test-image.png");
+
+const result = await provider.uploadToCascade(file);
+
+if (result) {
+  console.log(result.ipfs_url);
+
+  // Get transaction status
+  const status = await provider.retrieveTxId(result.result_id);
+  console.log(status); // { status: "PENDING" or "SUCCESS", tx_id: activation_transaction_id }
+}
+
+// upload folder
+const results = await provider.uploadFolderToCascade("./examples");
+
+if (results.length > 0) {
+  for (const result of results) {
+    if (result) {
+      console.log("File Name:", result.file_name);
+      console.log("IPFS Url:", result.ipfs_url);
+      console.log("Result Id:", result.result_id);
+    }
+  }
+}

examples/upload-sense.mjs

@@ -0,0 +1,34 @@
+import { createReadStream } from "node:fs";
+import { SenseUploader } from "@lukso/data-provider-sense";
+import { config } from "dotenv";
+
+config({ path: "./.env.test" });
+
+const provider = new SenseUploader(
+	process.env.SENSE_API_KEY || ""
+);
+
+const file = createReadStream("./examples/test-image.png");
+
+const result = await provider.uploadToSense(file);
+
+if (result) {
+  console.log(result.ipfs_url);
+
+  // Get transaction status
+  const status = await provider.retrieveTxId(result.result_id);
+  console.log(status); // { status: "PENDING" or "SUCCESS", tx_id: activation_transaction_id }
+}
+
+// upload folder
+const results = await provider.uploadFolderToSense("./examples");
+
+if (results.length > 0) {
+  for (const result of results) {
+    if (result) {
+      console.log("File Name:", result.file_name);
+      console.log("IPFS Url:", result.ipfs_url);
+      console.log("Result Id:", result.result_id);
+    }
+  }
+}

packages/data-provider-cascade/etc/data-provider-cascade.api.md

@@ -8,12 +8,49 @@ import { BaseFormDataUploader } from '@lukso/data-provider-base';
 import { FormDataPostHeaders } from '@lukso/data-provider-base';
 import { FormDataRequestOptions } from '@lukso/data-provider-base';
 
+// @public (undocumented)
+export interface CascadeUploadedResult {
+    // (undocumented)
+    request_id: string;
+    // (undocumented)
+    request_status: string;
+    // (undocumented)
+    results: [
+        {
+        result_status: string;
+        file_name: string;
+        file_type: string;
+        file_id: string;
+        created_at: Date;
+        last_updated_at: Date;
+        retry_num: number;
+        registration_ticket_txid: string;
+        activation_ticket_txid: string;
+        original_file_ipfs_link: string;
+        stored_file_ipfs_link: string;
+        stored_file_aws_link: string;
+        stored_file_other_links: object;
+        make_publicly_accessible: boolean;
+        offer_ticket_txid: string;
+        offer_ticket_intended_rcpt_pastel_id: string;
+        error: string;
+        result_id: string;
+    }
+    ];
+}
+
 // @public (undocumented)
 class CascadeUploader extends BaseFormDataUploader {
     constructor(apiKey: string);
     getEndpoint(): string;
+    // (undocumented)
+    getGatewayUrl(): string;
     getRequestOptions(_dataContent: FormData, meta?: FormDataPostHeaders): Promise<FormDataRequestOptions>;
     resolveUrl(result: any): string;
+    // (undocumented)
+    retrieveTxId(result_id: string): Promise<any>;
+    // (undocumented)
+    uploadToCascade(data: any, _meta?: FormDataPostHeaders): Promise<any>;
 }
 export { CascadeUploader }
 export default CascadeUploader;