File Field: Optimize inital field load to remove ajax

[dhalucario]

Version

• Carbon Fields: 3.3.2
• WordPress: 5.9.2
• PHP: 7.2

Expected Behavior

The file field should load the file data as a html element property initially without an ajax request.

Actual Behavior

The file field sends 40 ajax requests when there is 40 file fields which makes no sense when you have large repeater fields.

Container definition

        // Trimmed down example
        Container::make('post_meta', __('Content', 'redacted'))
            ->where('post_type', '=', self::$postType)
            ->add_fields([
                Field::make('complex', 'redacted-dla-downloads', __('Downloads', 'redacted'))
                    ->add_fields('file', [
                        Field::make('file', 'file', __('File', 'redacted')),
                        Field::make('association', 'download_category', __('Category', 'redacted'))
                            ->set_types([
                                [ 'type' => 'term', 'taxonomy' => self::$category]
                            ]),
                        Field::make('date', 'date', __('Date', 'redacted')),
                    ])
            ]);

Steps to Reproduce the Problem

1. Create a Container with a repeater which contains a file field.
2. Put a lot of content into the repeater e.g 40 fields just with a file picker
3. Save and page will take forever to load.

Comments

I tried to debug this myself but ran into dependency issues, what NodeJS version are you using for this project? My idea is to just remove the ajax code and add necessary information to the React component using attributes. By the time the user loads the page the second time the attachment should be cached anyway and this removes setting up a new network request just to get a singular file, or 40 when there is a lot.

[dhalucario]

Hm I have read into the code and I see why you guys do it like this now. But I think we can cache the network request. The file shouldn't change unless someone uses a file replace plugin. But even then they can clear the cache in their browser.

[3anglepro]

Same here +

[zadro]

I encountered a similar situation with over 100 requests that were additionally timing out due to Nginx limit_req rules.

In my scenario, "tabs" are used for the file structure, and each tab holds many files. Is there a way to only load the current tab and ajax request the others when clicked on?

Or, was there a further resolution to this issue by introducing caching or other means?

[henrik-dons]

Same here! Is there any way to disable the AJAX requests? Or maybe apply lazy loading?