{"id":28654019,"url":"https://github.com/stephenlb/pubnub-files-api-large-json-payloads","last_synced_at":"2025-06-13T07:09:03.958Z","repository":{"id":294315758,"uuid":"986580971","full_name":"stephenlb/pubnub-files-api-large-json-payloads","owner":"stephenlb","description":"Use PubNub to send \u003e 32KB files and many MB","archived":false,"fork":false,"pushed_at":"2025-05-19T21:13:10.000Z","size":6,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-19T21:44:13.378Z","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/stephenlb.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-19T20:30:19.000Z","updated_at":"2025-05-19T21:13:13.000Z","dependencies_parsed_at":"2025-05-19T21:54:18.332Z","dependency_job_id":null,"html_url":"https://github.com/stephenlb/pubnub-files-api-large-json-payloads","commit_stats":null,"previous_names":["stephenlb/pubnub-files-api-large-json-payloads"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/stephenlb/pubnub-files-api-large-json-payloads","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stephenlb%2Fpubnub-files-api-large-json-payloads","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stephenlb%2Fpubnub-files-api-large-json-payloads/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stephenlb%2Fpubnub-files-api-large-json-payloads/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stephenlb%2Fpubnub-files-api-large-json-payloads/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stephenlb","download_url":"https://codeload.github.com/stephenlb/pubnub-files-api-large-json-payloads/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stephenlb%2Fpubnub-files-api-large-json-payloads/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259599330,"owners_count":22882357,"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":"2025-06-13T07:09:01.829Z","updated_at":"2025-06-13T07:09:03.916Z","avatar_url":"https://github.com/stephenlb.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# PubNub Files API Demo with Material-UI\n\nThis application demonstrates how to use the PubNub Files API with SDK version 9.5.2 to upload an in-memory JSON object as a file and receive notifications to download the file once it's ready. The UI is built using Material-UI for a modern, professional look.\n\n## Features\n\n- Uses the latest PubNub JavaScript SDK 9.5.2\n- Uploads an in-memory JSON object as a file\n- Receives file upload notifications in real-time\n- Downloads and displays the JSON file content\n\n## Setup Instructions\n\n1. Replace the placeholder PubNub keys in `app.js`:\n   ```javascript\n   const pubnub = new PubNub({\n       publishKey: 'YOUR_PUBLISH_KEY',\n       subscribeKey: 'YOUR_SUBSCRIBE_KEY',\n       userId: 'files-demo-user-' + new Date().getTime()\n   });\n   ```\n\n2. Enable the \"Files\" add-on in your PubNub Admin Portal for your keyset\n\n3. Open `index.html` in a web browser\n\n## How It Works\n\n1. **Initialization**:\n   - The app initializes PubNub with your keys\n   - Creates a subscription to a channel for file events\n\n2. **File Upload**:\n   - When you click the \"Upload JSON Data\" button, the app:\n     - Creates an in-memory JSON object\n     - Converts it to a Blob and then to a File object\n     - Uploads it using `pubnub.sendFile()`\n     - The SDK handles both the file upload to storage and the file message publication\n\n3. **File Notification**:\n   - The app listens for file events on the channel via `subscription.onFile`\n   - When a file upload is detected, event details are displayed\n\n4. **File Download**:\n   - When a file notification is received, the app automatically:\n     - Downloads the file using `pubnub.downloadFile()`\n     - Converts the file content to a string and parses it as JSON\n     - Displays the content on the screen\n\n## Key Code Sections\n\n### Uploading JSON File\n\n```javascript\n// Convert JSON to string and then to Blob (in-memory file)\nconst jsonString = JSON.stringify(sampleData, null, 2);\nconst jsonBlob = new Blob([jsonString], { type: 'application/json' });\n\n// Create a File object from the Blob\nconst jsonFile = new File([jsonBlob], 'sample-data.json', { \n    type: 'application/json',\n    lastModified: new Date().getTime()\n});\n\n// Upload file using PubNub Files API\nconst result = await pubnub.sendFile({\n    channel: CHANNEL,\n    file: jsonFile,\n    message: {\n        text: 'Sample JSON data file',\n        sender: pubnub.getUUID()\n    }\n});\n```\n\n### Listening for File Events\n\n```javascript\n// Add file event listener to subscription\nsubscription.onFile = (event) =\u003e {\n    console.log('File event received:', event);\n    \n    downloadStatus.innerHTML = `\n        \u003cp\u003eNew file received!\u003c/p\u003e\n        \u003cp\u003e\u003cstrong\u003eFile ID:\u003c/strong\u003e ${event.file.id}\u003c/p\u003e\n        \u003cp\u003e\u003cstrong\u003eFile Name:\u003c/strong\u003e ${event.file.name}\u003c/p\u003e\n        \u003cp\u003e\u003cstrong\u003eFrom:\u003c/strong\u003e ${event.publisher}\u003c/p\u003e\n    `;\n    \n    // Download the file\n    downloadFile(event.file.id, event.file.name);\n};\n```\n\n### Downloading and Displaying File\n\n```javascript\n// Download the file\nconst file = await pubnub.downloadFile({\n    channel: CHANNEL,\n    id: fileId,\n    name: fileName\n});\n\n// Convert file to JSON\nconst jsonText = await file.toString();\nconst jsonData = JSON.parse(jsonText);\n\n// Display file content\ndownloadStatus.textContent = 'File downloaded successfully:';\nfileContent.innerHTML = `\u003cpre\u003e${JSON.stringify(jsonData, null, 2)}\u003c/pre\u003e`;\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstephenlb%2Fpubnub-files-api-large-json-payloads","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstephenlb%2Fpubnub-files-api-large-json-payloads","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstephenlb%2Fpubnub-files-api-large-json-payloads/lists"}