Uploaded media not published

[RickCogley]

I posted a related question on the Discord, asking about how to set the upload folder so that the magnifying glass icon picker works correctly. By looking at the code and experimentation figured out that I can do as follows, specifying the public path as the third arg:

// Configure an upload folder
cms.upload("assets", "gh:/src/assets", "/assets");

I noticed that this fixes the ability to click the magnifying glass icon and select a file for placement in the frontmatter slot it's linked to. However, for an item I uploaded via the CMS, from the main assets upload area (Home button in the CMS, then Assets, then do the upload), I see a broken image with the text "Preview".

I am creating an HTML file using the tree command, and if you check it out:
https://julie.cogley.jp/julie_cogley_jp_tree.html
... you'll see that the file in question, /assets/julie-maru-2024.jpg is not present.

Trying to access the file directly also proves it:
https://julie.cogley.jp/assets/julie-maru-202409.jpg

The repo is: https://github.com/juliecogley/julie_portfolio
There is something off with the order things are working, because of the way I have it set up.

I'm using picture and transformimages, and copyRemainingFiles():
https://github.com/juliecogley/julie_portfolio/blob/main/_config.ts

I want to serve the images from julie.cogley.jp/assets and store images in /src/assets. I found that when I put a transform in the template like this:

https://github.com/juliecogley/julie_portfolio/blob/main/src/showcase/fire-extinguisher_flyer.vto#L15

... the original is NOT copied to _site/assets, and nothing I did in the config with site.copy served to fix that. To get around this, I also added a _data.yml with transforms to the repo's /src/assets folder. This forces the original image to be copied to _site/assets as well, so that it can be referenced, say, as a css background image.

https://github.com/juliecogley/julie_portfolio/blob/main/src/assets/_data.yml

I think there is something that is not working with the timing of processing, when I upload images via the cms, because they are not getting copied to _site/assets and hence cannot be referenced. I am guessing that if I edit something from vscode and push, those cms uploaded files will indeed get copied...

This is possibly related to lumeland/lume#571 but is there anything to be done?

[RickCogley]

Could it be the order of how the plugins are loaded?

[oscarotero]

Picture and transform images have no effect over the CMS, because the CMS only read the source files (not the output files in _site).

I have checked the site in my computer, replacing GitHub adapter with src file system and it works fine. Maybe the problem is in the GH adapter, but I cannot check because I don't have the credentials.

But maybe the problem is you're not setting a base path in GitHub.
Can you try this?

cms.storage(
  "gh",
  new GitHub({
    client: new Octokit({ auth: Deno.env.get("GITHUB_TOKEN") }),
    owner: "juliecogley",
    repo: "julie_portfolio",
    branch: "main",
    path: "src" // Base path of your repo.
  }),
);

Then, you can remove the /src prefix of all paths, for example:

cms.upload("assets", "gh:assets");

Let me know if this works.

[RickCogley]

Thanks very much for your help; it works at least for the magnifying glass picker function! All the files seem to appear correctly when I try to pick. However, when I view the recent file from the main list in Home/Assets/File Details, the image is broken. I see in source it's got a path that contains "raw". Is there a cms cache I can clear somehow? Screenshot below.

Also, the image I tried uploading was not present in _site because I had the dev branch specified in the github action yml for deno deploy. I changed it to main and it now works.

[oscarotero]

Ok, seems that GitHub API only returns the content of files smaller than 1Mb.
I've changed the way to fetch the content from GitHub and now it should work fine.
Can you test it before releasing a new version?

[RickCogley]

I'd be happy to. What do I need to do, to use the dev version?

[oscarotero]

In the import map, just change the version of lume/cms to the hash of the last commit:

https://cdn.jsdelivr.net/gh/lumeland/cms@1d2ca5d95f33ff6b223667f2f02f3070b5ec0e76/

[RickCogley]

Right, so changing the import map version to your commit fixed the main Home/Assets view, so that now, no matter the image, it appears properly in the preview. Cool!

However, from page edit view, retesting the magnifying glass picker, the popup is back to giving an error.

I think everything is referenced correctly with "src" qualified in the gh storage (and it was working before changing the import map to the commit).

https://github.com/juliecogley/julie_portfolio/blob/main/_cms.ts#L34-L39

[oscarotero]

I can't reproduce this error.
It works fine in my computer:

[RickCogley]

well noted, thanks for testing. I'll try clearing caches and things like that.

[RickCogley]

It works again when I revert to 0.7.0, go figure, but clearing caches and that sort of thing did not work.

[RickCogley]

also, just in case, I'm testing by pushing to main, waiting, and just going to https://cms.julie.cogley.jp to see. I need to figure out how to set those variables locally, but I haven't had time to look into it.

[oscarotero]

That's weird. The issue happens locally or in the server?

[RickCogley]

hi, the issue happens when I publish to the server, and take a look at the cms site. I still haven't had a chance to make it work locally.

[oscarotero]

can you send me privately a user/password to enter in the cms?
For local setup, you can create a .env file with the environment variables and run the cms with the --env-file flag. More info: https://docs.deno.com/runtime/reference/env_variables/#.env-file

[RickCogley]

sent via discord DM, and thank you very much for the troubleshooting. I'll look into .env!

[RickCogley]

just upgraded to 0.7.2 and there are no problems, FYI (and, it seems very fast on deno deploy)

[oscarotero]

nice!