Send File/Image From Angular To OrchardCore

[muobeidat]

Hello,

I want to send file/image to orchard from angular and store the file/image in folder.
how can do that?
can i use Graphql?

[hishamco]

I think we missed an API Controller for this, maybe by design

/cc @Piedone

[Piedone]

I think it's just that nobody needed it yet, but we can add a RESTful endpoint for basic Media CRUD, in a similar vein to the content item API. Could you open an issue about this, please @muobeidat?

[muobeidat]

Thank you @Piedone , i will open a ticket right now.

[lampersky]

@muobeidat you can use existing admin controller method, but remember to obtain antiforgery token first:

function uploadBlob(blob, fileName) {
	const token = document.querySelector("input[name=__RequestVerificationToken]").value;
	const folder = 'images';

	const formData = new FormData();
	const dt = new DataTransfer();
	const file = new File([blob], fileName);
	dt.items.add(file);
	formData.append('path', folder);
	formData.append('contentType', 'image/png');
	formData.append('__RequestVerificationToken', token);
	formData.append('files', dt.files[0]);

	fetch('/Admin/Media/Upload', { method: 'POST', body: formData })
	.then(response => response.json())
	.then(result => {
		console.log(result);
	})
	.catch(error => {
		console.error('Can\'t upload:', error);
	});
}

[Piedone]

Note that this is an internal API though and it can change without warning. It most certainly will change under #14256.

[muobeidat]

@lampersky thank you
"admin controller method" ,i could not find the method.
you mean can use script on workflow or what?

[lampersky]

@lampersky thank you
"admin controller method" ,i could not find the method.
you mean can use script on workflow or what?

when your site is up and running, you can perform request to this endpoint from your angular app:
https://yourdomain.com/Admin/Media/Upload