As you may aware via google, the Javascript cannot handle the File content. You cannot submit the File by using Ajax.
There are many solutions and plugIn both free and commercial on the Internet. But those seem not meet to my requirements. What I need is a synchronous upload the file and temporary store in object and display on the screen.
Therefore, the best solution is to use hidden IFrame recommended by many people. I just modify and simplify it to meet my requirements.
The result of below code:
The concepts are:
- Create a normal form for submitting file content with "enctype='multipart/form-data'" , and its target attribute is the IFrame ==> when the form is submit only the IFrame is refreshed (user will not aware of it)
- Handle the IFrame load function, to generate the result on the Partial view
There are many solutions and plugIn both free and commercial on the Internet. But those seem not meet to my requirements. What I need is a synchronous upload the file and temporary store in object and display on the screen.
Therefore, the best solution is to use hidden IFrame recommended by many people. I just modify and simplify it to meet my requirements.
The result of below code:
The concepts are:
- Create a normal form for submitting file content with "enctype='multipart/form-data'" , and its target attribute is the IFrame ==> when the form is submit only the IFrame is refreshed (user will not aware of it)
- Handle the IFrame load function, to generate the result on the Partial view
Step 1: I have a model class PostImageFile
Step 2: In the View
We have Form (file and button), Partial view, and the hidden IFrame.
And we have the script when the "SubmitImage" button is clicked:
- checked if use has select any file
- Submit the form ==> the action "AttachImage" (in the "Post" controller defined in the Form action) will executed
- The target of the form is the IFrame ==> after the "AttachImage" is executed, the IFrame will reload
- Thus, script in the $("#iFrameImage").load will run. It will invoke "RefreshImagePartialView" action in the "Post" controller
Step 3: The Partial View
"GetImage" is a action in "Post" controller to render image from byte array.
Step 4: Controller
Now, let take a look in the Post controller.
- AttachImage : get the HttpPostedFileBase from the form and it's converted to Byte Array and stored in the TempData.
- RefreshImagePartialView: is called when the IFram is reload in order to refresh the partial view. It get the list of images from TempData and return to the partial view.
- GetImage: is called in the partial view to render image from the byte array. I used the combination of PostDate and FileName as the key for retrieving the byte array.
