Order of calling methods

Question

I'm trying to implment a file upload feature for users where they can upload multiple files at once. I'm using dropzone.js on the client side and C# in the back end. I'm using MVC razor views and I have view where the user inputs their details and upload files within the same page. So I've gone ahead and created the following methods

[HttpPost]
    public async Task<ActionResult> UploadedFile(int? id)
    {
        foreach (string fileName in Request.Files)
        {
            HttpPostedFileBase file = Request.Files[fileName];
            if (file != null && file.ContentLength > 0)
            {
                //upload file here
                //file gets uploaded successfully 
            }
        }
        return new EmptyResult();
    }

I also need to store model details into the DB which are done in another method as follows

public async Task<ActionResult> SaveToDb(MyViewModel viewModel)
    {
        if (ModelState.IsValid)
        {
            //Store to db here

            int? id = viewModel.User.UserId;

            //redirect to home page if everything is ok
        }
        return View(viewModel);
    }

Now my question is I need to run the SaveToDb before UploadedFile method because I want to pass the int? id as a param because I use it at the end of the file name. I really can't seem to figure out how to go about this. My client jQuery looks like this:

<script>
    Dropzone.autoDiscover = false;
    var myDropZone = new Dropzone("#dZUpload",{
        url: "/Home/UploadedFile",
        autoProcessQueue: false
    });
    $("#submit-all").on('click', function () {
        myDropZone.options.autoProcessQueue = true;
        myDropZone.processQueue();
    });
    myDropZone.on("addedfile", function (file) {
        var removeButton = Dropzone.createElement("<button class='btn btn-danger'>Remove File</button>");
        var dLink = myDropZone;
        // Listen to the click event
        removeButton.addEventListener("click", function (e) {
            // Make sure the button click doesn't submit the form:
            e.preventDefault();
            e.stopPropagation();

            // Remove the file preview.
            dLink.removeFile(file);
        });
        // Add the button to the file preview element.
        file.previewElement.appendChild(removeButton);
    });
</script>

Note: #submit-all button also submits the entire form

score 1 · Accepted Answer · answered Apr 19 '16 at 11:12

1

You dont need to define a different method for uploading, it can e done in same post action like this :

<form action="~/Home/SaveDropzoneJsUploadedFiles" class="dropzone" id="dropzoneJsForm"></form>

<button id="submit-all">Submit All Files</button>

</div>

@section scripts {
<script type="text/javascript">

    Dropzone.options.dropzoneJsForm = {

        //prevents Dropzone from uploading dropped files immediately
        autoProcessQueue: false,

        init: function () {
            var submitButton = document.querySelector("#submit-all");
            var myDropzone = this; //closure

            submitButton.addEventListener("click", function () {

                //tell Dropzone to process all queued files
                myDropzone.processQueue(); 
            });

        }
    };

</script>

}

Now on "SaveDropzoneJsUploadedFiles" action method first handle your db saving code then upload files.. this action method can also take Model parameter

answered Apr 19 '16 at 11:12

Varun Vasishtha

461
2
9

I've tried this before and if I upload more than one file I get internal server error :/ – Izzy Apr 19 '16 at 11:28
Please give me stacktrace of tat error so maybe I can help you – Varun Vasishtha Apr 19 '16 at 12:07
I've gone with your approach but I'm running into some problems.. And I've posted another question explaining this which can be viewed **[here](http://stackoverflow.com/questions/36745296/onclick-storing-same-value-multiple-times)** – Izzy Apr 20 '16 at 13:30
You are still defining url in dropzone js code, why can't you define it like I explained.. and maybe when you process the queue it get hits the create action 3 times when there are 3 files so you have to change your js and just use my version of js and it will be good. – Varun Vasishtha Apr 20 '16 at 13:47
Just tried your suggestion and it's exactly the same issue – Izzy Apr 20 '16 at 13:58

Order of calling methods

1 Answers1