Использование файла ввода Dropify в компоненте Angular 4

Question

Я хочу использовать компонент Dropify в своем проекте Angular 4. Тем не менее, все, что я получаю после применения .dropify класс для моего input является вводом файла по умолчанию с помощью кнопки "Выбрать файл" и метки имени файла. Как я могу показать ввод файла перетаскивания Dropify?

В соответствии с требованиями Dropify, я включил JQuery и скрипт, таблицу стилей и шрифт Dropify в их соответствующие местоположения:

• jquery.min.js включен в .angular-cli.json"s apps.scripts массив
• dropify.min.js включен в .angular-cli.json"s apps.scripts массив
• dropify.css включен в .angular-cli.json"s apps.styles массив
• Шрифт Roboto (необходим для Dropify) @importЭд в src/styles.css

src/app/app.component.html:

...
<div style="padding-bottom: 1.25em;">
  <input type="file" id="input" class="dropify" data-allowed-file-extensions="csv" formControlName="studentList" required>
</div>
...

src/app/app.component.ts:

import {Component, OnInit} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';

declare var $: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  ...
  ngOnInit() {
    ...
    const dragAndDrop = $('.dropify').dropify({
      messages: {
        'default': 'Drag and drop a CSV file here or click'
      }
    });
    ...
  }
  ...
}

src/styles.css:

@import "~@angular/material/prebuilt-themes/indigo-pink.css";
@import "~http://fonts.googleapis.com/css?family=Roboto:400,300,700,900|Roboto+Condensed:400,300,700";

.angular-cli.json:

{
  ...
  "apps": {
    ...
    "styles": [
      "styles.css",
      "../node_modules/dropify/dist/css/dropify.css"
    ],
    "scripts": [
      "../node_modules/jquery/dist/jquery.min.js",
      "../node_modules/dropify/dist/js/dropify.min.js"
    ],
    ...
  }
  ...
}

Answer 1

Без какой-либо ошибки невозможно дать вам какое-либо решение. Но я привожу здесь пример использования. Это может помочь вам.

1. npm install dropify --save

2. Добавьте файлы.js и.css в файл.angular-cli.json или индексный файл.

3. Элемент ввода HTML <input type="file" (change)="imageChanged($event)" class="dropify" accept=".png, .jpg, .jpeg" data-allowed-file-extensions="jpg png jpeg" data-max-file-size="300K">

4. в файле.ts declare var $: any;

5. ngOnInit() { $('.dropify').dropify({}); }

И это все.

Answer 2

У меня была похожая проблема с JQuery в Angular 4, я решил ее, добавив еще одно объявление в app.component.ts:

declare var jquery:any;Надеюсь, что это работает!