Как передать formData с помощью Dropzone в Angular? - PullRequest
Новая
       28

Как передать formData с помощью Dropzone в Angular?

0 голосов
/ 22 апреля 2020

Я использую dropzone для загрузки файла CSV. Часть загрузки работает и выполняет POST для URL-адреса в конфигурации.

Как передать дополнительный параметр, чтобы я мог получить к нему доступ в моем контроллере? В этом случае я хочу передать account_id контроллеру.

Вот HTML: 

<div class="vertical-container" fxLayout="column" fxLayoutAlign="stretch" fxFlex="50%">
          <form class="form-horizontal form-bordered">
            <div class="box-title">Dropzone</div>

            <select class="form-control input-sm mb-md" [(ngModel)]="account_id" name="account_id">
              <option *ngFor="let account of accounts" [ngValue]="account.id">{{account.name}}</option>
            </select>

            <div class="content-container" fxLayout="column" fxLayoutAlign="stretch" fxFlex="auto">
              <dropzone class="dropzone-container" [config]="config" [disabled]="disabled" fxLayout="row" fxLayoutAlign="start strech" fxFlex="auto" [message]="'Click or drag transaction file here to upload'" (init)="onUploadInit($event)" (error)="onUploadError($event)" (success)="onUploadSuccess($event)"></dropzone>
            </div>
          </form>
        </div>

Вот машинописный текст (функция onUploadSuccess): 

public onUploadSuccess(args: any): void {       
    console.log('onUploadSuccess:', args);    
  }

Вот контроллер в C#: 

public void Post(IFormFile file)
        {
            try
            {
                var request = HttpContext.Request.Form;

                var files = request.Files;

                if (file == null || file.Length == 0)
                {
                    return;
                }

                string filePath = Path.Combine("D:", "Projects", "Finance", "Uploads", files[0].FileName);

                using (var targetStream = System.IO.File.Create(filePath))
                {
                    files[0].CopyTo(targetStream);
                }

                //Need to get the account_id here!
            }
            catch (Exception ex)
            {
                //return new JsonResult(new { status = "500", error = "Internal Server Error", message = ex.Message })
                //{
                //    StatusCode = 500
                //};
            }
        }

Когда файл будет загружен, он запишет сообщение в консоль и нажмет URL в config. Как передать account_id, чтобы я мог получить к нему доступ в контроллере?

Ответы [ 2 ]

0 голосов
/ 23 апреля 2020

Я нашел решение.

HTML (добавлено событие отправки в dropzone): 

       <div class="vertical-container" fxLayout="column" fxLayoutAlign="stretch" fxFlex="50%">
          <form class="form-horizontal form-bordered">
            <div class="box-title">Dropzone</div>

            <select class="form-control input-sm mb-md" [(ngModel)]="account_id" name="account_id">
              <option *ngFor="let account of accounts" [ngValue]="account.id">{{account.name}}</option>
            </select>

            <div class="content-container" fxLayout="column" fxLayoutAlign="stretch" fxFlex="auto">
              <dropzone class="dropzone-container" [config]="config" [disabled]="disabled" fxLayout="row" fxLayoutAlign="start strech" fxFlex="auto" [message]="'Click or drag transaction file here to upload'" (init)="onUploadInit($event)" (error)="onUploadError($event)" (success)="onUploadSuccess($event)" (sending)="onSending($event)"></dropzone>
            </div>
          </form>
        </div>
      </div>

Машинопись: 

  public onSending(args: any): void {
    console.log('onSending', args);
    args[2].append("account_id", this.account_id);
  }

Сторона сервера ( C#): 

        [HttpPost]
        [Route("api/[controller]")]
        public void Post(IFormFile file) //can also add int account_id here
        {
            try
            {
                var request = HttpContext.Request.Form;

                int accountId;
                if (!string.IsNullOrEmpty(request["account_id"]))
                {
                    int.TryParse(request["account_id"], out accountId);
                }

                var files = request.Files;

                if (file == null || file.Length == 0)
                {
                    return;
                }

                string filePath = Path.Combine("D:", "Projects", "Finance", "Uploads", files[0].FileName);

                using (var targetStream = System.IO.File.Create(filePath))
                {
                    files[0].CopyTo(targetStream);
                }                
            }
            catch (Exception ex)
            {
               //catch the exception here
            }
        }

Вы можете получить account_id из request["account_id"]

ИЛИ

, в качестве параметра можно указать account_id. Как это: 

        [HttpPost]
        [Route("api/[controller]")]
        public void Post(int account_id, IFormFile file)
        {
            try
            {
              //account_id will be whatever is sent from client
            }
            catch()
            {
               //catch exception here
            }
        }
0 голосов
/ 22 апреля 2020

Если данные уста- новлены c или ранее существовали, и вы на 100% уверены в данных, то вы можете передать в config внутри таких параметров, как этот. 

public config: DropzoneConfigInterface = {
    url: '/upload',
    cancelReset: null,
    clickable: true,
    maxFiles: 1,
    autoReset: null,
    errorReset: null,
    params: {
      "account_id": 123
 }
}

но если вы получаете значение во время выполнения от пользователя и присваиваете его конфигурации, тогда оно будет неопределенным или всегда будет отправлять начальное значение, так как конфигурация инициализируется в компоненте init. Для передачи данных Dynami c вы можете использовать следующий метод. 

onSending($event) {
// here you can assign data to config.
   this.config.params = {account_id: this.account_id };
//Also you can send the account_id in url.
    this.config.url = this.baseUrl + `/${this.accountId || 0}/account`;

  }

и ниже приведен код для получения идентификатора учетной записи из URL на стороне API. 

  [HttpPost("{accountId}/account")]
    public async Task<IActionResult> Post(int accountId, IFormFile file)
    {
        return Ok();
    }
...