Use FineUploader with Typescript (Angular2 project)

问题

I'm facing a problem to use fineuploader library to my angular2 project. I Don't find a way to implement it without using fineuploader.js directly in the index html file. Is there an example of implementation for Typescript? Thank u

***Gulpfile***


    gulp.task('restore:fine-uploader', function () {
    gulp.src([
        'node_modules/fine-uploader/**/*.*'
    ]).pipe(gulp.dest(libs + 'fine-uploader'));
    });

    gulp.task('restore',
    [
    'restore:core-js',
    'restore:zone.js',
    'restore:reflect-metadata',
    'restore:systemjs',
    'restore:rxjs',
    'restore:angular-in-memory-web-api',
    'restore:angular',
    'restore:bootstrap',
    'restore:ng2-pagination',
    'restore:fine-uploader'
    ]);

***Systemjs.js***

    (function (global) {
    System.config({
        baseURL: "/",
        paths: {
            // paths serve as alias
            'npm:': './libs/'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            app: 'app',
            // angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic':
                'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
            // other libraries
            'rxjs': 'npm:rxjs',
            'ng2-pagination': 'npm:ng2-pagination',
            'fine-uploader': 'npm:fine-uploader',
            'angular-in-memory-web-api': 'npm:angular-in-memory-web-api'
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                main: './main.js',
                defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: 'js'
            },
            'angular-in-memory-web-api': {
                main: './index.js',
                defaultExtension: 'js'
            },
            fineUploader: {
                main: 'fine-uploader/fine-uploader.min',
                defaultExtension: 'js'
            },
}
    });
})(this);

****upload.component.ts****

import { Component } from '@angular/core';
import { FineUploader } from 'fineUploader';
@Component({
    selector: 'app-upload',
    templateUrl: './app/upload/upload.component.html'
})
export class UploadComponent {

}

回答1:

Using declare var qq:any; is not the right way of doing it. This is what I did to make it work:

Step Zero: Include the CSS and JS file in the angular-cli.json file.

"styles": [
    "../node_modules/fine-uploader/fine-uploader/fine-uploader-gallery.min.css"
],
"scripts": [
    "../node_modules/fine-uploader/fine-uploader/fine-uploader.min.js"
],

Step One: Add /// <reference types="fine-uploader" /> on top of your component file.

Step Two: Declare following variables:

uploader: FineUploader.qq;
uiOptions: FineUploader.UIOptions;
coreEvents: FineUploader.CoreEvents;

Step Three: Add UI options and initialise FineUploader in ngOnInit

this.uiOptions = {
    element: document.getElementById('qq-template'),
    template: "qq-template"
};
this.uploader = new qq.FineUploader(this.uiOptions);

Step Four: Add the template HTML in your COMPONENT_NAME.component.html file. You may find the HTML in node_modules/fine-uploader/fine-uploader/templates/

回答2:

add following in systemjs.config

'fineUploader': 'npm:fine-uploader'

and

fineUploader: {
    main: '/fine-uploader/fine-uploader.min',
    defaultExtension: 'js'
  },

in component add

import {FineUploader} from 'fineUploader';

for more you can add fine-uploader.d.ts find at https://raw.githubusercontent.com/FineUploader/fine-uploader/8d4c621ffc147d6c91fbcd68ba94482b94665078/typescript/fine-uploader.d.ts

回答3:

Ok I think I've understand. Fine-Uploader is a JS library with no Typescript files which we can use. WE CAN'T Import directly the library to our TS file. The solution is to declare a fine-uploader object like declare var qq:any; which we can use in our export class.

回答4:

Official solution can be found on Fine Uploader page.

You just need to install the Fine Uploader via npm and initialize in your typescript file like this (for UI mode and traditional endpoints):

import { FineUploader } from 'fine-uploader';

let uploader = new FineUploader({...})

Note that Fine Uploader template doesn't have to be in <script> tags in index.html file. Adding a template inside <div hidden> tag with a specific id in any component would be enough.

来源：https://stackoverflow.com/questions/41160048/use-fineuploader-with-typescript-angular2-project

标签

angular

typescript

fine-uploader