Large Media Issues, 400 errors, stuck on pending upload

marcus1 · March 2, 2023, 6:26pm

Edit: My issue may in fact be stemming from NuxtImg with Netlify image provider and may not in fact be large media. It looks like the docs for V1 of NuxtImg have some inconsistency regarding root dir (static, vs asset, vs public), unclear on that. Some issues posted on GH for the NuxtImg repo about Netlify being within past few days. Finally, a few images on my site are working, one of which is a regular img element and another is a NuxtImg element, which is confusing as that image in Large Media shows as ‘pending upload’. That working image (NuxtImg) which is Large Media is an unsplash image, and I’m thinking possibly that NLM has it cached. So, I still don’t know whether my setup is correct yet but needs more testing and perhaps removal of all NuxtImg tags. Netlify is a listed provider by NuxtImg for Nuxt3. Nuxt publishes to a dist dir (as opposed to publish), unsure if there should be a publish dir or if that’s okay. No images other than the tag img are going to dist in my deployment log. Clearly, this is wrong; so, I’ve got more work to do to figure out why no NuxtImg src files are going to dist in deployment (assuming they should be). If anyone has advice, very open to it. [end-edit]

Hi Netlify, large media again, I’ve tried many of the techniques listed in the main large media support thread and am still unsure as to what I’m doing wrong. Appreciate your help in advance. I may have issue with Git Credential Helper but am unsure how to fix. All files on the Large Media tab for both projects for which I’ve tried to make this work are stating ‘pending upload’ despite various attempts. I followed the instructions from the main Large Media guide successfully. I had originally setup Git LFS some time ago, and I am suspicious that I have a config or credential issue due to this as Luke discusses in his common issues above, but I’m over my skill level to fix (have been trying for 3+ days, dozens of variations without success). Appreciate any direction as possible.

Site ID 1: d7970a77-ca83-4c61-8642-4ef3ced91f9f
Site ID 2: 9fbd0a76-c4dd-443b-84ac-13e970b49be5

Site ID 1 was my first attempt (older) wherein I eventually realized that I had a wrong siteId bound in .netlify/state.json because I had copy/pasted a previous deployment attempt. I thought maybe that this corrupted the git - netlify binding in some way. I created Site ID 2 as a clean attempt, same underlying code but cloned repos for both FE and BE. My BE is a Laravel 10 app, FE is a Nuxt3 app. All images showing 400 errors; all large media stuck on pending upload.

$ netlify lm:info
[08:47:18] Checking Git version [started]
[08:47:18] Checking Git LFS version [started]
[08:47:18] Checking Git LFS filters [started]
[08:47:18] Checking Netlify's Git Credentials version [started]
[08:47:19] Checking Git version [2.39.2.windows.1] [title changed]
[08:47:19] Checking Git version [2.39.2.windows.1] [completed]
[08:47:19] Checking Git LFS filters [completed]
[08:47:19] Checking Git LFS version [3.3.0] [title changed]
[08:47:19] Checking Git LFS version [3.3.0] [completed]
[08:47:19] Checking Netlify's Git Credentials version [0.1.11] [title changed]
[08:47:19] Checking Netlify's Git Credentials version [0.1.11] [completed]

