Mitya Comments - Answer Overflow

Mitya

•Created by Mitya on 6/21/2024 in #workers-help

Can I write a data URI to an R2 bucket?

On this generally, presumably passing a file as base64 to my back-end and saving it to R2 in this way isn't a terrible idea for any reason I'm missing?

7 replies

CDCloudflare Developers

•Created by Mitya on 6/21/2024 in #workers-help

Can I write a data URI to an R2 bucket?

@kian's method was the only one that worked here. For reference in case anyone else finds this useful. Method 1: This produces InvalidCharacterError: atob() called with invalid...:

function base64ToArrayBuffer(base64) {
    var binaryString = atob(base64);
    var bytes = new Uint8Array(binaryString.length);
    for (var i = 0; i < binaryString.length; i++) {
        bytes[i] = binaryString.charCodeAt(i);
    }
    return bytes.buffer;
}
await env.r2_pub.put('some/key', base64ToArrayBuffer(myValidBase64String));

function base64ToArrayBuffer(base64) {
    var binaryString = atob(base64);
    var bytes = new Uint8Array(binaryString.length);
    for (var i = 0; i < binaryString.length; i++) {
        bytes[i] = binaryString.charCodeAt(i);
    }
    return bytes.buffer;
}
await env.r2_pub.put('some/key', base64ToArrayBuffer(myValidBase64String));

Method 2: (suggested by @kian) - this successfully saves the file to R2.

await env.r2_pub.put('some/key', (await fetch(myValidBase64String)).body);

await env.r2_pub.put('some/key', (await fetch(myValidBase64String)).body);

Method 3: (variant on method 1) - this SO answer suggested a different way to derive an array buffer that avoids atob(). This does save the file to R2, but with mangled source, such that it can't be opened.

var decodeBase64 = function(s) {
    var e={},i,b=0,c,x,l=0,a,r='',w=String.fromCharCode,L=s.length;
    var A="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
    for(i=0;i<64;i++){e[A.charAt(i)]=i;}
    for(x=0;x<L;x++){
        c=e[s.charAt(x)];b=(b<<6)+c;l+=6;
        while(l>=8){((a=(b>>>(l-=8))&0xff)||(x<(L-2)))&&(r+=w(a));}
    }
    return r;
};

var decodeBase64 = function(s) {
    var e={},i,b=0,c,x,l=0,a,r='',w=String.fromCharCode,L=s.length;
    var A="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
    for(i=0;i<64;i++){e[A.charAt(i)]=i;}
    for(x=0;x<L;x++){
        c=e[s.charAt(x)];b=(b<<6)+c;l+=6;
        while(l>=8){((a=(b>>>(l-=8))&0xff)||(x<(L-2)))&&(r+=w(a));}
    }
    return r;
};

7 replies

CDCloudflare Developers

•Created by Mitya on 6/21/2024 in #workers-help

How to validate a file upload in Workers before saving it to R2?

No, that's not how I'm determining length - I mentioned I was doing this by counting the string length of the base64 representation of the file, which I think is sound? The part I'm missing (coming from PHP) is this idea of first save to R2, then ask R2 whether the file is valid, and delete if necessary.

11 replies

CDCloudflare Developers

•Created by Mitya on 6/21/2024 in #workers-help

How to validate a file upload in Workers before saving it to R2?

Thanks for this. So just so I'm 100% with this, the pattern here is to upload to R2 without any prior validation (except perhaps filesize, as per the method I mentioned) and THEN validate the file once it's uploaded to R2, via the information R2 provides? This is a new way of thinking for me, coming from PHP land! Bonus question: is it a poor pattern in Node to upload the file to my back-end and then have my back-end transfer it to R2, rather than have my front-end upload direct to R2 via a signed link? The issue I have with the latter approach is it involves different parts of my form going to different places via different requests (the "normal" data to my back-end, and the file upload to R2). Really appreciate the help.

11 replies

CDCloudflare Developers

•Created by Mitya on 6/21/2024 in #workers-help

Can I write a data URI to an R2 bucket?

Ah that's cool, never occurred to me to fetch a data URI. I'll try both and come back if any issues. Thanks!

7 replies

CDCloudflare Developers

•Created by Mitya on 6/21/2024 in #workers-help

How to validate a file upload in Workers before saving it to R2?

You mean after upload to my app (which is what I'm already doing), or upload to R2? If the latter, could you possible elaborate? Thank you.

11 replies

CDCloudflare Developers

•Created by Mitya on 6/21/2024 in #workers-help

How to validate a file upload in Workers before saving it to R2?

Thank you. This is in a trusted environment so not a huge deal. Presumably I can get filesize by checking the length of the base64 representation?

11 replies

CDCloudflare Developers

•Created by Mitya on 6/21/2024 in #workers-help

Can I write a data URI to an R2 bucket?

Thank you. You mean like this?

function base64ToArrayBuffer(base64) {
    var binaryString = atob(base64);
    var bytes = new Uint8Array(binaryString.length);
    for (var i = 0; i < binaryString.length; i++) {
        bytes[i] = binaryString.charCodeAt(i);
    }
    return bytes.buffer;
}

function base64ToArrayBuffer(base64) {
    var binaryString = atob(base64);
    var bytes = new Uint8Array(binaryString.length);
    for (var i = 0; i < binaryString.length; i++) {
        bytes[i] = binaryString.charCodeAt(i);
    }
    return bytes.buffer;
}

(Source)

7 replies

Gaming

Programming