0

I'm trying to get the ImageUrl attribute from Uppy but can't bind it to input asp-for="ImageUrl" type="file" name="file" class="form-control" id="ImageUrl". When I click on create button,my ImageUrl shows up null in controller method even though I selected a file via Uppy. How can I bind ImageUrl to Uppy and add the file to the folder I created (/tree/test file) ?

<head>
    <meta charset="utf-8">
    <meta name="viewport">
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
    <link href="https://releases.transloadit.com/uppy/v3.1.1/uppy.min.css" rel="stylesheet">

    <script src="https://releases.transloadit.com/uppy/v2.12.3/uppy.min.js" type="module"></script>
    <script src="https://releases.transloadit.com/uppy/v2.12.3/uppy.legacy.min.js"  type="nomodule"></script>
    <script src="https://releases.transloadit.com/uppy/locales/v2.1.1/ru_RU.min.js"></script>
</head>
<body>
   
     <form method="post" asp-action="create" id="form2" enctype="multipart/form-data">
    <div class="form-group">
            <label asp-for="ImageUrl">@localizer.GetLocalizedHtmlString("ImageUrl")</label>
            <div id="drag-drop-area">

            <input asp-for="ImageUrl" type="file" name="file" class="form-control" id="ImageUrl"/>
            </div>
            </div>    
        </br>
        <button class="btn btn-primary" type="submit" style="visibility:visible">@localizer.GetLocalizedHtmlString("create")</button>
        <a asp-controller="Banner" asp-action="index" class="btn btn-danger">@localizer.GetLocalizedHtmlString("cancel")</a>

    </form>
    <script>
        window.addEventListener('DOMContentLoaded', function () {
            'use strict';

            var uppy = new Uppy.Core({
                debug: true,
                autoProceed: false,
               
                locale: Uppy.locales.ru_RU
            });

            uppy.use(Uppy.Dashboard, {
                inline: true,
                target: '#drag-drop-area',
                showProgressDetails: true,           
                height: 470,  
                browserBackButtonClose: false,
                hideUploadButton: false
            }).use(Uppy.XHRUpload, {
                endpoint: '/wwwroot/images/tree/test',
                formData: true,
                fieldName: 'files[]',
            });

            uppy.use(Uppy.Form, {
                target: 'form',
                resultName: 'ImageUrl',
                getMetaFromForm: true,
                addResultToForm: true,
                submitOnSuccess: true,
                triggerUploadOnSubmit: true,
            });

            window.uppy = uppy;
        });

    </script>
</body>

public async Task Create(Command command,IFormFile? file) {

            string wwwRootPath = _hostEnvironment.WebRootPath;
            if (file != null)
            {
                if (IsImage(file) == true)
                {
                    string fileName = Guid.NewGuid().ToString();
                    var uploads = Path.Combine(wwwRootPath, @"images\banner");
                    var extension = Path.GetExtension(file.FileName);

                    if (command.ImageUrl != null)
                    {
                        var oldImagePath = Path.Combine(wwwRootPath, command.ImageUrl.TrimStart('\\'));
                        if (System.IO.File.Exists(oldImagePath))
                        {
                            System.IO.File.Delete(oldImagePath);
                        }
                    }
                    using (var fileStreams = new FileStream(Path.Combine(uploads, fileName + extension), FileMode.Create))
                    {
                        file.CopyTo(fileStreams);
                    }
                    command.ImageUrl = @"\images\banner\" + fileName + extension;

                }
               
                return View();
            }
            
            var viewModel = await _mediator.Send(command);

        }
        return View();

    }

0 Answers0