"Error: Trying to access array offset on value of type null" when attempting to delete a file in the panel

Newbie question here. You should assume I’m doing something wrong because I certainly do.

In a nutshell, I have a blueprint for a custom page type that has various text-type fields on it, but also has a a files section (for managing uploads) and a files field that allows the user to select which image should appear on the page (since, like Highlander, there can only be one). I have also defined an image.yml file blueprint to capture standard meta information for the uploaded images.

The pages present fine on the front end. The issue arises when I edit the page from the panel.

I can create, update, rename and delete a page as long as I’ve not uploaded any images to the page. Once I upload an image, I can no longer delete the page, nor can I delete an image. I get the same error every time: Error: Trying to access array offset on value of type null.

I can rename, update, replace the image files. I just can’t delete them. It’s ‘Hotel California’, but with a null type.

If I delete the image file manually through the filesystem, I can then delete the page just fine.

When I upload an image, it is picking up the file blueprint I’ve defined. It definitely knows it’s an image, but it seems to really resent that fact.

There’s clearly something basic I’m missing because, quite frankly, that’s my superpower. It’s seemingly related to how I’m defining the image blueprint but things annoyingly stop being obvious right before the part where I say “d’oh!” and fix the problem.

Since I’m reasonably sure it’s me making the mistake, could you suggest things that I need to make sure I’ve done?

Hey @tom_streeter and welcome to the Kirby forum.

Could you please post the blueprints for the affected pages and exact steps to reproduce the error you are experiencing?

If you use a standard Kirby Starterkit, do you encounter the same problems there as well? If yes, please post exact steps to reproduce the error. Thank you!

I will try to be systematic here and keep my “everything is an opportunity to make a joke” tendencies to a minimum. I definitely appreciate how fast you got back to me. I don’t even want to think about what time it was there…

My Dev Environment:

  • Mac (Monterey 12.1; M1)
  • Apache 2.4 installed via Homebrew.
  • PHP 7.4, also Homebrew

The starting point of this project was Plainkit copiedover from a cloned GitHub repo.

I also keep a cloned version of Starterkit around that has an virtual host from the same Apache install pointed at it, and the issue does NOT occur if I delete images (or any other files) from the panel

Dramatis Personae

  • Infocard
    • The dumb name I gave the content sections that are arranged on the Home page.
    • Each infocard is, unsurprisingly, a subpage of the Home page.
    • Images are optional. The template handles them if they’re there, doesn’t worry about them if they aren’t.
    • There is only a place for one image in the Infocard template, but the primary user of this site is nine-years-old (long story, but not relevant) so I suspect what image is desired will always be a moving target. Thus, many can be uploaded, but only one can be chosen.
  • Image
    • The blueprint primarily captures the Alt tag information.
    • Eventually there will be some cropping and resizing tools

What’s Supposed to Happen

  1. Create a new Infocard from the Home page using the ‘Add’ button.
  2. Fill in all the blanks. Save.
  3. Change your mind.
  4. Delete it. Save.
  5. Change your mind again and recreate it. Save.
  6. Decide that what this deathless prose really needs is a picture.
  7. Find a picture. Upload it from the files section marked “Upload Photos.”
  8. Decide you hate the picture.
  9. Delete it from the files section by clicking on the “” and clicking delete.
  10. Obsessively choose 6 or 7 other photos and upload all of them.
  11. Decide you hate #3 and delete it.
  12. Realize it was #4 you wanted to get rid of, so you get rid of it, too.
  13. Choose #2 of all the pictures you uploaded over in the files field.
  14. Decide the whole thing was a terrible idea and delete the entire page from the settings button in the header area of the panel page.

What Really Happens

  1. :heavy_check_mark:
  2. :heavy_check_mark:
  3. :heavy_check_mark:
  4. :heavy_check_mark: It’s possible to delete the Infocard at this point
  5. :heavy_check_mark:
  6. :heavy_check_mark:
  7. :heavy_check_mark: Ominous music starts playing.
  8. :heavy_check_mark: Music shifts to minor chord
  9. You’re asked to confirm that you really, really want to delete the file. Upon further reflection, you do.
  10. You are presented with these immortal words:
    Error: Trying to access array offset on value of type null
    attractively arrayed across the top of the modal dialog with a stunning red background and a helpful go-away x icon. You do, indeed, tell it to go away.
  11. You skip the whole “upload a bunch of other pictures” and jump straight to trying to delete the whole Infocard. No joy. Even though way back in #4 you were able to do it.

And that’s pretty much where it stops. It’s all terrible dialog at this point.

Needless to say I wasn’t able to suppress my writing style and I hope it didn’t get too annoying. I’ve spent more hours trying to track this down myself than anyone with a remaining shred of dignity would care to admit. Writing this has been cathartic, though, I also had my dignity surgically removed several years ago. As a freelancer I can go with any job title I like and I’ve settled on ‘Cautionary Tale.’ For some reason.

