• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

create an option in admin panel to upload image to specific folder

i want to create an option in admin panel to upload image in specific folder and these image name can be added to select menu of other option. how it is possible ...please reply


Well-known member
XF comes with it's own upload control unit for templates:
<xen:title>{xen:phrase iwd_upload_image}</xen:title>

<xen:form action="{xen:adminlink 'iwd-shop-items/uploadimage'}" upload="true">
    <xen:uploadunit label="{xen:phrase iwd_select_an_image_to_upload}:" name="imagename" />
    <xen:selectunit label="{xen:phrase iwd_shop_image_category}:" name="image_category" inputclass="autoSize" value="Light Armor">
        <xen:option value="Light Armor" label="Light Armor" />
        <xen:option value="Medium Armor" label="Medium Armor" />
        <xen:option value="Heavy Armor" label="Heavy Armor" />
        <xen:option value="Shield" label="Shield" />
        <xen:option value="Simple Weapon Melee" label="Simple Weapon Melee" />
        <xen:option value="Simple Weapon Ranged" label="Simple Weapon Ranged" />
        <xen:option value="Martial Weapon Melee" label="Martial Weapon Melee" />
        <xen:option value="Martial Weapon Ranged" label="Martial Weapon Ranged" />
        <xen:option value="Ammo" label="Ammo" />
        <xen:option value="Amulet" label="Amulet" />
        <xen:option value="Belt" label="Belt" />
        <xen:option value="Boots" label="Boots" />
        <xen:option value="Bracers" label="Bracers" />
        <xen:option value="Cloak" label="Cloak" />
        <xen:option value="Gauntlets" label="Gauntlets" />
        <xen:option value="Helm" label="Helm" />
        <xen:option value="Instrument" label="Instrument" />
        <xen:option value="Potion" label="Potion" />
        <xen:option value="Ring" label="Ring" />
        <xen:option value="Robe" label="Robe" />
        <xen:option value="Scroll" label="Scroll" />
        <xen:option value="Wand" label="Wand" />
        <xen:option value="Miscellaneous" label="Miscellaneous" />
    <xen:submitunit save="{xen:phrase iwd_upload_image}" />
The above is what I am currently working on, I added a required select unit (for my use, you do not need it to upload an image).

Next you need admin controller to handle the form action is pointing to (this is just a part of my admin controller, I removed the rest that is not part of the uploading):

class IcewindDaleRP_IcewindDale_ControllerAdmin_ShopItems extends XenForo_ControllerAdmin_Abstract
    protected function _preDispatch($action)

    public function actionUpload()
        $viewParams = array(
        return $this->responseView(

    public function actionUploadImage()
        $uploadItemImage = XenForo_Upload::getUploadedFile('imagename');
        if ($uploadItemImage)
            $imageFileName = $this->_getHelperUploadShopImageModel()->uploadItemImage($uploadItemImage);
            if (!$this->_getShopImagesModel()->verifyUniqueImageUrlByFileName($imageFileName))
                $imageName = $this->_getShopImagesModel()->createImageNameFromFileName($imageFileName);
                $itemType = $this->_input->filterSingle('image_category', XenForo_Input::STRING);

                $dw = XenForo_DataWriter::create('IcewindDaleRP_IcewindDale_DataWriter_ShopImages');
                $dw->set('image_name', $imageName);
                $dw->set('image_url', $imageFileName);
                $dw->set('item_type', $itemType);
            return $this->responseRedirect(
            return $this->actionUpload();
The above action uploads the image to my file directory then checks to see if the same image name is in the DB, and if not add it to the DB and as well with a unique name and the item type the image is to be used for.

Here is an example of the helper I use to set the image location, that is called by the above action:

class IcewindDaleRP_IcewindDale_Helper_File_ShopImage
    public function uploadItemImage(XenForo_Upload $upload)
        $items_location = XenForo_Helper_File::getExternalDataPath().'/icewind_items/';

        $baseTempFile = $upload->getTempFile();
        $newFileName = $upload->getFileName();
        $newitem = $items_location.$newFileName;

        rename($baseTempFile, $newitem);

        chmod($newitem, 0777);

        return $newFileName;
To create your select item you can just read in all the uploaded files in your directory, or In my case (radio options) I create it from the DB as I need to only use the images specific to the type of item being made. My admin controller calls the model to get all the appropriate image types, and passes the array to the shop template to be displayed:

<dl class="ctrlUnit">
    <dt>{xen:phrase iwd_shop_select_image}:</dt>
        <ul class="iwdShopImageList">
        <xen:foreach loop="$images" value="$image">
        <li><label for="ctrl_image_{$image.image_id}">
            <input type="radio" name="image_url" value="{$image.image_url}" id="ctrl_image_{$image.image_id}" {xen:checked "'{$image.image_url}' == '{$item.image_url}'"} />
            <img class="iwdShopImage" src="{$images_url}{$image.image_url}" title="{$image.image_name}" />
Hopes this will help you to get started. Here is the result of the above:

how do you call this template in your option group related to your add on ...and how to save this option with other options of group..
Last edited:


Well-known member
Are you referring to adding an upload image option to Home->Options->yourNewOptionGroup, or the way mine is set up in the SS?
i have tow folder images1 and images2
and i create an option in home>>option>>group> in this i have an option select folder name if i select images1in drop down then images reletaed to images1 become the option of the next select menu ...if i select second option images2 then images related to this folder beome the option of next option select image...i think it will be possible by ajax...but dont now how ajax work with xenforo...and for select images option i have creates an admin template and call it to my option
Last edited:


Well-known member
This is something I have been thinking about for my item shop. Right now, I need to select the type of item that is going to be created first, before I can add an item, so that the proper images will be loaded. I didn't think that that one extra step would bother me, but it does. Now that the item creation on the admin side is completely finished I'll take a look at doing that.