// .gitattributes
// unsure which dir Nuxt3/Netlify needs either 'public/images' or 'images'
public/images/** filter=lfs diff=lfs merge=lfs -text
public/videos/** filter=lfs diff=lfs merge=lfs -text
public/pdfs/** filter=lfs diff=lfs merge=lfs -text
public/logos/** filter=lfs diff=lfs merge=lfs -text
images/** filter=lfs diff=lfs merge=lfs -text
videos/** filter=lfs diff=lfs merge=lfs -text

// .lfsconfig
[lfs]
	url = https://9fbd0a76-c4dd-443b-84ac-13e970b49be5.netlify.app/.netlify/large-media

// .gitignore
node_modules
*.log*
.nuxt
.nitro
.cache
.output
.env
dist

\\ Project Netlify Folder
\\ .netlify/state.json
{
	"siteId": "9fbd0a76-c4dd-443b-84ac-13e970b49be5"
}

$ git config -l | grep netlify
include.path=C:/Users/{user}/AppData/Roaming/netlify/Config/helper/git-config
credential.helper=netlify
lfs.https://d7970a77-ca83-4c61-8642-4ef3ced91f9f.netlify.app/.netlify/large-media.access=basic
lfs.https://9fbd0a76-c4dd-443b-84ac-13e970b49be5.netlify.app/.netlify/large-media.locksverify=false
lfs.https://9fbd0a76-c4dd-443b-84ac-13e970b49be5.netlify.app/.netlify/large-media.access=basic

I’m using GitBash version 2.39.2.windows.1. I could follow Audrey’s notes about using Powershell but unsure if that’s the issue. I’ll probably try that next.

I have a .bashrc file in {user} home. There is no netlify statement in .bashrc as listed by Luke’s ‘common issues’ block at thread start (nothing was added to this .bashrc by Netlify)(unclear if there’s another .bashrc, couldn’t find it in AppData). I also have a .bash_profile in the same user folder, nothing from Netlify.

So, I think there’s something here with Git Credential Helper not being installed for the shell, but I don’t know how to fix.

Also, in ~/.config/configstore, I have these 4 files:
bower-github.json nodemon.json update-notifier-netlify-cli.json update-notifier-npm.json

in ~/.netlify/helper/bin/ I have git-credential-netlify.exe.

in c:/users/{user}/AppData/Roaming/netlify/Config/helper/git-config

# The first line resets the list of helpers so we can check Netlify's first.
[credential]
  helper = ""
[credential]
  helper = netlify

In Luke’s comments on Git Credential Helper, it seems that I should have something like /home/username/.config/netlify/helper/git-config
In my case, I do have ~/.config/configstore/ but netlify folder in .config.

After multiple previous successful push to git, noting upload process, I ran:

$ git lfs push --all origin

and received ‘Uploading LFS objects: 100% (330/330), 1.3GB| 0 B/S, done.’

Before the above push, I had 404 errors on all images, and after I have 400 errors on all images. I’m not familiar with 400 explicitly, seems like something else if off in terms on my config.

Windows 
OS Name:                   Microsoft Windows 10 Home
OS Version:                10.0.19045 N/A Build 19045

For Nuxt3, all images should be in public/ folder (vs static in Nuxt2). An example image of /public/images/test1.jpg shows:

version https://git-lfs.github.com/spec/v1
oid sha256:f5eb2f8bb58ab37ef44a49eb419aed6f22cd83b2db79ae670834ebb9500cf098
size 695498

On Netlify, in sites/Large Media, all items listed as ‘Pending upload.’

Other notes, git lfs ls-files shows long list of files, previously ran $ npm i netlify-cli -g, $ git lfs version , git-lfs/3.3.0 (GitHub; windows amd64; go 1.19.3; git 77deabdf),

From here, I ran these 2 commands in Powershell, success.
GitHub - netlify/netlify-credential-helper: Git credential helper to use Netlify's API as authentication backend

[Net.ServicePointManager]::SecurityProtocol = [Net.SecurityProtocolType]::Tls12
iex (iwr -UseBasicParsing -Uri https://github.com/netlify/netlify-credential-helper/raw/master/resources/install.ps1)

Thanks again for any help. -Marcus

luke · March 3, 2023, 1:00am

Hi, @marcus1. The “pending upload” message is a UI issue. Your Large Media configuration is working.

Please ignore that it says “pending upload” in the UI. There is no problem with your configuration for either site.

marcus1 · March 3, 2023, 6:46pm

Luke, working for me now, many thanks for your reply and for the work that you do. I appreciate your confirming that Large Media config was correct as that led to NuxtImage library with Netlify as provider issues. There are some reported issues, differences between local and production as well as problems with SSR vs static, generation of dist/static files. Seems no immediate fix, going on about 3 weeks at NuxtImg issues. Some succeeding with hacks, others striking out.

My solution, if anyone stumbles on this, was to test various nuxt.config.js settings for Netlify provider and to specifically remove fit=“cover” which is not supported by Netlify provider (only contain and fill). So, the issue was not actually Large Media - and I wouldn’t have known that without your confirming that everything looked ok. Adding and removing files from my image folder also seemed to help once things started to work to get syncing working again.

If helpful to others, a working NuxtImage config:

// nuxt.config.ts
image: {
  domains: ['mydomain.com','mydomain.test'],
  provider: 'netlify',
  netlify: {
    baseURL: 'https://mydomain.com',
    modifiers: {
      effect: 'sharpen:90',
      quality: 'auto:best'
    } // remove if errors
  },
  presets: {}, // also ok
}

Key to anyone who encounters the same issues as me, check for fit=“cover” and remove attribute or replace with ‘fill’ or ‘contain’ (default), noting also to add w or h as indicated by errors for those fit attributes.

SamO · March 3, 2023, 7:44pm

thank you for sharing your solution! This is definitely helpful for other users