Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Kyle Weems 42 posts 296 karma points MVP 4x c-trib
    Apr 10, 2015 @ 19:05
    Kyle Weems
    2

    Uploading files to server w/AngularJS API service and Umbraco API controller

    I made a Gist for this, as it's something I've had to do for a couple projects. Thought it might come in handy for someone else.

    File Upload Example Gist

    If there's any thoughts on how to improve it, or make it simpler, or do the same thing better in another fashion, I'd be interested.

  • Jan Skovgaard 11258 posts 23498 karma points MVP 7x admin c-trib
    Apr 10, 2015 @ 20:36
    Jan Skovgaard
    0

    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

  • Kyle Weems 42 posts 296 karma points MVP 4x c-trib
    Apr 10, 2015 @ 20:41
    Kyle Weems
    0

    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

  • Jan Skovgaard 11258 posts 23498 karma points MVP 7x admin c-trib
    Apr 10, 2015 @ 20:50
    Jan Skovgaard
    0

    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

  • Kyle Weems 42 posts 296 karma points MVP 4x c-trib
    Apr 10, 2015 @ 20:53
    Kyle Weems
    0

    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.

  • Jan Skovgaard 11258 posts 23498 karma points MVP 7x admin c-trib
    Apr 10, 2015 @ 20:55
    Jan Skovgaard
    0

    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

  • Kyle Weems 42 posts 296 karma points MVP 4x c-trib
    Apr 10, 2015 @ 20:57
    Kyle Weems
    0

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

  • Matt Barlow (jacker.io) 151 posts 681 karma points c-trib
    Oct 14, 2015 @ 11:35
    Matt Barlow (jacker.io)
    0

    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.

  • keilo 563 posts 1018 karma points
    Mar 11, 2016 @ 14:32
    keilo
    0

    Hi Matt

    Did you find a solution to this?

    I cant seem to get it to work either. Interested to know if you find a workaround.

  • Tim Geyssens 6539 posts 15327 karma points MVP 2x c-trib
    Nov 11, 2015 @ 14:39
    Tim Geyssens
    0

    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

  • keilo 563 posts 1018 karma points
    Mar 11, 2016 @ 14:33
    keilo
    0

    Hi Tim

    Are you using the file at

    https://github.com/danialfarid/ng-file-upload/blob/master/demo/src/main/webapp/js/ng-file-upload.js

    I have tried copying that file to the App_plugins folder of the angular-uploader but it doesnt seem to work.

    Do you happen to have the direct link to the ng-file-upload.js used?

    Tried adding it as a data type with package.manifest looking like below;

    {
       propertyEditors: [{ 
          alias: "FileUploadController",
          name: "FileUpload API Controller",
          editor: {
            view: "~/App_Plugins/_Uploader/fileUpload.html",
            hideLabel: true
          },
       javascript: [
         '~/App_Plugins/_Uploader/backoffice/angular-file-upload.js',
            '~/App_Plugins/_Uploader/backoffice/ng.app.js',
            '~/App_Plugins/_Uploader/backoffice/file.upload.api.service.js',
            '~/App_Plugins/_Uploader/backoffice/file.upload.controller.js'
       ] 
    }
    
    

    When added to the document type, Its loading the the browse and upload button, no console errors but when i click on browse its saving the document (i.e. firing save event instead of opening file dialog).

    Is there a proper way to get this to work in a data type?

  • Barry Fogarty 493 posts 1129 karma points
    Sep 16, 2016 @ 14:16
    Barry Fogarty
    2

    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.

Please Sign in or register to post replies

Write your reply to:

Draft