C#•3w ago

Photo upload always fails

I am about to hit my head against the keyboard - as per video attached my photo upload onto my ASP.NET app always fails. The culprit seems to be the files in this code

  
    [System.Web.Mvc.HttpPost]
    public async Task<JsonResult> UploadListingImage()
    {
        String result = string.Empty;
        var files = Request.Form.Files; //Debug shows files is always null
        foreach (IFormFile sourceFile in files) //files is null so it does not go thru the loop
        {
            string FileName = sourceFile.Name + ".jpg";
            string imagepath = GetActualPath(FileName);

            try
            {
                if (System.IO.File.Exists(imagepath))
                {
                    System.IO.File.Delete(imagepath);
                }

                using (FileStream stream = System.IO.File.Create(imagepath))
                {
                    await sourceFile.CopyToAsync(stream);
                     result = "pass";
                }
            }
            catch (ArgumentNullException exp)
            {
                Console.WriteLine("Please provide a valid file path.");
            }
        }

        return Json(result); //once the loop is skipped the operation directly returns this one
    }

  
    [System.Web.Mvc.HttpPost]
    public async Task<JsonResult> UploadListingImage()
    {
        String result = string.Empty;
        var files = Request.Form.Files; //Debug shows files is always null
        foreach (IFormFile sourceFile in files) //files is null so it does not go thru the loop
        {
            string FileName = sourceFile.Name + ".jpg";
            string imagepath = GetActualPath(FileName);

            try
            {
                if (System.IO.File.Exists(imagepath))
                {
                    System.IO.File.Delete(imagepath);
                }

                using (FileStream stream = System.IO.File.Create(imagepath))
                {
                    await sourceFile.CopyToAsync(stream);
                     result = "pass";
                }
            }
            catch (ArgumentNullException exp)
            {
                Console.WriteLine("Please provide a valid file path.");
            }
        }

        return Json(result); //once the loop is skipped the operation directly returns this one
    }

` Could anyone kindly point me in the right direction as to why files always go null in this code? For the full contect here is my code https://paste.mod.gg/azthzgzpckja/0

BlazeBin - azthzgzpckja

A tool for sharing your source code with the world!

27 Replies

Angius•3w ago

Is this ASP.NET Core? Which version? Also, check the network panel in devtools to see what the request looks like

Batuhan•3w ago

i think the problem is not creating the image,it's the showing them. Maybe you should check the correct url when passing it to img. for instance if you are working in local check for http://localhost.../imagePath/image.jpg

Unknown User•3w ago

Message Not Public

morry329#OP•3w ago

The request is 200 so seems to me like the frontend is able to communicate the event where the file picker picks up the image. However I have no idea why the files variable returns null on the controll side. Do you have any?

Angius•3w ago

Been a hot while since I used jQuery If the request goes through, works, and returns 200 OK, no idea why the error callback would trigger

morry329#OP•3w ago

My Rider suggested it I'll check my devtool tomorrow.

Unknown User•3w ago

Message Not Public

morry329#OP•3w ago

https://paste.mod.gg/jnzbemvszqlh/0

BlazeBin - jnzbemvszqlh

A tool for sharing your source code with the world!

Unknown User•3w ago

Message Not Public

morry329#OP•3w ago

how ultra wrong

Unknown User•3w ago

Message Not Public

morry329#OP•3w ago

Yes as you expected [System.Web.Mvc.HttpPost] for example this notation is suggested Rider's AI (and a kind of autocorrected)

Unknown User•3w ago

Message Not Public

morry329#OP•3w ago

I have no clue for that either haha

Unknown User•3w ago

Message Not Public

morry329#OP•3w ago

seriously, I rarely touched .csproj

Unknown User•3w ago

Message Not Public

morry329#OP•3w ago

Like 6 months ago or so I only manually added EFCore in there. Otherwise I never touched Compile Remove or Folder Include

Unknown User•3w ago

Message Not Public

morry329#OP•3w ago

sand in the oil tank .. awwwwww it sounds so bad So this "ultra bad" csproj has something to do with my code's symptoms (not uploading/not displaying image on View)?

morry329#OP•3w ago

I checked the webtool just now and it still returns 200 - still, my controller has the null files variable Maybe it has something to do with the wrong url when passing it to img like @Batuhan suggested

Unknown User•2w ago

Message Not Public

Angius•2w ago

Out of curiosity, what if you used plain JS and fetch() instead of jQuery?

const img = document.querySelector('#CurrentImageElementId');

const listingCode = document.getElementById('listingCode').value;
const files = document.getElementById('imageupload').files;
const filedata = new FormData();

for (let i = 0; i < files.length; i++) {
    filedata.append(listingCode, files[i]);
}

const response = await fetch('/Home/UploadListingImage', {
    method: 'POST',
    body: filedata
});

if (!response.ok) {
    alert("upload is not done");
    return;
}

const result = await response.text();

if (result === 'pass'){
    alert('Listing Image Uploaded xD');
    var reader = new FileReader();
    reader.onload = (e) => {
        img.attr('src', e.target.result);
    }
    reader.readAsDataURL(files[0]);
} else {
    alert("upload is not done");
}

const img = document.querySelector('#CurrentImageElementId');

const listingCode = document.getElementById('listingCode').value;
const files = document.getElementById('imageupload').files;
const filedata = new FormData();

for (let i = 0; i < files.length; i++) {
    filedata.append(listingCode, files[i]);
}

const response = await fetch('/Home/UploadListingImage', {
    method: 'POST',
    body: filedata
});

if (!response.ok) {
    alert("upload is not done");
    return;
}

const result = await response.text();

if (result === 'pass'){
    alert('Listing Image Uploaded xD');
    var reader = new FileReader();
    reader.onload = (e) => {
        img.attr('src', e.target.result);
    }
    reader.readAsDataURL(files[0]);
} else {
    alert("upload is not done");
}

Unknown User•2w ago

Message Not Public

morry329#OP•2w ago

Thank you so much for all this, I truly appreciate it ^^ I am very very new to js also so I will play around and experiment. If I have more questions I will reply here Thank you so much for the functional example of csproj ^^ My reason for sticking with the old 7.0 is my Google search - perhaps I am abysmal at it too, it gives me deprecated information using even Net4 etc haha. And I am not technically versed enough to handle the latest version 9* etc

Angius•2w ago

What do you think 9.x is, that you would not be technically versed enough to handle it?

Unknown User•2w ago

Message Not Public

Gaming

Programming

Photo upload always fails

Did you find this page helpful?