question

CoreyFleig-6304 avatar image
0 Votes"
CoreyFleig-6304 asked CoreyFleig-6304 commented

Need to fix my Ajax call to upload file and post to Controller

I have some javascript that calls window.showOpenFilePicker, and gets the file opject.
That much works quite well with FormData.

However, when I call ajax to post to my controller, when I debug the action entry point Upload(IFormFile file), the variable "file" is still null.

I've seen some discussion in stackoverflow about this, but it didn't quite match my scenario.

Here's my javascript:

     <button id="formElem" onclick="getFile()">Open file</button>
    
     <script>
         const pickerOpts = {
             types: [
                 {
                     description: "Images",
                     accept: {
                         "image/*": [".png", ".gif", ".jpeg", ".jpg"],
                     },
                 },
             ],
             excludeAcceptAllOption: true,
             multiple: false,
         };
    
         async function getFile() {
             let [fileHandle] = await window.showOpenFilePicker(pickerOpts);
             const fileData = await fileHandle.getFile();
    
             console.log(fileData);
    
             var formData = new FormData();
             formData.append('image', fileData, fileData);
    
             $.ajax({
                 type: "POST",
                 url: "@(Url.Action("UploadFile", "Home"))",
                 data: formData,
                 processData: false,
                 contentType: false,
                     success: function (response) {
                     }
             });
         }
     </script>
dotnet-aspnet-core-general
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

ZhiLv-MSFT avatar image
0 Votes"
ZhiLv-MSFT answered CoreyFleig-6304 commented

Hi @CoreyFleig-6304,

    var formData = new FormData();
      formData.append('image', fileData, fileData);

However, when I call ajax to post to my controller, when I debug the action entry point Upload(IFormFile file), the variable "file" is still null.

The issue relates that the parameter name not matched.

Try to change the formData as below:

      var formData = new FormData();
      formData.append('file', fileData, fileData);

Or, change the controller's parameter name from file to image.

The result as below:

202977-2.gif


If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,
Dillion


2.gif (967.9 KiB)
· 2
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Once again, you are a super genius. Thank you SO much - you always seem to have the perfect answer.

I got the javascript from Mozilla, but I didn't realize the first parameter had to match the signature in the controller. I didn't
see any discussion of that on their web site.

So again, thank you! :)

0 Votes 0 ·
 @ZhiLv-MSFT
    
  May I follow up with two questions:
    
  1. What software do you use for screenshot animation?

  2. In Javascript, I get the image object by calling showOpenFilePicker, and then call fileHandle.getFile().
    
    
  I noticed that when I append to formData.append, I can't seem to reference the actual image's filename,
  even though I can see it in console.log.
    
  Do you know how I can get the filename?

         let [fileHandle] = await window.showOpenFilePicker(pickerOpts);
         const fileData = await fileHandle.getFile();

         console.log(fileData);

         var formData = new FormData();
         formData.append('file', fileData, ????????????); // How do I reference the filename?


0 Votes 0 ·