KickAssets

25 Aug

KickAssets

One of the pain points in SilverStripe for me has always been AssetAdmin. It’s very cumbersome to use and has a limited feature set. It still uses single selection uploading with no progress bar indicator, and assets are laid out in a tabular view that is not always informative, especially if you’re looking for an image. Further, since AssetAdmin is its own LeftAndMain interface , so managing assets interrupts the user’s normal workflow in the CMS.

I was building a plugin for SilverSmith for managing theme images when it occurred to me that this functionality could easily be ported over to the backend. Turns out it works pretty well! So well, in fact, that I’ve given it the appropriate title “KickAssets.”

KickAssets is designed to replace AssetAdmin in the CMS. Rather than offer a whole new LeftAndMain controller, asset management is done in a modal window and allows robust UI features to which we’re all accustomed when managing files including:

  • Group selection
  • Drag-and-drop
  • One click file renaming
  • Quick search
Further, KickAssets provides two form fields, FileAttachmentField and MultipleFileAttachmentField for using the interface in an edit form.

Example code:

Managing a single file relation

static $has_one = array (
'MyFile' => 'File'
);

public function getCMSFields() {
$fields = parent::getCMSFields();
$fields->addFieldToTab("Root.Content.File", new FileAttachmentField('MyFile','Upload a file'));
return $fields;
}

Managing multiple files

static $many_many = array (
'MyFiles' => 'File'
);

public function getCMSFields() {
$fields = parent::getCMSFields();
$fields->addFieldToTab("Root.Content.Files", new MultipleFileAttachmentField('MyFiles','Upload some files'));
return $fields;
}

Where to get it

http://www.github.com/unclecheese/KickAssets

Need more info?

Watch a screencast

