Merge pull request #35 from cesardeazevedo/file-upload2

Simplify file upload interface

Author: cesardeazevedo

README.md

@@ -165,15 +165,23 @@ To handle image uploads with nostr-editor, you can configure the extension as fo
 
 ```ts
 NostrExtension.configure({
-  image: {
-    defaultUploadUrl: 'https://nostr.build',
-    defaultUploadType: 'nip96', // or blossom
-  },
-  video: {
-    defaultUploadUrl: 'https://nostr.build',
-    defaultUploadType: 'nip96', // or blossom
-  },
   fileUpload: {
+    uploadFile: (attrs: FileAttributes) => {
+      // If something went wrong, return an error string
+      if (error) {
+        return {error}
+      }
+
+      // Upload attrs.file and return an UploadTask
+      return {
+        result: {
+          url,         // The file url
+          sha256,      // The file hash
+          tags,        // Additional nostr tags to be added to imeta. Refer to NIP 94 for recommended tags.
+                       // url, x, ox, m, and size are automatically inferred but can be overridden
+        },
+      }
+    },
     immediateUpload: true, // It will automatically upload when a file is added to the editor, if false, call `editor.commands.uploadFiles()` manually
     sign: async (event) => {
       if ('nostr' in window) {

examples/react/src/App.tsx

@@ -39,6 +39,12 @@ export type NostrExtension = {
   signEvent(event: EventTemplate): Promise<NostrEvent>
 }
 
+export function bufferToHex(buffer: ArrayBuffer) {
+  return Array.from(new Uint8Array(buffer))
+    .map((b) => b.toString(16).padStart(2, '0'))
+    .join('')
+}
+
 function App() {
   const [raw, setRaw] = useState('')
   const [type, setType] = useState<EditorType>('text')
@@ -181,23 +187,18 @@ function App() {
             },
           },
           link: { autolink: type === 'markdown' },
-          video: {
-            defaultUploadUrl: 'https://nostr.build',
-            defaultUploadType: 'nip96',
-          },
-          image: {
-            defaultUploadUrl: 'https://nostr.build',
-            defaultUploadType: 'nip96',
-          },
           fileUpload: settings.fileUpload !== false && {
             immediateUpload: false,
-            sign: async (event) => {
-              if ('nostr' in window) {
-                const nostr = window.nostr as NostrExtension
-                return await nostr.signEvent(event)
+            upload: async (attrs) => {
+              const hash = bufferToHex(await crypto.subtle.digest('SHA-256', await attrs.file.arrayBuffer()))
+
+              return {
+                result: {
+                  url: URL.createObjectURL(attrs.file),
+                  sha256: hash,
+                  tags: [],
+                },
               }
-              console.error('No nostr extension found')
-              return Promise.reject('No signer found, install a nostr browser extension')
             },
             onDrop() {
               setPending(true)

examples/react/src/components/Image/ImageEditor.tsx

@@ -5,13 +5,12 @@ import type { ImageAttributes } from 'nostr-editor'
 import { AltButton } from '../AltChip'
 import { DeleteButton } from '../DeleteButton'
 import { MediaFooter } from '../MediaFooter'
-import { UploadChip } from '../UploadChip'
 import { UploadingProgress } from '../UploadingProgress'
 import { Image } from './Image'
 
 export function ImageEditor(props: NodeViewProps) {
-  const { src, alt, uploadUrl, uploading, uploadError } = props.node.attrs as ImageAttributes
-  const isUploaded = !src.startsWith('blob:http')
+  const { src, alt, sha256, uploading, error } = props.node.attrs as ImageAttributes
+  const isUploaded = Boolean(sha256)
   return (
     <NodeViewWrapper
       data-drag-handle=''
@@ -22,14 +21,6 @@ export function ImageEditor(props: NodeViewProps) {
       <Image src={src} />
       <MediaFooter>
         {!isUploaded && <AltButton value={alt} onChange={(alt) => props.updateAttributes({ alt })} />}
-        {!isUploaded && (
-          <UploadChip
-            uploadUrl={uploadUrl}
-            onChange={(uploadType, uploadUrl) => {
-              props.updateAttributes({ uploadType, uploadUrl })
-            }}
-          />
-        )}
         {isUploaded && (
           <span data-tooltip={src}>
             <IconCheck
@@ -39,8 +30,8 @@ export function ImageEditor(props: NodeViewProps) {
             />
           </span>
         )}
-        {uploadError && (
-          <span data-tooltip={uploadError} className=''>
+        {error && (
+          <span data-tooltip={error} className=''>
             <IconFileX
               size={28}
               strokeWidth='1.5'

examples/react/src/components/UploadChip.tsx

@@ -5,13 +5,12 @@ import type { VideoAttributes } from 'nostr-editor'
 import { AltButton } from '../AltChip'
 import { DeleteButton } from '../DeleteButton'
 import { MediaFooter } from '../MediaFooter'
-import { UploadChip } from '../UploadChip'
 import { UploadingProgress } from '../UploadingProgress'
 import { Video } from './Video'
 
 export function VideoEditor(props: NodeViewProps) {
-  const { src, alt, uploadError, uploadUrl, uploading } = props.node.attrs as VideoAttributes
-  const isUploaded = !src.startsWith('blob:http')
+  const { src, alt, sha256, error, uploading } = props.node.attrs as VideoAttributes
+  const isUploaded = Boolean(sha256)
   return (
     <NodeViewWrapper
       data-drag-handle=''
@@ -22,12 +21,6 @@ export function VideoEditor(props: NodeViewProps) {
       <Video controls={false} src={src} />
       <MediaFooter>
         {!isUploaded ? <AltButton value={alt} onChange={(alt) => props.updateAttributes({ alt })} /> : <div />}
-        {!isUploaded && (
-          <UploadChip
-            uploadUrl={uploadUrl}
-            onChange={(uploadType, uploadUrl) => props.updateAttributes({ uploadType, uploadUrl })}
-          />
-        )}
         {isUploaded && (
           <span data-tooltip={src}>
             <IconCheck
@@ -37,8 +30,8 @@ export function VideoEditor(props: NodeViewProps) {
             />
           </span>
         )}
-        {uploadError && (
-          <span data-tooltip={uploadError} className=''>
+        {error && (
+          <span data-tooltip={error} className=''>
             <IconFileX
               size={28}
               strokeWidth='1.5'

examples/react/src/components/Video/VideoEditor.tsx

@@ -46,7 +46,6 @@
     "eslint-plugin-prettier": "^5.2.1",
     "globals": "^15.9.0",
     "happy-dom": "^15.0.0",
-    "msw": "2.5.2",
     "prettier": "^3.3.3",
     "prosemirror-view": "^1.39.3",
     "rollup-plugin-peer-deps-external": "^2.2.4",
@@ -66,7 +65,7 @@
     "@tiptap/extension-link": "^2.6.6",
     "@tiptap/pm": "^2.6.6",
     "linkifyjs": "^4.1.3",
-    "nostr-tools": "~2.12.0",
+    "nostr-tools": "^2.14.2",
     "prosemirror-markdown": "^1.13.0",
     "prosemirror-model": "^1.22.3",
     "prosemirror-state": "^1.4.3",