Upload files to AWS S3/4 or Cloudflare R2, how?

[vitinhocaradeboi]

Hello,

someone has done this before to interact with the (specially) Cloudflare bucket and can give me some tips on how to upload files to my bucket using WeWeb, for example.

[vitinhocaradeboi]

Ok, found a better solution.

How, i can stop the File Uploader/Picker to uplad files directly to “https://storage-cdn.weweb.io/XXXXX-1d28-4e96-a2d9-XXXX/users-storage/1XXXXXX59/2.webp”

I want to upload it directly to my storage not first in WeWeb.

[vitinhocaradeboi]

Also done, but how you declare in cURL a variable?

For example i have an action that is going into a loop, and each run will make another API Request with a different value.

e.g. (Link): https://google.com/_myaccount/{{variable1}}.{{variable2}}

So for each loop i will have always different variables in the cURL.

Do i need to declare it in the “Fields” and how do i write the variables in the URL, is it like i mentioned {{variable}}. I really need variables in my cURL to process them.

Kinda confused. Thanks

[vitinhocaradeboi]

Can someone please help?

[Alexis]

Hi, you can create a workflow using the loop system and put and REST API request inside the loop. On the REST API you can bind the URL and make it different depending of the loop iteration.

You can access the iteration index and item under the workflow tab → loop, you can run the workflow first to have template data inside

[vitinhocaradeboi]

Hi and thanks,

i know, but the thing is i will only upload the “filename + extension”.

Let me reproduce it, so i can show you. Give me a moment please, to make a record as well making food.

[vitinhocaradeboi]

Let’s make it without a loop, just simple.

1. I have an Input for a file
   

   

2. I do an action in this Input, where i have to mention the endpoint (Filename+Extension). Which is in this case: 10.webp
   https://docs.bunny.net/reference/put_-storagezonename-path-filename
   

   

3. The Fetch collection is binded to my variable “oneFile” and looks like this,
   

   

That one works, but it will upload me a “file” which is named 10.webp

But this file doesnt have any meta, its just Filename+Extension

Since the request doesnt allow me to use any type of encoding its very hard. I need to get directly the file to upload it.
For example if i make it in my own simple script outside of WeWeb by following their docs, it works.

const https = require('https');
const fs = require('fs');

const REGION = 'YOUR_REGION'; // If German region, set this to an empty string: ''
const BASE_HOSTNAME = 'storage.bunnycdn.com';
const HOSTNAME = REGION ? `${REGION}.${BASE_HOSTNAME}` : BASE_HOSTNAME;
const STORAGE_ZONE_NAME = 'YOUR_STORAGE_ZONE_NAME';
const FILENAME_TO_UPLOAD = 'filenameyouwishtouse.txt';
const FILE_PATH = '/path/to/your/file/upload.txt';
const ACCESS_KEY = 'YOUR_BUNNY_STORAGE_API_KEY';

const uploadFile = async () => {
  const readStream = fs.createReadStream(FILE_PATH);

  const options = {
    method: 'PUT',
    host: HOSTNAME,
    path: `/${STORAGE_ZONE_NAME}/${FILENAME_TO_UPLOAD}`,
    headers: {
      AccessKey: ACCESS_KEY,
      'Content-Type': 'application/octet-stream',
    },
  };

  const req = https.request(options, (res) => {
    res.on('data', (chunk) => {
      console.log(chunk.toString('utf8'));
    });
  });

  req.on('error', (error) => {
    console.error(error);
  });

  readStream.pipe(req);
};

const main = async () => {
  await uploadFile();
};

main();

[vitinhocaradeboi]

So, i really need to use WeWeb CDN or XANO/Supabase to get the URL first.
But WeWeb is limited to max_fiile_size 50 and the other would be a double charge. Like $0,01/GB become around $0,25 (something like that)

[Alexis]

Hi, you need to use a REST API action in a workflow instead of a collection. A collection is to retrieve data, not to mutate it.

If the REST API action doesn’t allow you to send data like you need, you can use a custom JS action and write your javascript inside. (it will be executed in the browser, not server side so forget the fs and https packages)

[vitinhocaradeboi]

Actually i tried both this is just an example, so at the end i need to make my own JS.
This one should be changed, to allow a direct upload to any endpoint. Would make things much easier.