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 (fineuploader.com) and I want to implement it in an angular2/Typescript project, but i didn't found any example — amin89
– amin89, Commented Dec 15, 2016 at 9:11
You can read and 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
– Ray Nicholus, Commented Dec 15, 2016 at 13:09

Chaitanya · Accepted Answer · 2017-05-19 10:18:58Z

2

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/

answered May 19, 2017 at 10:18

Chaitanya

1,6302 gold badges16 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sahil Purav Over a year ago

Everything works well till Step Three but at Step Four we cannot add templates given by fine-uploader. It uses <script type="text/template"> tag and further angular strips that tag from COMPONENT_NAME.component.html

anshuVersatile · Accepted Answer · 2016-12-15 09:18:07Z

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, 2016 at 9:18

anshuVersatile

2,0761 gold badge11 silver badges18 bronze badges

2 Comments

amin89 Over a year ago

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 Over a year ago

I cannot find the module simply because no ts file is found into FineUploader folder ... Is fine-uploader works with typescript?

amin89 · Accepted Answer · 2016-12-15 10:42:02Z

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, 2016 at 10:42

amin89

4371 gold badge8 silver badges31 bronze badges

5 Comments

anshuVersatile Over a year ago

ts of fineUploader is aveilable at raw.githubusercontent.com/FineUploader/fine-uploader/…

amin89 Over a year ago

Do u know if it's an official release? ty

anshuVersatile Over a year ago

no & no need cause it is definition file you can write your own.

amin89 Over a year ago

I've tried to import it into my typscript file but module cannot find ... how can I import this .d.ts file?

amin89 Over a year ago

thank you. I'm using "declare var qq:any" and manage my object like Fine-Uplaoder say to do in their docs

indreed · Accepted Answer · 2017-12-07 17:52:13Z

0

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.

edited Dec 7, 2017 at 17:52

answered Dec 7, 2017 at 17:10

indreed

1,25513 silver badges11 bronze badges

Collectives™ on Stack Overflow

Use FineUploader with Typescript (Angular2 project)

4 Answers 4

1 Comment

2 Comments

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related