I’ve learned a lot about how the parts of Kirby fit together (though there’s always more to learn), so every bit of this time has been worth it, but I really kind of want to move on with finishing this.

Thank you for enduring this missive. There is actually a question buried in here :-).

The Files:

title: Basic Image

  type: image
  mime: image/jpeg, image/png, image/svg+xml

  #main content
    width: 1/2
        type: fields
            label: Caption
            type: textarea
            size: tiny
            label: Alt Text
            type: text
            icon: code
            required: true
            help: This **required** field is very important in order to be considerate of people who must use screenreaders to access webpages.
            label: link
            type: url
    width: 1/2

(The file really does stop that abruptly.)

title: infocard

  - width: 1/2


        type: fields
            required: true
            minlength: 3
            maxlength: 75
            label: Infocard Headline
            type: text
            help: The overall title of this Infocard.
            width: 1/1
        type: fields
            label: Text
            type: textarea
            required: true
            help: |
                  ####Things to know:####
                  - There's a limit of 2000 characters (including spaces) which should give you about 300 or so words. (If you have more than that to say, it's a blog post.)
                  - Pressing **`return`** _twice_ starts a new paragraph. There should be a blank line between paragraphs.  Don't worry: it only counts as one character.
            minlength: 1
            maxlength: 2000
            size: medium
            font: monospace
              - italic
              - bold
              - "|"
              - ol
              - ul
              - "|"
              - link
              - email
            width: 3/4
            label: Select Uploaded Photo...
            type: files
            layout: cards
            uploads: false
            multiple: false
            query: page.images
              cover: true
              ratio: 5/3
              back: black
            max: 1
            empty: Choose a photo you want to use from the ones you've already uploaded.
            width: 7/12
            label: Do you need a Call-to-Action Button?
            type: toggle
            default: false
              - "No"
              - "Yes"
              iscta: true
            label: Call-to-Action Link
            type: url
            width: 7/12
            help: The URL for the page you want the reader to go to.
              iscta: true
            label: Action Button Text
            type: text
            help: This text will appear in the button that the reader will click.
            minlength: 2
            maxlength: 20
            width: 7/12
            icon: edit
  - width: 1/2

        type: files
        headline: Upload Photos
        template: image
        query: page.images

(I’m not really sure you need what follows this, but it’s not like we’re being charged by the character here)


title: Home
preset: pages

  headline: Draft Infocards
  empty: There are no Infocards yet
    - infocard
  help: |
    - This is where you initially create a new section for the Home Page.  They're called `Infocards` ... because they have to be called _something_.
    - The only people who can see these drafts are people who are logged into the panel. Like you right now.

  headline: Infocards Under Review
  empty: No Infocards are being reviewed. They must first be created.

  headline: Published Infocards
  layout: cards
  text: "{{page.headline}}"
  info: "{{page.image.name}}.{{page.image.extension}}<br>{{page.image.width}}px (w) x {{page.image.height}}px (h)<br>{{page.ctalink}}"
    cover: true
    ratio: 16/5
  empty: There are no Infocards on the Home Page yet. You probably want to change that.
  help: |
    - Infocards will appear on the home page in the same order that they appear here. The order can be changed at any time.
    - If there are an odd number of Infocards, the last one will be wider and centered on the page.
    - Try to keep the longest Infocard last. Keeping Infocards relatively short is better.

I’m not including the templates because they work fine.

Wow, I made it through all the prose…

Before I start testing this: Do you use multiple languages or just a single language installation?

Oh, and one more question: Does this happen with draft pages or independent of page status?

  • Single language, allegedly English.

  • It does happen in Draft mode as well as the others.

Both things it would have been more useful for me to mention. Apologies.

Hm, I cannot reproduce the issue on my system.

Do you use any plugins?

When this error happens, is there any more information in the browser console? Or in your PHP error logs?

When you check the file system, can you see anything extraordinary there that isn’t as it should be?

I can go one better: I can’t reproduce this on my production system.

That make me feel like I’ve wasted a lot of your time. That’s not something I find even a little bit amusing.

I could have sworn I’d tested this up on Production, but I think what happened is that I was getting issues that ultimately wound up just requiring adjusting the RewriteBase to / in .htaccess.. But my brain merged all errors together, even though they weren’t.

I apologize again. I feel terrible about this.

I’m going to drop my content and blueprints into a fresh install pulled off GitHub, and then I’m going to go crawl under a rock.

It’s still happening locally even after I brought down a new copy of Plainkit and copied all my bits over. It’s clearly something specific to my local environment, though, so I’m going to mark this as a solution. I’ll check logs and such and see what I can figure out, but I can’t see there being any value in you taking any more time on this. If I ever find it, I’ll post it.