Use FineUploader with Typescript (Angular2 project)

Question

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 {

}

I'm using FineUploader (http://fineuploader.com/) and I want to implement it in an angular2/Typescript project, but i didn't found any example — amin89, Dec 15 '16 at 09:11
You can read and https://github.com/FineUploader/fine-uploader/pull/1689 for updates on the effort to create and bundle a TS definition file with a released version of Fine Uploader. — Ray Nicholus, Dec 15 '16 at 13:09

score 2 · Answer 1 · answered May 19 '17 at 10:18

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/

Everything works well till **Step Three** but at **Step Four** we cannot add templates given by fine-uploader. It uses ` — Sahil Purav, Jun 01 '17 at 10:49

score 0 · Answer 2 · answered Dec 15 '16 at 09:18

0

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

answered Dec 15 '16 at 09:18

anshuVersatile

2,030
1
11
18

That's what I've done import { FineUploader } from 'fineUploader'; but it cannot find the module ! I've installed FineUploader via npm install fineuploader, and with gulpfile I put the library in my /lib folder to use it. Is there something else I need to do? – amin89 Dec 15 '16 at 09:24
I cannot find the module simply because no ts file is found into FineUploader folder ... Is fine-uploader works with typescript? – amin89 Dec 15 '16 at 10:09

score 0 · Accepted Answer · answered Dec 15 '16 at 10:42

0

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.

answered Dec 15 '16 at 10:42

amin89

558
1
8
26

ts of fineUploader is aveilable at https://raw.githubusercontent.com/FineUploader/fine-uploader/8d4c621ffc147d6c91fbcd68ba94482b94665078/typescript/fine-uploader.d.ts – anshuVersatile Dec 15 '16 at 12:07
Do u know if it's an official release? ty – amin89 Dec 15 '16 at 12:27
no & `no need` cause it is definition file you can write your own. – anshuVersatile Dec 15 '16 at 12:30
I've tried to import it into my typscript file but module cannot find ... how can I import this .d.ts file? – amin89 Dec 15 '16 at 12:49
thank you. I'm using "declare var qq:any" and manage my object like Fine-Uplaoder say to do in their docs – amin89 Dec 16 '16 at 19:55

indreed · Answer 4 · 2017-12-07T17:52:13.423

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.

Use FineUploader with Typescript (Angular2 project)

4 Answers4

Linked