Error when uploading large files from plugin

I have enabled the option to upload large files in my plugin:

I’ve set the max file size to be 500MB on the relevant element:

Screenshot 2024-02-28 at 09.59.52

When I create a file with my plugin that is <50MB, there are no problems uploading it to my Bubble database.

HOWEVER, whenever the file size is >50MB I get the following error in my console:

…and the file does not get uploaded to my database.

This is the code I’m using in my client-side action to upload files (which works perfectly for files <50MB)

context.uploadContent(
  properties.file_name + ".pdf",
  base64data,
  function (err) {    
  }
);

Anyone have any idea on what might be causing the issue? :slight_smile:

Hey there,

Bubble considers files over 50mb “large” files. First of all, you need to have the checkbox “allow uploading of large files” enabled (it’s been some time since I’ve looked at this, but I think it’s at the top of the element tab in the editor).

Second of all, context upload file does not support uploading large files (it’s also not the best method to upload files in general).

You need to use the instance.upload file method:

Have a look at the code in my uploading plugin here to see how I do it: Better Uploader Plugin | Bubble

2 Likes

the method in the context is the normal limited upload, the method in the instance (once you select the large file option) is the one you want to use. You have the inline documentation at the initialize section:

@jonah.deleseleuc thank you for this and for all your help over the past couple of days - I really appreciate it! :slight_smile:

Confirmed:

Of course! Silly of me to not have been using this. I have looked at your Better Uploader code and tried using instance.upload… but am running into problems (I suspect because I’m doing something obvious wrong):

// converting a PDF to blob so it can be uploaded
var blob = new Blob([pdf], { type: "application/pdf" });

instance.uploadFile(
  blob,
  function (err, url) {
    if (err) {
      console.log(`Error: ${err}`);
    }
    if (url) {
      console.log(`URL: ${url}`);
    }
  }
)

But unfortunately I’m still running into this error in my console:

Can you spot anything else I might be missing?

As per the documentation you need to use a File object, not a Blob

2 Likes

Thanks @dorilama, that set me on the right path and managed to figure it out :slight_smile:

1 Like