diff --git a/docz/docs/03-demos/30-cloud/14-cloudflare.md b/docz/docs/03-demos/30-cloud/14-cloudflare.md index 8f2a3e9..4d6011e 100644 --- a/docz/docs/03-demos/30-cloud/14-cloudflare.md +++ b/docz/docs/03-demos/30-cloud/14-cloudflare.md @@ -226,6 +226,187 @@ Please visit the [official pricing model for R2 for more info](https://developer ::: +This sample fetches a buffer from R2 and parses the workbook. + +1) If you do not have an account, create a new Cloudflare account [^7] + +2) Once in the dashboard, click on R2 , you will need a valid credit card to get access to R2 + +3) Click on Create Bucket. Select your bucket name and region. Then click "Create Bucket" at the bottom + +4) Click on R2 again on the dashboard, then click Manage R2 API Tokens + +5) Click on Create API Token, then make sure to set the correct permissions for what you want to do, then click "Create API Token" at the bottom + +#### Set up Project + +6) Create a new NodeJS project and install dependencies: + +```bash +mkdir SheetJSR2 +cd SheetJSR2 +npm init -y +# Install Dependencies +mkdir -p node_modules +npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz @aws-sdk/client-s3@3.540.0 +``` + +#### Write Test + +:::note pass + +This sample creates a simple workbook, generates a NodeJS buffer, and uploads +the buffer to S3. + +``` + | A | B | C | D | E | F | G | +---+---|---|---|---|---|---|---| + 1 | S | h | e | e | t | J | S | + 2 | 5 | 4 | 3 | 3 | 7 | 9 | 5 | +``` + +::: + +7) Save the following script to `SheetJSWriteToR2.js`: + +```js title="SheetJSWriteToR2.js" +const { PutObjectCommand, S3Client } = require("@aws-sdk/client-s3"); +const XLSX = require("xlsx"); + +/* replace these constants */ +// highlight-start +var accessKeyId = "accessKeyId"; +var secretAccessKey = "secretAccessKey"; +var Bucket = "Bucket"; +// highlight-end + +var region = "REGION"; +var Key = "sheetjstest.xlsx"; +var endpoint = "ENDPOINT"; + +/* Create a simple workbook and write XLSX to buffer */ +var ws = XLSX.utils.aoa_to_sheet(["SheetJS".split(""), [5,4,3,3,7,9,5]]); +var wb = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(wb, ws, "Sheet1"); +var Body = XLSX.write(wb, {type: "buffer", bookType: "xlsx"}); + +/* upload to R2 */ +var s3 = new S3Client({ + credentials: { + accessKeyId, + secretAccessKey + }, + region, + endpoint +}); + +const command = new PutObjectCommand({ + Body, + Bucket, + Key +}) + +s3.send(command).then(data => { + console.log("Entity Tag: " + data.ETag); +}).catch(e => { + throw e +}); +``` + +:::note pass + +Although this minimal example is in regular js and therefore cannot use async await syntax at top level, be aware that the S3 SDK is async +and thus you can use async await if you wish + +::: + +1) Edit `SheetJSWriteToR2.js` and replace the highlighted lines: + +- `accessKeyId`: access key for the AWS account +- `secretAccessKey`: secret access key for the AWS account +- `Bucket`: name of the bucket +- `REGION`: region of the bucket +- `ENDPOINT`: endpoint of your cloudflare R2, should end with .r2.cloudflarestorage.com , + To get this endpoint go to the settings of your bucket and copy the "S3 API" in Bucket details, remove the /bucket-name at the end of the url + +The keys are found in the CSV from step 22. The Bucket is the name from step 5. + +1) Run the script: + +```bash +node SheetJSWriteToR2.js +``` + +This file will be stored with the object name `test.xlsx`. It can be manually +downloaded from the S3 web interface. + +#### Read Test + +This sample will download and process the test file from "Write Test". + +10) Save the following script to `SheetJSReadFromR2.js`: + +```js title="SheetJSReadFromR2.js" +const { GetObjectCommand, S3Client } = require("@aws-sdk/client-s3"); +const XLSX = require("xlsx"); + +/* replace these constants */ +// highlight-start +var accessKeyId = "accessKeyId"; +var secretAccessKey = "secretAccessKey"; +var Bucket = "Bucket"; +// highlight-end + +var region = "REGION"; +var Key = "sheetjstest.xlsx"; +var endpoint = "ENDPOINT"; + +/* upload to R2 */ +var s3 = new S3Client({ + credentials: { + accessKeyId, + secretAccessKey + }, + region, + endpoint +}); + +const command = new GetObjectCommand({ + Bucket, + Key +}) + +s3.send(command).then(async (data) => { + var wb = XLSX.read(await data.Body?.transformToByteArray()); + console.log(XLSX.utils.sheet_to_csv(wb.Sheets[wb.SheetNames[0]])); +}).catch(e => { + throw e +}); +``` + +11) Edit `SheetJSReadFromR2.js` and replace the highlighted lines: + +- `accessKeyId`: access key for the AWS account +- `secretAccessKey`: secret access key for the AWS account +- `Bucket`: name of the bucket +- `REGION`: region of the bucket +- `ENDPOINT`: endpoint of your cloudflare R2, should end with .r2.cloudflarestorage.com , + To get this endpoint go to the settings of your bucket and copy the "S3 API" in Bucket details, remove the /bucket-name at the end of the url + +The keys are found in the CSV from Step 22. The Bucket is the name from Step 5. + +12) Run the script: + +```bash +node SheetJSReadFromR2.js +``` + +The program will display the data in CSV format. + +``` +S,h,e,e,t,J,S +5,4,3,3,7,9,5 +``` + [^1]: See ["Node.js compatibility"](https://developers.cloudflare.com/workers/runtime-apis/nodejs/) in the Cloudflare documentation [^2]: See ["Get started guide"](https://developers.cloudflare.com/workers/get-started/guide/#1-create-a-new-worker-project) [^3]: [Wrangler documentation](https://developers.cloudflare.com/workers/wrangler/)