refused to connect when uploading files in razor pages

Question

I was trying to make a file upload work in my project. The problem is that whenever I click the submit button, all I get is the ERR_CONNECTION_REFUSED. My code for the page is as follows:

@page
@model EShop.Pages.Administration.UploadImageModel
@{
    ViewData["Title"] = "UploadImage";
    Layout = "~/Pages/Administration/Shared/_AdminLayout.cshtml";
}

<h1>Upload obrázků</h1>

<form method="post" enctype="multipart/form-data">
    <input type="file" multiple asp-for="Uploads" />
    <input type="submit" />
</form>

and:

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace EShop.Pages.Administration
{
    public class UploadImageModel : PageModel
    {

        private IWebHostEnvironment _environment;
        public UploadImageModel(IWebHostEnvironment environment)
        {
            _environment = environment;
        }
        [BindProperty]
        public IList<IFormFile> Uploads { get; set; }

        public async Task OnPostAsync ()
        {
            foreach (var u in Uploads)
            {
                var file = Path.Combine(_environment.ContentRootPath, "uploads", u.FileName);
                using (var fileStream = new FileStream(file, FileMode.Create))
                {
                    await u.CopyToAsync(fileStream);
                }
            }
        }
    }
}

Is there something wrong with this? Or is the error somewhere else?

Answer 1

I am able to create a clean project and copy in your UploadImage code and it works as expected. I do not know if you meant to, but you will also likely want an OnGet method handler in your class. Also, you are currently only uploading a single file, so I am not sure you meant to declare Uploads as a list.

Here is the UploadImage.cshtml code:

@page
@model StarterWebApplication.Pages.UploadImageModel
@{
    ViewData["Title"] = "UploadImage";
}

<h1>UploadImage</h1>

<form method="post" enctype="multipart/form-data">
    <input type="file" multiple asp-for="Uploads" />
    <input type="submit" />
</form>

Here is the UploadImage.cshtml.cs code:

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace StarterWebApplication.Pages
{
    public class UploadImageModel : PageModel
    {
        //public void OnGet()
        //{

        //}

        private IWebHostEnvironment _environment;
        public UploadImageModel(IWebHostEnvironment environment)
        {
            _environment = environment;
        }
        [BindProperty]
        public IList<IFormFile> Uploads { get; set; }

        public async Task OnPostAsync()
        {
            foreach (var u in Uploads)
            {
                var file = Path.Combine(_environment.ContentRootPath, "uploads", u.FileName);
                using (var fileStream = new FileStream(file, FileMode.Create))
                {
                    await u.CopyToAsync(fileStream);
                }
            }
        }
    }
}