Missing documentation on NodeJS Client?

[PMendesWebDev]

Hey there,

I've been using the NodeJS client to manage content in my Heartcore Umbraco and I've been struggling with some of the methods; in particular, the create() method (either from client.management.media or client.management.content).

When a FormData is used in create() (because we are uploading a file with the request) there is only way of doing the request (as far as I've tested it), which is using FileSystem.createReadStream(). That means that you must have the file you are uploading in the file system.

I was, however, trying to get the file from an url and send it with the request. The media or content node was created, but whenever I opened the node I would get the following error

which was related to this exception

I've tried appending the file in many different ways, to see if I could get it to work, but the only solution I got was to download the file locally and then using the FileSystem to attach it.

The important thing: in this process, I've felt that some documentation was missing on how we "communicate" with Umbraco Heartcore using the client. The several ways (if there are more than one) of uploading a file; the proper way to relate existing media/content nodes, etc.

I am available to improve this issue as I know this can be a little confusing xD

Thanks,
Pedro

[Fjellvang]

Hi Pedro.

Just to be 100% sure we're aligned.

You have a url to an image, ie a Jpg and you are trying to upload that image to your umbraco instance via the management API.

For this you've tried to create a piece of media, and/or a piece of content with a media picker.

Did you in this/these calls only supply the URL then, or how did you attempt to upload the image?

[PMendesWebDev]

Hi Fjellvang,

I tried to get the image as a base64 string (to attach it), as a binary data (as per documentation on API) and also to supply a buffer from the image's url.

[Fjellvang]

How did you attempt it? I think the documentation could be better which i will attempt to alleviate asap but i successfully uploaded an image from a form input with the following code:

var form = new FormData();
const file = e.target.files[0];
const data = 
{
  mediaTypeAlias: 'image', 
  name: file.name,
  umbracoFile: {src: file.name}
};
form.append('content', JSON.stringify(data));
form.append('umbracoFile', file);
client.management.media.create(form);

[sitereactor]

Hi @PMendesWebDev can you help us by elaborating a little bit on what you wrote here

The important thing: in this process, I've felt that some documentation was missing on how we "communicate" with Umbraco Heartcore using the client. The several ways (if there are more than one) of uploading a file; the proper way to relate existing media/content nodes, etc.

Are you refering to the documentation under https://our.umbraco.com/documentation/Umbraco-Heartcore/Client-Libraries/Node-JS/ - being the place to elaborate on using the Management API using the nodejs client with a sample for how to upload media?

It sounds like you found the example in this repository, and that works as @Fjellvang mentioned above. It also sounds like you are trying to upload media that is not local to the nodejs client, so I'm unsure if the question is more about additional ways of being able to upload media or to better document the current approach.

We are happy to help once we have a better understanding of what you are after 😄

[PMendesWebDev]

Hi Fjellvang and Morten :)

@Fjellvang

How did you attempt it?

From the image's URL, using axios, I made a get request and save it as a string (binary and base64) to append it.
i.e.:

var form = new FormData();
const data = 
{
  mediaTypeAlias: 'image', 
  name: {METHOD_ARGUMENT},
  umbracoFile: {src: path.basename(fileUrl)}
};
form.append('content', JSON.stringify(data));
let imageRequest = await axios.get("imageUrl", {responseType: 'arraybuffer'});
let rawImage = Buffer.from(imageRequest.data).toString('base64');
form.append('umbracoFile', rawImage);

@sitereactor
What I meant was, from the example above, I don't know what types the "rawImage" variable can be in order to be successfully uploaded, because the example in the repo only had FileSystem.createReadStream().

I think this could be improved by stating what are the types Umbraco is expecting to receive in the FormData's 'umbracoFile' field.

Thank you both!

[sitereactor]

Alright, before we update anything. Did you want to make a suggestion? Maybe a PR with updated examples?
We are happy to review and merge additional examples that help by imrpving what we have or showing other approaches to uploading files as part of creating a media item.

[sitereactor]

For now I added a note to the part around file uploads:
30fc154

[PMendesWebDev]

Hey there @sitereactor,

Sorry for the absence of answer, I was not available last week. I think the note you added is really the only thing to be done as far as I know, because I did not find any other way to upload the file xD

If, by any chance, I find a working alternative to upload the file, I'll do a PR on the file you edited :)