Onclick storing same value multiple times

Question

Consider the following code snippet

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<ActionResult> Create(MyViewModel viewModel)
{
        if (ModelState.IsValid)
        {
            //map properties here

            using (var context = new MyEntities())
            {
                context.Users.Add(user);
                context.SaveChanges();
            }

            if (Request.Files.Count > 0)
            {
                foreach (string fileName in Request.Files)
                {
                    HttpPostedFileBase file = Request.Files[fileName];
                    if (file != null && file.ContentLength > 0)
                    {
                       //do checks and upload file here
                    }
                }
            }
        }
        return RedirectToAction("Index", "Home");
}

The form can be submitted as a standalone or with files which then get uploaded to a server. Now my issue is If I submit the form without any files or just one file then everything works as expected. However users can upload more than one file at a time and that's where the problem comes in. The files get uploaded but I get more than one entry in the database for that particular form. For example if the user uploads three files I'll get three entries in the database exactly that same.

So my question is how do I get around this?

On the client side I'm using DropZoneJs and calling the method as

<script>
    Dropzone.autoDiscover = false;
    var myDropZone = new Dropzone("#dzUpload", {
        url: "/Home/Create",
        autoProcessQueue: false,
        previewsContainer: ".preview",
    });

    $("#submit-all").attr("type", "button").on('click', function (e) {
        e.preventDefault();
        e.stopPropagation();

        if (myDropZone.getQueuedFiles().length > 0) {
            myDropZone.options.autoProcessQueue = true;
            myDropZone.processQueue();
        }
        else {
            $("#dzUpload").submit();
        }
    });
</script>

I've also come across this question but I still have the same issue

Answer 1

It looks like the uploadMultiple option will change the behavior so only one request is sent to the server.

var myDropZone = new Dropzone("#dzUpload", {
    url: "/Home/Create",
    autoProcessQueue: false,
    previewsContainer: ".preview",
    uploadMultiple: true,
});

Answer 2

So if I am right the plugin will post the form for every file you drop into your plugin right?? One way is to generate aa GUID and maintain it in your form hidden input. So every time your plugin posts it will post this GUID as well. So change your insert statement into a upsert ( update or insert) based on the Guid.. You must save this GUID also along with your other data..

So every time you intend to insert check if the GUID already exist If so update it else insert new record.