[SalesForce] Visualforce: Can’t access archived static resource

I'm trying to access some static resource in my visualforce page. I have uploaded a zip file named pqGrid. It's structure is like so:

- pqgrid.min.js
- pggrid.min.css
- images/
    --image1.png
    --image2.png

Following the directions in the sf docs on referencing a static resource, I tried the following:

<apex:includeScript value="{!URLFOR($Resource.pqGrid, 'pqgrid.min.js')}"/>
<apex:stylesheet value="{!URLFOR($Resource.pqGrid, 'pqgrid.min.css')}"/>

Onloading the page, I get a 404:

GET
https://c.cs10.visual.force.com/resource/7975978979000/pqGrid/pqgrid.min.js
404 (Not Found) GET
https://c.cs10.visual.force.com/resource/7975978979000/pqGrid/pqgrid.min.css

I've even tried just referencing an image:

<apex:image url="{!URLFOR($Resource.pqGrid, 'images/cross.png')}"/>

and same 404:

GET
https://c.cs10.visual.force.com/resource/7975978979000/pqGrid/images/cross.png
404 (Not Found)

I've made sure that the resource cache control is public

enter image description here

What am I doing incorrectly?

EDIT

Tried putting all the files into another directory, so it is now pqGrid/stash/[*files]

When I get the 404 not found:

GET
https://c.cs10.visual.force.com/resource/1430434594000/pqGrid/stash/pqgrid.min.css

I tried playing with this url. Trying to navigate to just /stash/ throws a ERR_INVALID_RESPONSE error. Navigating to just /pqGrid/ let's me download the stuff. Trying to go directly to the file, /pqGrid/stash/file.js I just get a blank page.

So the zip is definitely on salesforce, but something is up with accessing it.

Thanks all!

Best Answer

You need the top level folder name too. Change

<apex:includeScript value="{!URLFOR($Resource.pqGrid, 'pgrid.min.js')}"/>
<apex:stylesheet value="{!URLFOR($Resource.pqGrid, 'pqgrid.min.css')}"/>

To:

<apex:includeScript value="{!URLFOR($Resource.pqGrid, 'pqGrid/pqgrid.min.js')}"/>
<apex:stylesheet value="{!URLFOR($Resource.pqGrid, 'pqGrid/pqgrid.min.css')}"/>

Actually, to be more accurate, you need to change the second parameter to start with the folder name before you zipped it up.

I tend to try to name my static resources the exact same name as the unzipped folder name -ie

my_resources/mycss.css
            /myjavascript.js

I would name the static resource my_resources and refer to as:

<apex:includeScript value="{!URLFOR($Resource.my_resources, 'my_resources/myjavascript.js')}"/>
<apex:stylesheet value="{!URLFOR($Resource.my_resources, 'my_resources/mycss.css')}"/>

EDIT Looking at my static resources in SublimeText, I can see that Salesforce actually makes you a folder with the name of your static resource when you upload your static resource. So if you didn't want to have the name repeated, you could select all your resources on your filesystem (but not their enclosing folder) and archive them together.

This would make your existing structure work.