I am trying to upload a CSV file for a custom section of one of our site. I am trying to convert code that used to use AJAX to use Fetch.
But I am not seeing the file at the other side (C# control)
Here is my code can some one advise what I am doing wrong.
import { UmbElementMixin } from "@umbraco-cms/backoffice/element-api";
import { UMB_NOTIFICATION_CONTEXT } from "@umbraco-cms/backoffice/notification";
import { UMB_AUTH_CONTEXT } from '@umbraco-cms/backoffice/auth';
import { UMB_DOCUMENT_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/document';
import { UmbPaginationManager } from '@umbraco-cms/backoffice/utils';
import { UUIPaginationEvent } from '@umbraco-cms/backoffice/external/uui';
var _authentication;
const template = document.createElement("template");
template.innerHTML = `
<style>
:host {
padding: 20px;
display: block;
box-sizing: border-box;
}
</style>
<uui-box style="height:400px;Width:auto;">
<h1>OLS File Import</h1>
<form id="ols-form">
<uui-input-file id="upload" name="input-file" multiple></uui-input-file>
<uui-button style="margin-top: 16px" type="submit" look="primary" label="Submit" id="formSubmit"></uui-button>
</form>
</uui-box>
`;
export default class MyDashboardElement extends UmbElementMixin(HTMLElement) {
/** @type {import('@umbraco-cms/backoffice/notification').UmbNotificationContext} */
#notificationContext;
constructor() {
super();
this.attachShadow({ mode: "open" });
this.shadowRoot.appendChild(template.content.cloneNode(true));
this.shadowRoot
.getElementById("ols-form")
.addEventListener("submit", this.onClick.bind(this));
this.consumeContext(UMB_AUTH_CONTEXT, (_auth) => {
if (_auth) {
_authentication = _auth;
} else {
console.log("The document workspace context is gone, I will make sure my code disassembles properly.")
}
});
}
onClick = (e) => {
e.preventDefault();
const formElement = e.target;
const formData = new FormData(formElement);
console.log(formData);
const data = formData.getAll('input-file');
saveData(formData);
};
}
async function saveData(d) {
var data = d;
console.log('Files', data);
var url = "/umbraco/management/api/v1/ols/import";
const TOKEN = await _authentication?.getLatestToken();
const response = await fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': 'Bearer ' + TOKEN,
'credentials': 'include'
},
body:data
});
console.log(response);
if (!response.ok) {
console.log(response.status);
} else {
console.log("OK!");
}
}
customElements.define("ols-extension", MyDashboardElement);
sing Microsoft.AspNetCore.Mvc;
using Umbraco.Cms.Api.Common.Attributes;
using Umbraco.Cms.Api.Management.Controllers;
using Umbraco.Cms.Api.Management.Routing;
using Umbraco.Cms.Core.Models;
using UmbracoCMS.App_Code.Models;
namespace UmbracoCMS.App_Code.Controllers
{
[VersionedApiBackOfficeRoute("ols/import")]
[ApiExplorerSettings(GroupName = "OLS")]
[MapToApi("ols-api")]
public class OLSController : ManagementApiControllerBase
{
private readonly IWebHostEnvironment _webHostEnvironment;
public OLSController(
IWebHostEnvironment webHostEnvironment
) {
_webHostEnvironment = webHostEnvironment;
}
[HttpPost]
public JsonResult updateAddressRecords()
{
var formCollection = Request.Form;
var rootPath = _webHostEnvironment.ContentRootPath;
if (!System.IO.Directory.Exists(rootPath + "\\ols_csv_files"))
{
System.IO.Directory.CreateDirectory(rootPath + "\\ols_csv_files");
}
List<custom_CheckPropertyDetails_Result> lst = new List<custom_CheckPropertyDetails_Result>();
IFormFileCollection files = Request.Form.Files;
foreach (IFormFile formFile in files)
{
if (formFile.Length > 0)
{
string filename = formFile.FileName;
using (FileStream stream = new FileStream(Path.Combine(rootPath + "\\ols_csv_files\\", filename), FileMode.Create))
{
formFile.CopyTo(stream);
}
}
}
return new JsonResult("OK");
}
}
}
I was expecting to get a file I can save to the file system, and then process that file.
I am either seeing nothing or grabage.
Can some point me in the correct direction.
Thanks
