Copied to clipboard

Flag this post as spam?

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

  • David Zweben 232 posts 690 karma points
    May 16, 2019 @ 23:01
    David Zweben

    Uploading a file to a media item via Angular API?

    I'm trying to figure out how to add a file to a media item (or a media item scaffold) via the Angular API in Umbraco 8, for use in a custom dashboard. I'm able to create a scaffold and save the media item without a file, but I haven't figured out how one is supposed to save a file to an upload/umbracoFile property.

    I've tried the following:

    • Wrapping the raw value from the HTML 5 File API in an array and passing that into the method

    • Passing the value returned from the file API into fileManager.setFiles and passing the value of fileManager.getFiles into the method's files argument

    • Using the Angular Upload.upload method from the ng-file-upload directive Umbraco uses internally. I was able to create a media item this way, but this bypass creating a scaffold and it doesn't return the ID or key of the resulting node, so I have no way to work with it further after saving it.

    How is this supposed to be done? Any guidance would be appreciated.

  • David Zweben 232 posts 690 karma points
    May 17, 2019 @ 12:34
    David Zweben

    I made some progress. I was able to upload a file by inserting a File object from the HTML File API into an args object as shown below, passing that args object into fileManager.setFiles(args), and then passing fileManager.getFiles() into the files argument of

    The problem now is that there seems to be a chicken-and-egg situation: is returning an error that the value for the umbracoFile property can't be empty... and with that error it returns the uploaded file's new path that I assume I would need to insert into the umbracoFile property. But I don't have that path until I get the error!

    What am I supposed to insert into the actual property value of an upload property to connect it to a newly-uploaded file?

        var args = {
            culture: "",
            propertyAlias: "umbracoFile",
            files: [fileObjectFromHtmlFilesApi]
        // Line below only returns what I already knew, not the new file path
        var parentId = -1;
        var mediaTypeAlias = "file";
        mediaResource.getScaffold(parentId, mediaTypeAlias)
            .then(function (scaffold)
       = files[i].name;
                // Presumably I need to populate the umbracoFile property here, but I have nothing to insert yet.
      , true, fileManager.getFiles())
                    .then(function (media)
                        // I can get here if I pass a dummy value to umbracoFile, 
                        // but then the file is not associated with the property
                    function (error)
                        // This error gives me the file path, but now it's too late!
            function (error)
                // If the scaffolding fails
  • David Zweben 232 posts 690 karma points
    May 17, 2019 @ 14:19
    David Zweben

    Ok, for a property of type Umbraco.UploadField, it looks like all I had to do was use the code above, but before I run, I just had to set the umbracoFile property's value to a placeholder string, via the line below. That allowed the node to save, and it updated the umbracoFile property to the correct value for me upon save.

    scaffold.tabs[0].properties[0].value = "placeholder";

    For an Umbraco.ImageCropper, though, it looks like it's necessary to set the value to an object in the format it expects, as follows:

    var dummyObject = {
      "src": "placeholder string",
      "crops": []
  • Keith 44 posts 180 karma points
    May 26, 2021 @ 09:35

    Thank you for this!

    This is the only place on the internet I could find out how to do this.

Please Sign in or register to post replies

Write your reply to: