Tuesday, August 20, 2013

Dynamic rows with multiple file uploads in ASP.Net MVC

Scenario / Requirement

There is a dynamic grid with plus (+) button to add new rows. Each row has around 3 normal text columns and one column to upload file.

Solutions

Single post back

  • Render your model which is list / collection type using simple table layout
  • Make sure there is at least one item in the collection. That can be the empty item.
  • Use javascript / jQuery to clone a table row and append at the end.
  • Rename the id and name of the elements in new row to match the naming convention.
  • Use a submit button to post back the rows. You will get added rows in the model list.
For the above we had used the tutorial given in the below link. Thanks to Zorgo for the tutorial.

Now the multiple file upload part comes. To tackle that follow the below method.
  • Have one file input type in the rows which are rendered. Use the naming as follows
    • <input type="file" id='Skills_0__File' name='Skills_0__File' />
      
  • In the postback action method iterate through the Request.Files collection and get the streams
  • If the Request.Files[i].ContentLength = 0 avoid that file because the user had not selected file.

Pros

  • Easy to implement.

Cons

Anyway I had modified the sample I got from the above link and uploaded. It can be downloaded from my sky drive by clicking on the below icon.

Multiple post back

This approach works as follows
  • There will be 1 post back for each file and one posting for the entities.If there are 8 records, there will be separate 8 post backs for files and one posting for the entities.
  • Each file will be posted separately. It returns the file id ie an reference to the server side where its saved. (If its saved in SQL Server or other database the primary key)
  • Associate that id to the row to be saved using jQuery / javascript
  • Post back the rows (entities) and when its saved in the server side, the row can be linked to the uploaded file. (If its in database use the foreign key relation)
  • Need to use iFrame to do posting of file input.

Pros

  • Data size limitation in http post back is resolved.

Cons

  • There are chances that the file upload succeeds and the subsequent record saving didn't success. This will result in orphan files which needs to be cleared as maintenance task.

Chunking

This involves separate reading mechanism or ActiveX controls to send files in chunks. This is useful if you need to transfer really big files. After completing each file the server side id needs to be updated to the new records and save after all file uploads.

We are planning to go with the second approach because we are not sure about the size of the files we need to upload. If the size of the expected files is small we can go with the first approach. So decide yourselves based on your scenario.

No comments: