Hi Kyle

Nice work and thank you for sharing! :) - I'm just wondering if it would be possible make a package out of this so people can just install it boom then it works?

/Jan

Jan,

Oh, hey, probably! I hadn't considered a small package for something like this, but that's a great thought. I'll look into that. :)

-Kyle

Cool - It seems to be some nice useful functionality that many can benefit from without needing to know the ins and outs of the code and how to make it work themselves. By packaging it up and writing some short instructions it can perhaps make it easier for those that just need to get the job done and might not need to know all the details about what goes on under the helmet :)

/Jan

I can see definitely see that. It's just a matter of time (I had just completed the code for a work project so threw it up quickly). I'll have to fit in packaging it as a little weekend warrior project.

Yeah, no worries - I can totally understand it and it's up for the grabs from Github - So just a nice enhancement when time allows.

I'll certainly give the package a big H5YR :D

/Jan

The package is absolutely a great idea. :) I'm glad you suggested it!

The gist looks great. H5YR!!!

How do I get this working on a custom section panal as a plugin?

I've created a plugin folder, then added a custom dashboard section:

  <section alias="manage">
    <areas>
      <area>manage</area>
    </areas>
    <tab caption="Bulk upload">
      <control showOnce="false" addPanel="true" panelCaption="">
        ~/App_Plugins/Manager/backoffice/controls.html
      </control>
    </tab>
  </section>

Then on the controller I have this:

<umb-panel>
    <div class="umb-panel-body umb-scrollable row-fluid">
        <div class="tab-content form-horizontal">
            <div class="umb-pane">
                <div id="content" data-ng-app="exampleApp" data-ng-controller="FileUploadController">
                    <h1>Upload a file</h1>
                    <button ng-file-select ng-model="files" ng-file-change="fileSelected(files)" class="file button btn-primary" ng-multiple="false" accept=".jpg,.png,.gif" ng-show="!isUploading">
                        Choose File
                    </button>
                    <button type="button" data-ng-click="uploadFile()">Upload</button>
                </div>
            </div>
        </div>
    </div>

and in my package manifest files I have this:

    {   
   javascript: [
        '~/App_Plugins/Manager/backoffice/ng-file-upload.js',
        '~/App_Plugins/Manager/backoffice/ng.app.js',
        '~/App_Plugins/Manager/backoffice/file.upload.api.service.js',
        '~/App_Plugins/Manager/backoffice/file.upload.controller.js'
    ]
}

Nothing seems to be firing when I click the choose file button though.

Great work, also trying to get this running seems like it's using an old v3 version of https://github.com/danialfarid/ng-file-upload so make sure to reference that, since the new ones won't work due to the directives being renamed

For others interested in this topic, based on Kyle's initial Gist I have a working plugin at

https://github.com/BarryFogarty/Umbraco.SimpleFileUpload

You'll need to clone the repo and then copy the App_Plugins/SimpleFileUpload folder, and the FileUploadApiController.cs into your Umbraco project. You will then be able to create a dashboard control pointed at ../App_Plugins/SimpleFileUpload/app.html, e.g.

<section alias="SimpleFileUpload">
    <areas>
      <area>content</area>
    </areas>
    <tab caption="Simple File Upload">
      <control>
        ../App_Plugins/SimpleFileUpload/app.html
      </control>
    </tab>
  </section>

I plan to develop it into a package, which will install a property editor into the backoffice for use in doctypes.

is working on a reply...