locked
how to show percent of progress using form tag helper RRS feed

  • Question

  • User-1045082127 posted

    hi

    I want to show <g class="gr_ gr_18 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar only-ins replaceWithoutSep" id="18" data-gr-id="18">percent</g> of progress beside form  tag helpers:

    <form asp-action="Index" asp-controller="Home" enctype="multipart/form-data" data-ajax="true" data-ajax-begin="upload" data-ajax-method="post" >
        <div class="progress">
            <div class="progress-bar progress-bar-striped progress-bar-animated bg-info" role="progressbar" style="width:0%">
                0
            </div>
        </div>
        <input type="file" name="files" id="files" />
        <button type="submit">submit</button>
    </form>
    var upload = function () {
                xhr: function() {
                    var request = new XMLHttpRequest()
                    request.addEventListener("progress", function updateProgress(oEvent) {
                        if (oEvent.lengthComputable) {
                            var loaded = Math.round((oEvent.loaded / oEvent.total) * 100);
                            $('.progress-bar').progressbar("value", loaded);
                        }
                    });
                }
            }

    but <g class="gr_ gr_107 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling" id="107" data-gr-id="107"><g class="gr_ gr_307 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar only-ins replaceWithoutSep" id="307" data-gr-id="307">abow</g></g> approach <g class="gr_ gr_173 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling multiReplace" id="173" data-gr-id="173">wont</g> work at all. how can I do that ?

    Monday, October 21, 2019 7:44 PM

All replies

  • User711641945 posted

    Hi aminsoraya,

    Could you please share more details?Here is a simple working demo like below:

    1.View(Create.cshtml):

    <style>
    .progressbar {
      width:300px;
      height:21px;
    }
    .progressbarlabel {
      width:300px;
      height:21px;
      ;
      text-align:center;
      font-size:small;
    }
    </style>
    <form method="post" enctype="multipart/form-data">
        <input type="file" id="files" name="files" style="visibility:hidden;height:0px;width:0px;" onchange="upload_files();" />
        <input type="button" id="select_and_upload_button" value="Upload.." />
    </form>
    <div id="progressbar" class="progressbar">
        <div id="progresslabel" class="progressbarlabel"></div>
    </div>
    <div id="divUploaded_Results" style="display: flex;flex-flow:wrap;"></div>
    @section Scripts{
        <link rel="stylesheet" href="//code.jquery.com/ui/1.8.24/themes/base/jquery-ui.css">
        <script src="//code.jquery.com/jquery-1.8.2.js"></script>
        <script src="//code.jquery.com/ui/1.8.24/jquery-ui.js"></script>
        <script>
                $("#select_and_upload_button").click(function () { $("#files").click(); });
                function upload_files() {
                    var fileUpload = $("#files").get(0);
                    var files = fileUpload.files;
                    if (files.length == 0) return;
                    for (var i = 0; i < files.length; i++) {
                        var data = new FormData();
                        data.append(files[i].name, files[i]);
                        console.log(data);
                        $.ajax({
                            type: "POST",
                            url: "/Users/Createdata",
                            xhr: function () {
                                var xhr = new window.XMLHttpRequest();
                                //Upload progress
                                xhr.upload.addEventListener("progress", function (evt) {
                                    if (evt.lengthComputable) {
                                        var percentComplete = evt.loaded / evt.total;
                                        $("#progressbar").progressbar({ value: percentComplete* 100 });
                                    }
                                }, false);
                                xhr.addEventListener("progress", function (evt) {
                                    if (evt.lengthComputable) {
                                        var percentComplete = evt.loaded / evt.total;
                                    }
                                }, false);
                                $("#progressbar").progressbar({
                                          max: 100,
                                          change: function (evt, ui) {
                                            $("#progresslabel").text($("#progressbar").progressbar("value") + "%");
                                          }
                                        });
                                return xhr;
                            },
                            contentType: false,  
                            processData: false,  
                            data: data,   
                            success: function (data) {
                                console.log(data);
                                $.each(data, function (index, item) {
                                    var sItem = "<div ><img src='/file/" + item + "' style='width:150px;'></div>";
                                    $("#divUploaded_Results").append(sItem);
                                })
                            },
                            error: function () {
                                alert("There was error uploading files!");
                            }
                        });
                    }
                }
            </script>
    }

    2.Controller:

    [HttpGet]
    public IActionResult Create()
    {
        return View();
    }
    [HttpPost]
    public async Task<IActionResult> Createdata()
    {
        long uploaded_size = 0;
        string path_for_Uploaded_Files = System.IO.Path.Combine(_env.WebRootPath, "file");//be sure create a folder named wwwroot/file
        var uploaded_files = Request.Form.Files;
        int iCounter = 0;
        string sFiles_uploaded = "";
        List<string> list_Files = new List<string>();
        foreach (var uploaded_file in uploaded_files)
        {
            iCounter++;
            uploaded_size += uploaded_file.Length;
            sFiles_uploaded += "\n" + uploaded_file.FileName;
            list_Files.Add(uploaded_file.FileName);
            //< Filename >
            string uploaded_Filename = uploaded_file.FileName;
            string new_Filename_on_Server = path_for_Uploaded_Files + "\\" + uploaded_Filename;
            using (FileStream stream = new FileStream(new_Filename_on_Server, FileMode.Create))
            {
                await uploaded_file.CopyToAsync(stream);
            }
        }
        return Json(list_Files);
    }

    Best Regards,

    Rena

    Tuesday, October 22, 2019 3:28 AM
  • User-1045082127 posted

    tnx for reply . but it has a long way . I would to use jquery only for showing process progress and the main code is in the form tag helper . I thought it should better

    Tuesday, October 22, 2019 3:10 PM
  • User711641945 posted

    Hi aminsoraya,

    The code in your action you could design by yourself,I just give a working demo to share how to show pervent of progress.

    From your requirement,just move the process bar to form tag helper in my previous post.It also works.

    <form method="post" enctype="multipart/form-data">
        <input type="file" id="files" name="files" style="visibility:hidden;height:0px;width:0px;" onchange="upload_files();" />
        <input type="button" id="select_and_upload_button" value="Upload.." />
        <div id="progressbar" class="progressbar">
            <div id="progresslabel" class="progressbarlabel"></div>
        </div>
        <div id="divUploaded_Results" style="display: flex;flex-flow:wrap;"></div>
    </form>

    Result:

    Best Regards,

    Rena

    Thursday, October 24, 2019 5:53 AM
  • User-1045082127 posted

    It wont work

    Sunday, October 27, 2019 6:39 AM
  • User711641945 posted

    Hi aminsoraya,

    Could you share your simple demo that could reproduce your issue?It would be helpful to resolve your issue.

    Best Regards,

    Rena

    Monday, October 28, 2019 5:49 AM