[SalesForce] Accessing static resource from ZIP files in Aura component –

I uploaded my zip file which contains css and js folder here is my zip folder structure:

static resource name: mystaticresources

myuploadzip.zip 
     --js
         jquery211.js
         myjs1.js
     --css
         mycss.css

Aura component:

<ltng:require 
          styles="{!$Resource.mystaticresources + '/myuploadzip/css/mycss.css'}" 
 scripts="{!join(',', 
          $Resource.mystaticresources + '/myuploadzip/js/jquery211.js', 
          $Resource.mystaticresources + '/myuploadzip/js/myjs1.js')}"                  
 afterScriptsLoaded="{!c.doInit}" />

Controller:

 doInit: function(component, event, helper) {
        jQuery("document").ready(function(){
          alert('loaded');

      });
    },

I could not able to see what is wrong with the above code? I'm not getting alert!

I have jquery upload as a file without zip file and I have this reference in my component then it works:

 <ltng:require scripts="{!$Resource.jquery211}" afterScriptsLoaded="{!c.doInit1}"/>

Best Answer

ZIP Inside ZIP

If you have a ZIP inside the ZIP, this will fail. You can't access the resources inside of that file, as the system won't repeatedly/recursively decompress files this way.

You can verify this by downloading the static resource itself in your browser:

https://myawesome-dev-ed.lightning.force.com/resource/1575229828000/mystaticresources/

If the first entry you see is a ZIP file, your static resource won't work the way you expect. To fix this, ZIP the files you want into a ZIP, but do not ZIP that ZIP.

Normal ZIP Without Internal ZIP

The name of the ZIP isn't included in the file path; simply start from the js and css folders:

<ltng:require 
          styles="{!$Resource.mystaticresources + '/css/mycss.css'}" 
 scripts="{!join(',', 
          $Resource.mystaticresources + '/js/jquery211.js', 
          $Resource.mystaticresources + '/js/myjs1.js')}"                  
 afterScriptsLoaded="{!c.doInit}" />
Related Topic