6 Replies Latest reply on May 15, 2013 2:01 PM by wtf_screenname

    Drag & drop from the filesystem into parsys --> various components?

    hrietz

      Hi everybody,

      the standard behaviour of CQ when dropping files from the filesystem directly into a parsys component is to create a foundation download component.

       

      But we would like to implicitely create custom download components depending on the template used for the page.

       

      Is this (easily) possible? Can this be configured for the parsys component or elsewhere? Or does that require some custom parsys implementation?

       

      Thanks for your help!

       

      Henning

        • 1. Re: Drag & drop from the filesystem into parsys --> various components?
          smurfsky101

          You're going to have to delve into some of the EXT core surrounding drop targets from the file system. At it's core, the javascript ends up mapping a representation of the file into a POST, which is handled by the OOTB Sling Post servlet, to auto create nodes. The logic behind how the nodes is created is sprinkled around the CQ5 EXT core code base. I would suggest setting debug points at key variable watch points. This will be a considerable effort, and might stymie your upgrade path as you will most likely be overriding some of the core libraries (see below), although you might be able to override just the mappings.

           

          A good start would be @ /libs/cq/ui/widgets/source/CQ.js - check out lines 173 - 188.

          Also, you'll want to check out CQ.wcm.EditBase.DropTarget - at /libs/cq/ui/widgets/source/widgets/wcm/EditBaseDD.js

           

          See how far the rabbit hole goes! Feel free to reach out for me if you want some more ideas on how this would be done.

           

          /**

          * The mapping to define which mime type creates which component when a file

          * is drag and dropped from the file system.

          * @static

          * @type Object

          */

          CQ.EDITBASE_DD_MIMEMAPPING = [{

              mimeType: /image\/(gif|jpeg|png)/,

              resourceType: "foundation/components/image",

              binaryProp: "./file" + CQ.Sling.MOVE_SUFFIX,

              fileNameProp: "./jcr:title"

          }, {

              mimeType: /application\/x-shockwave-flash/,

              resourceType: "foundation/components/flash",

              binaryProp: "./file" + CQ.Sling.MOVE_SUFFIX,

              fileNameProp: "./fileName"

          }, {

              mimeType: /.*/,

              resourceType: "foundation/components/download",

              binaryProp: "./file" + CQ.Sling.MOVE_SUFFIX,

              fileNameProp: "./fileName"

          }];

          1 person found this helpful
          • 2. Re: Drag & drop from the filesystem into parsys --> various components?
            hrietz Level 1

            Hi there, thanks for your elaborated reply!

            I have noticed that creating a download component by D&D directly will produce a different result compared to creating a download component first and then uploading a file to that.

            In the former case, no nt:file node is created (just an nt:resource node), which is actually quite bad in our use case as our search is based on nt:file types.

            Is this difference in behaviour on purpose? Can it be changed at the same places in code you pointed out earlier?

            Thanks for your kind help!

            Henning

            • 3. Re: Drag & drop from the filesystem into parsys --> various components?
              hrietz Level 1

              Just to let you know: we ended up customizing the foundation/download component (under /apps/foundation, of course) so that it would support different look and feels and behaviours depending on where it was used. Not an elegant solution, but very easy to implement.

              • 4. Re: Drag & drop from the filesystem into parsys --> various components?
                smurfsky101 Level 1

                Could you elaborate on what you ended up doing? Am curious

                • 5. Re: Drag & drop from the filesystem into parsys --> various components?
                  hrietz Level 1

                  Well, we implemented a customization of the foundation download component under /apps/foundation/components. This component's jsp checks the type (template) of the page it is used in and shows according behaviour. Before that we had three different download components, of which two could not be created via drag & drop. Now we have one download component which behaves like three different components depending on the context it is used in.

                  • 6. Re: Drag & drop from the filesystem into parsys --> various components?
                    wtf_screenname

                    this was really helpful to understand. stefan i guess?

                     

                    i am thinking to tweak that too. as a generic approach i'd add a context path attribute to the entries in CQ.EDITBASE_DD_MIMEMAPPING

                    and then in EditBaseDD there should be some more checking.

                     

                    but i am afraid of overriding the lib code. how to manage that in an appropriate way? suggestions? upgrade compatibility? packaging? deployment?

                     

                     

                    ========

                     

                    CQ.EDITBASE_DD_MIMEMAPPING = [{

                        mimeType: /.*/,

                        resourceType: "myapp/components/download",

                        binaryProp: "./file" + CQ.Sling.MOVE_SUFFIX,

                        fileNameProp: "./fileName",

                       contentPath: "/content/mycontent"

                    }, {

                        mimeType: /image\/(gif|jpeg|png)/,

                        resourceType: "foundation/components/image",

                        binaryProp: "./file" + CQ.Sling.MOVE_SUFFIX,

                        fileNameProp: "./jcr:title",

                        contentPath: "/",

                    }, {

                        mimeType: /application\/x-shockwave-flash/,

                        resourceType: "foundation/components/flash",

                        binaryProp: "./file" + CQ.Sling.MOVE_SUFFIX,

                        fileNameProp: "./fileName",

                        contentPath: "/"

                    }, {

                        mimeType: /.*/,

                        resourceType: "foundation/components/download",

                        binaryProp: "./file" + CQ.Sling.MOVE_SUFFIX,

                        fileNameProp: "./fileName",

                       contentPath: "/"

                    }];

                     

                    =========

                     

                    from EditBaseDD

                                var map = null;
                                for (var j=0;j<CQ.EDITBASE_DD_MIMEMAPPING.length; j++) {
                                    map = CQ.EDITBASE_DD_MIMEMAPPING[j];
                                    if (file.type.match(map.mimeType) && scope.editComponent.path.indexOf(map.contentPath)==0){
                                        break;
                                    }
                                }

                     

                    regards,

                     

                    ud