File upload control with multiple attribute duplicates image

Question

I am having a strange issue with HTML5 file upload control with `multiple` attribute. I have no clue about how to fix it. I am trying to explain the problem below:

 

When uploading multiple images on the server, the images are uploading but some of them are getting duplicated, not by name, but by image itself.

 

Means if I select say 10 images, I can see 10 images are uploaded with different names (names are generated dynamically) but say 4 images are exactly the same. Means, 6 out of 10 selected images uploaded perfectly, but 4 original images got disappeared completely! But these 4 images are using contents from 6 images uploaded correctly.

 

Moreover, this is happening in random. There is no order or sequence from what I can understand what will disappear and what will re-uploaded with a different name.

 

In short:

1. Selected 10 different images for upload
2. Number of images uploaded is 10
3. 6 images (say) uploaded with correct content
4. 4 images (say) uploaded with correct file name, but content is wrong. They are using contents of 6 images and original content of these images simply disappeared.
5. This is happening when I am selecting more than 5 images for upload. Anything less than 6 has no problem.

Now when I test the same code at local development environment this is not happening at all! I checked folder permission on the server and there is no restriction imposed.

 

I am not sure whether I could explain the issue correctly because it is really a typical one and I never encountered similar thing before !!

 

Markup:

<div class="row gapp-10 medium">
<div class="col-md-9">
Upload Photos <span class="small-font gray-text">(Optional)</span> <span class="small-font red-text">(Combined upload size can't exceed 10mb.)</span>
<%:Html.TextBoxFor(model => model.VehicleImages, new {@type="file", @id="fUpload", @multiple="multiple", @class="btn btn-clc-theme-orange"}) %>
</div>
<div class="clearfix"></div>
</div>

Controller Action method:

[Authorize]
[HttpPost]
public ActionResult Upload(VehicleViewModel model)
{
   if (ModelState.IsValid)
   {
      _service = new VehicleService();
      model.SellerId = CommonMethods.LoggedInUser.SellerId;
      var newVehicle = _service.Save(model);
      newVehicleId = newVehicle.VehilceId;
      for (var i = 0; i < Request.Files.Count; i++)
      {
         var fl = Request.Files[i];
         if (fl == null || fl.ContentLength <= 0) continue;
         var filename = System.IO.Path.GetFileName(fl.FileName.Trim());
         if (string.IsNullOrEmpty(filename)) continue;

         var fileExtension = System.IO.Path.GetExtension(filename);
         var newFileName = String.Concat(DateTime.Now.Ticks.ToString(CultureInfo.InvariantCulture), fileExtension);
         System.IO.Directory.CreateDirectory(Server.MapPath("~/VehiclePhoto/" + newVehicleId));
         var photoPath = System.IO.Path.Combine(Server.MapPath("~/VehiclePhoto/" + newVehicleId + "/"), newFileName);

         fl.SaveAs(photoPath);
      }
   }

   return RedirectToAction("VehicleUploaded");
}

This is how the upload control is placed inside the form element and the method is being called. Nothing fancy, just the simple and classical way.

<% using(Html.BeginForm("Upload", "VehicleUpload", FormMethod.Post, new {enctype = "multipart/form-data"}))
   { %>
   ...
   <div class="row gapp-10 medium">
      <div class="col-md-9">
         Upload Photos <span class="small-font gray-text">(Optional)</span>
         <span class="small-font red-text">(Combined upload size can't exceed 10mb.)</span>
         <%:Html.TextBoxFor(model => model.VehicleImages, new {@type="file", @id="fUpload", @multiple="multiple", @class="btn btn-clc-theme-orange"}) %>
      </div>
      <div class="clearfix"></div>
   </div>
   ...
<input type="submit" value="Upload Vehicle" class="btn btn-primary" />
<% } %>

I am completely clueless. Any help or suggestion would be highly appreciated.

 

Thank you!