This is a migrated thread and some comments may be shown as answers.

Upload component reports 'File failed to upload'

6 Answers 2920 Views

Upload

This is a migrated thread and some comments may be shown as answers.

6 Answers, 1 is accepted

Accepted

answered on 12 Oct 2020, 11:30 AM

Hi Marin

Thank you for your reply :-) And thanks for the links. I managed to find the solution to my problem :-)

You write that the component does not issue a OPTIONS request explicit, however, it appears to do so implicitly. According to this article and this article browsers will issue a 'preflight' request (the http OPTIONS verb) when the conditions listed are not meet when doing cross domain calls. My guess is (please correct me if I am wrong) that the Upload component does insert a callback (see the second article) to provide the upload progress percentage shown on the component and therefore it triggers the browser to do the OPTIONS request.

If someone else should end here with the same issue, below find the basic solution that made it work for me :-)

My solution is to be run as a Azure Web application and as Azure Functions.

In the Web Application I configured the Upload component as described in the documentation. The SAVEURL is set and is a cross domain url (e.g. 'MyUploadServer.dk/api/file'). No special code was applied to the Upload component.

I wrote two Azure functions to handle the files to be uploaded.

First, I wrote this function to handle the OPTIONS request:

[FunctionName("FileOptions"

)]

public static

IActionResult FileOptions(
     [HttpTrigger(AuthorizationLevel.Anonymous,

"options", Route = "file"

)]
      HttpRequest req, ILogger log)
 {

string originSite = req.Headers["Origin"

];
     req.HttpContext.Response.Headers.Add(

"Access-Control-Allow-Origin"

, originSite);
     req.HttpContext.Response.Headers.Add(

"Access-Control-Allow-Methods", "POST, GET, OPTIONS"

);
     req.HttpContext.Response.Headers.Add(

"Access-Control-Allow-Credentials", "true"

);
     req.HttpContext.Response.Headers.Add(

"Access-Control-Allow-Headers", "X-PINGOTHER, Content-Type"

);

return new

NoContentResult();
 }

Then, I modified the upload handler from the Upload component documentation:

[FunctionName("FileUpload")]

public static async Task<IActionResult> FileUpload(

[HttpTrigger(AuthorizationLevel.System, "post", Route = "file")]

HttpRequest req, ILogger log)

{

string originSite = req.Headers["Origin"];

req.HttpContext.Response.Headers.Add("Access-Control-Allow-Origin", originSite);

if (req.Form.Files != null)

{

try

{

foreach (var file in req.Form.Files)

{

var fileContent = ContentDispositionHeaderValue.Parse(file.ContentDisposition);

// Some browsers send file names with full path.

// We are only interested in the file name.

var fileName = Path.GetFileName(fileContent.FileName.ToString().Trim('"'));

var physicalPath = Path.Combine(@"C:\Temp\UploadDir", fileName);

// Implement security mechanisms here - prevent path traversals,

// check for allowed extensions, types, size, content, viruses, etc.

// this sample always saves the file to the root and is not sufficient for a real application

using (var fileStream = new FileStream(physicalPath, FileMode.Create))

{

await file.CopyToAsync(fileStream);

}

catch

{

// implement error handling here, this merely indicates a failure to the upload

return new BadRequestResult();

}

// Return an empty string message in this case

return new OkResult();

}

And Voilá, it works :-)

Best regards

Accepted