52 Responses to “KickAssets”

  1. banal 25. Aug, 2011 at 12:53 pm #

    Wow UncleCheese. You’re a friggin machine!
    Just watched the video. This is really awesome stuff. Love the drag’n’drop and replace features. Will give this a try ASAP.

  2. Nivanka 25. Aug, 2011 at 1:38 pm #

    This is great, I am falling in love with this and you are a legend Aaron

  3. Tuckie 25. Aug, 2011 at 2:29 pm #

    When you clicked over to the many-many tab, my heart skipped a beat, that was exactly what I wanted with the manymany fileDOM, but it was way overkill, and got messy fast with large numbers of files. Thank you for your hard work!

    • unclecheese 25. Aug, 2011 at 2:31 pm #

      Thanks! For the record, you could always do this with MultipleFileUploadField. No MMFDOM needed. :)

      • Tuckie 25. Aug, 2011 at 4:35 pm #

        Yeah, I just wasn’t happy with the workflow. To me MultipleFileUploadField made more sense for a hasMany relationship, as the focus was on on uploading a new file, and I don’t need end-users putting the same file in the system more than once when there’s a manyMany relationship.

  4. alex 25. Aug, 2011 at 6:10 pm #

    Wow, this is a great module or addon for current silverstripe assetadmin.. Drag&Drop is awesome and the ui is clean and efficient.
    Wonder Silverstripe 3.0 has mentioned some features like drag&drop file upload similar to this?
    Well, it will be a good start, cannot wait to see more creative modules that make silverstripe more shiny .

    Thumb up unclecheese

  5. nick 25. Aug, 2011 at 6:26 pm #

    Nice one Aaron.. Stella work as always :)
    AssetAdmin was always something that clients had usability issues with, so this looks like just the business to really make SS just a little more friendly.

    Can’t wait to test it out

  6. Jono 25. Aug, 2011 at 7:00 pm #

    This is a fantastic module in its own right – and to think it’s come from just a small part of SilverSmith! Can’t wait to see what other advancements you’ve made on that project.

  7. Chris 25. Aug, 2011 at 7:46 pm #

    In the old asset admin there was a button to scan for new/changed files on the filesystem; is there a way to do this I can’t see in your nifty new asset browser?

    I’m getting a “Fatal error: Call to a member function getURL() on a non-object in kickassets/code/KickAssetAdmin.php on line 530″ error which looks to me from looking in the code is because it’s trying to create an icon from a file that doesn’t exist on the file system.

    • unclecheese 25. Aug, 2011 at 7:56 pm #

      In my experience, that function always breaks more than it fixes, but I see what you mean. I think it’s a pretty simple command to run. Filesystem::sync(), I think it is. It would be super easy to add that in.

      So in the case of your error, that’s exactly what’s going on. You’ve got a file in the database that is not represented in the filesystem, so it barfs. I think I’ll add some conditional logic around that so that it at least falls back on a generic icon.

  8. Chris 25. Aug, 2011 at 7:49 pm #

    Just as a workaround for the moment, I realised I can rebuild the assets database in the old way by manually going to /admin/assets/

  9. Jeremy Warne 27. Aug, 2011 at 7:55 pm #

    This is superb.

    I had a small problem at the start which I haven’t been able to reproduce, where to begin with I had some but not all /assets files in the database, and then after adding a couple through kickassets, they all vanished and I had to re-sync my assets folder. Haven’t had a problem since then, so I’m putting it down to something weird in my database sync to begin with.

    For those who aren’t aware: you can go to /dev/tasks and resync your file system with Silverstripe’s files database.

    Thanks again Aaron! This has always been my least favourite part of SS, you’ve done a fantastic job.

  10. banal 29. Aug, 2011 at 8:35 am #

    Is there a possibility to use the FileAttachmentField in a front-end form? Currently it always shows the “From files” button which results in a security error upon clicking (when not logged in).

    I was also wondering if the upload field has to be linked to a has_one or many_many relation or if it would be possible to establish the relations once the user submits the form?

    • unclecheese 29. Aug, 2011 at 10:26 am #

      No, it’s not a frontend form field. You can use Uploadify for that.

  11. Ingo 30. Aug, 2011 at 4:56 pm #

    Quality work, we’re blown away as usual! :)
    I really like the attention to detail, like the “attach” vs. “detach” wording on the file upload field. Its encouraging to see that you’ve found a similar approach to the SS3 designs useful, particularly around modal dialogs over dedicated asset interfaces and side bars.

    Some niggly notes from me:
    – I’d encourage you to use jQuery.entwine for the JavaScript, as it makes it more likely that parts of your UI creations can be re-used in core :)
    – You use fairly generic selectors like #drop or #newfolder. I found it helps seeing your UI as a component within a larger application (the CMS), so namespacing, classes over IDs. Relative calls like $(‘.myrootnode’).find(‘.myelement’) over $(‘#myelement’) are important to maintain a coherent structure and increase “reusability” (is that even a word?!).
    – Larger parts of the UI you’re exhibiting will hopefully be encapsulated by our new DataGrid approach (both server- and client-side): Grid layout, selection logic and actions on these selections, filter form and logic, etc.. We have a lot of work ahead of us to get there, but figured I’d mention the conceptual overlap.
    – The file tree can get quite large, which creates problems with the custom dropdown library you’re using. For one, its not hierarchical – meaning long(ish) breadcrumbs instead of expandable/collapsible hierarchies. It also just filters on the clientside, and loading the whole tree upfront is often not feasible.

    Thanks very much for your hard work and continued UI innovations around SilverStripe! Ingo

  12. Nic 31. Aug, 2011 at 6:55 pm #

    This is awesome! I’ve already utilized it to fix a problem I was having with uploading some mp3 file on a site. I did have to do some tweaking though. I was getting an error:

    Warning: Call-time pass-by-reference has been deprecated in /kickassets/code/KickAssetAdmin.php on line 643

    I removed the & and all seemed to work. Not sure if this is specific to the server that I’m on, but everything seems to be working fine after I made that change.

    Again, awesomeness!!!!!!!

  13. Mom Bunheng 04. Sep, 2011 at 10:16 am #

    Oh, you are superb!!

  14. Chris 06. Sep, 2011 at 8:49 am #

    Wow..great work! I´ve got some problems using the FileAttachmentField in DataObjectManager. After adding this field, the SimpleTinyMCEField is not working any more. Is there a simple way to fix this?

    • unclecheese 06. Sep, 2011 at 7:46 pm #

      FileAttachmentField is not intended for use in DOM popups!

  15. Paul 10. Sep, 2011 at 5:29 am #

    Another top job. Just what we’ve all been waiting for
    I think I’m being let down by browser compatibility, as various Windows based browsers behave differently to the application. IE as usual being the worst one.
    For those of us who are forced to use Windows, are there any tweaks? The issue is with the drag ang drop. IE says “cannot dispay page”, Opera does not allow the drop and Maxthon does not transfer the files after drag and drop. I’m yet to try Firefox.
    Browsers are a pain when it comes to great ideas.
    Thanks again
    Paul

  16. voodoochile 19. Sep, 2011 at 5:32 am #

    Simply awesome!! have only just started to play with this but love it already.
    one small problem some parts don’t work in IE.
    when i go into a folder it throws an error and the drag and drop dosn’t work.
    works great in firefox though, trouble is that 99% of the people i deal with use IE.
    any help would be appereciated

    • unclecheese 19. Sep, 2011 at 12:28 pm #

      Internet Explorer < 10 is not supported due to the lack of File API. I find that my users are usually OK when I tell them they need to use a specific browser. SilverStripe is software, and like any software, it has requirements. Don’t be afraid to put the problem on them!

  17. voodoochile 19. Sep, 2011 at 7:33 pm #

    Thanks Unclecheese

    your reply has as usaul been of great value, i still have so much to learn

  18. Jono 25. Sep, 2011 at 11:09 pm #

    Hi Uncle Cheese, I tried out your KickAssets module today and it’s awesome of course. I don’t know how to ‘push’ commits and what not but I submitted a couple of small fixes in the issue tracker on github https://github.com/jonom cheers!

  19. Chris 13. Oct, 2011 at 8:39 am #

    Firstly thanks for the fantastic module Uncle Cheese it works really well.

    I’ve got the FileAttachmentField working in my DOMs but when I use ImageDOM I get the UploadifyField as normal, is there any way of us using the new FileAttachmentField here instead?

    Thanks
    Chris

    • unclecheese 13. Oct, 2011 at 9:55 am #

      No, I haven’t completed that integration yet just because it’s still a new and largely untested field, but I’m glad it’s working for you!

  20. jonathan 16. Oct, 2011 at 5:40 pm #

    Hi unclecheese
    I wanted to know how to write the code in the template-file.
    If I put simply the MyFiles array like that, then the output on the website is a strange – List.
    and to write like MyFiles[0], etc. doesn’t work neither.
    Can you help me?
    I would like to have something like that from the MyFiles:
    or simply
    “assets/myUploadedImage.jpg”

    Thanks for the answer, jonathan

    • unclecheese 16. Oct, 2011 at 6:15 pm #

      Hi, Jonathan,

      I don’t understand anything you’re talking about. Can you clarify?

      • jonathan 18. Oct, 2011 at 2:04 pm #

        Ah ok

        I would like to know how to show an image on the website I uploaded with KickAssets.

        In the template-file I can write something linke:

        $Attachment

        But it doesn’t work like that, can you explain me how to write the code in the template file?

      • jonathan 18. Oct, 2011 at 2:08 pm #

        For example I have uploaded 3 Images with KickAssets.
        In the template-file I have three divs like that:

        …what code here?…
        …what code here?…
        …what code here?…

        I would like to show the 3 images in the 3 divs…

      • jonathan 18. Oct, 2011 at 2:10 pm #

        oups, id didn’t show correctli my comment in this blog, so I try again:

        For example I have uploaded 3 Images with KickAssets.
        In the template-file I have three divs like that:

        div id=”box1″ …what code here?… /div
        div id=”box1″ …what code here?… /div
        div id=”box1″ …what code here?… /div

        I would like to show the 3 images in the 3 divs…

        • unclecheese 20. Oct, 2011 at 2:32 pm #

          You’re talking about two completely different things. KickAssets is used to manage the repository of files in the CMS. It has nothing to do with managing the relationships of those files to pages or DataObjects. For that, you can use FileAttachmentField or MultipleFileAttachmentField.

  21. theAlien 27. Oct, 2011 at 9:01 pm #

    Hi Uncle Cheese,
    We have been waiting too long for this module. I really love it. Thanks a lot.

    I made a dutch translation, can I upload/send it somewhere (I’m still struggling with my github-setup)?

    Maybe I also found a small bug:
    $fafield = FileAttachmentField(”);
    $fafield->setDefaultFolder(‘MyFolder’);
    Uploading goes to MyFolder, so that’s OK.
    But if I want to use an already uploaded file, I’m directed to an extra (empty) folder, named ‘Folder’.
    Unfortunately I can’t figure out where this one is created.

  22. theAlien 28. Oct, 2011 at 5:14 am #

    Hi UncleCheese,
    Just an additional question. I’ve some extra fields on my files (copyrights, alt tag). Is it somehow possible to decorate or subclass KickAssetAdmin or something like that? I’m kind of stuck…

    • chrclaus 22. Feb, 2012 at 8:10 am #

      Hi UncleChees, Hi theAlien,

      I ran into the same problem. I have several additional fields on files and folders and want to include them into the property section at the right side. Specially for folders I did not find any way to show this section in an adequate effort. Are there any recommendations?

      Best regards,
      chrclaus

  23. Will 31. Oct, 2011 at 11:28 pm #

    Hi

    Will this work with versioned files?

    w

    • unclecheese 01. Nov, 2011 at 12:01 am #

      I’m not familiar with that module, so probably not.

  24. Simon 09. Nov, 2011 at 9:41 am #

    There’s a huge bug, known as IE…

    IE appends the URL to the current url, creating (non-functional) urls like /admin/files/admin/files/browse/0

    In this case, in IE, the ID is “files”, which breaks everything.

    In my case, I’ve temporary solved it by giving the file-url a hardcoded prepending / in folders. But it is not as it should be.

  25. Sam Jarvis 27. Feb, 2012 at 9:00 pm #

    I am in awe with this module, seriously good work.

    Seems to be running smoothly for managing assets. However the MultipleFileAttachmentField is giving me a Couldn’t run query: INSERT INTO “HomePage_Files”… unknown column “ManyManySort” on save of the page/form. I’ve added a SortableDataObject::add_sortable_many_many_relation(“HomePage”, “Files”); but that adds the column SortOrder, I could of course add the column manually, but I’d rather make sure I’m doing this right first!

    Any idea what this could be?

  26. Sam Jarvis 28. Feb, 2012 at 4:04 pm #

    This is remedied with the following:

    ManyManySortable::add_sortable_many_many_relations(array(‘HomePage’ => ‘Files’));

    in your _config.php. Perhaps a note of this should be made?

  27. Neil 12. Mar, 2012 at 10:19 am #

    Uncle Cheese,

    THis is fantastic, thank you. I second the comment above from Sam, I also had to add the ManyManySortable code to my _config.php file before I could attach the images to my pages – so maybe flag this in your sample code…

    to be added to the _config.php file:

    ManyManySortable::add_sortable_many_many_relations(array(‘NameOfPageClass’ => ‘NameOfField’));

    eg. In my case, because I’m allowing photos to be attached to every page:
    ManyManySortable::add_sortable_many_many_relations(array(‘Page’ => ‘Photos’));

  28. borriej 26. Mar, 2012 at 6:27 am #

    there is an error in this module (I believe), added it to a project with a lot of files. Sometimes when you create a folder in the kickassets popup it doesn’t get added on the FTP! So when you move your images to this folder, they do show in the kickassets popup (but with a general 404 thumb instead of a resize). When i look in the FTP, the images are still in assets/Uploads instead of assets/Uploads/MyNewNameFolder …
    Also MyNewNameFolder doesn’t exist on the FTP.

    CHMOD 777 on all assets + sub folders..
    Any idea?

  29. Reece 19. Apr, 2012 at 10:12 pm #

    Uncle, Let me start by saying GREAET FRACKIN job. I so love this module.

    I’ve just notice a bug.

    Using the ImageAttachmentField I drag an image into the dashed box. I get assets/uploads/new_image.jpg

    Without saving I drag another image onto the dashed box again. I get the;
    assets/uploads/next_image.jpg
    assets/uploads/next_image_2.jpg

    It is creating the files. When I go to the assets folder via finder or ssh I see the images are created.

    It seems to double with each image I try uploading (2,4,8,16) with each new image. I got up to image_16 before I noticed.

    Clicking save or moving to another page doesn’t appear to make difference. The only that seems to fix it is refreshing the browser window.

    By the looks of it only happens when you drag an image onto the ImageAttachmentField dashed box. I can’t seem to find a version number for KickAssets so all I can say is that I downloaded it from here a few weeks back.

    Thanks again for a REALLY COOL module. Pure inspiration :)

  30. BERZERK 25. Apr, 2012 at 8:02 am #

    this module is great. Just wandering – is there a way to specify which folder(or create a new folder) in the assets folder the particular upload field gets put into? right now they all go into the main assists folder.

    • unclecheese 25. Apr, 2012 at 9:35 am #

      Yeah, I think you can use ->setDefaultFolder(). Check the class definition for the exact method name. I’m pretty sure that’s it.

  31. Freddy Vulto 01. May, 2012 at 5:39 am #

    This module worked well during development using Firefox-11. But it turns out KickAssets doesn’t support IE9, used by our customer. We’re reverting back to plain Silverstripe asset management :-(

  32. Elisabeth 03. May, 2012 at 10:48 am #

    Hi. I’ve just downloaded the Kickassets module and the first thing I noticed was that when I use the cursor and mouse to manually drag the scroll bar the lasso marker appears, as if I would select many files.

    OS: Windows 7
    Browser: Firefox 12
    Silverstripe: 2.4.7

  33. Neil Creagh 04. Jul, 2012 at 4:12 pm #

    Just pasting my comment from the screencast here too: the sort order works well but I’m finding that it reverts back to being ordered by name everytime a new file is added.

    eg. client adds a new image to a page that already has multiple images in a custom order and the order reverts back.

    Is there a way to tell it to leave the custom order as it is, and just add the new file to the bottom or top?

  34. Haantje72 13. Aug, 2012 at 1:57 pm #

    great job. I love the module.
    I’m only struggling for a while yet with the folder name… when i call in gallery the foldertree all the new folders are named new-folder… when look into assets the same problem. the id is right but foldername stays new-folder. Now i set them manual in admin/assets but my customer doesn’t know how to. Where can i solve this problem?

    • Haantje72 13. Aug, 2012 at 2:19 pm #

      i found that this problem was solved in the latest download. Just delete folder gives still a blank screen.