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 mediaResource.save method
Passing the value returned from the file API into fileManager.setFiles and passing the value of fileManager.getFiles into the mediaResource.save 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.
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 mediaResource.save.
The problem now is that there seems to be a chicken-and-egg situation: mediaResource.save 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]
};
fileManager.setFiles(args);
// Line below only returns what I already knew, not the new file path
console.log(fileManager.getFiles())
var parentId = -1;
var mediaTypeAlias = "file";
mediaResource.getScaffold(parentId, mediaTypeAlias)
.then(function (scaffold)
{
scaffold.name = files[i].name;
// Presumably I need to populate the umbracoFile property here, but I have nothing to insert yet.
mediaResource.save(scaffold, 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
});
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 mediaResource.save(), 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.
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
mediaResource.savemethodPassing the value returned from the file API into
fileManager.setFilesand passing the value offileManager.getFilesinto themediaResource.savemethod's files argumentUsing the Angular
Upload.uploadmethod 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.
I made some progress. I was able to upload a file by inserting a
Fileobject from the HTML File API into anargsobject as shown below, passing thatargsobject intofileManager.setFiles(args), and then passingfileManager.getFiles()into the files argument ofmediaResource.save.The problem now is that there seems to be a chicken-and-egg situation:
mediaResource.saveis returning an error that the value for theumbracoFileproperty 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?
Ok, for a property of type
Umbraco.UploadField, it looks like all I had to do was use the code above, but before I runmediaResource.save(), I just had to set theumbracoFileproperty's value to a placeholder string, via the line below. That allowed the node to save, and it updated theumbracoFileproperty to the correct value for me upon save.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:Thank you for this!
This is the only place on the internet I could find out how to do this.
is working on a reply...