0

I have installed the Fine Uploader library using npm install and was trying to import the fine uploader as mentioned in the docs (http://docs.fineuploader.com/features/modules.html)

Like -

import {qq } from 'fine-uploader';

But it is giving error as can not find module. Is there any thing that needs to do to get this working?

Ray Nicholus
  • 19,538
  • 14
  • 59
  • 82
Shyam Shinde
  • 287
  • 1
  • 5
  • 14

2 Answers2

1

The code you posted does not appear anywhere in the documentation.

Your code assumes a named export of "qq" exists:

import {qq } from 'fine-uploader';

Fine Uploader does not declare any named exports, only a single default export. You may call it anything you want, though, to match the rest of the documentation, it makes sense to call it "qq".

As the documentation demonstrates, you must import Fine Uploader like this:

import qq from 'fine-uploader';
Ray Nicholus
  • 19,538
  • 14
  • 59
  • 82
  • Then you likely haven't installed Fine Uploader from npm, or you are using an old version. – Ray Nicholus Sep 22 '16 at 11:45
  • I installed that using npm and its version was 3.10.3. I have now upgraded that to 3.10.8 and installed Fine Uploader... still getting the same error – Shyam Shinde Sep 22 '16 at 13:18
  • That version is 3 years old, possibly even older. You'll need 5.8.0 or newer. – Ray Nicholus Sep 22 '16 at 14:02
  • I tried to upgrade npm using steps mentioned here (http://stackoverflow.com/questions/18412129/how-do-i-update-node-and-npm-on-windows) But it is showing me 3.10.8 as the latest version – Shyam Shinde Sep 22 '16 at 15:18
  • What version of Fine Uploader are you using? – Ray Nicholus Sep 22 '16 at 17:35
  • I am using 5.11.8 – Shyam Shinde Sep 23 '16 at 06:35
  • Sorry, I don't know what to tell you. Something in your environment is incorrect as importing the library works fine. – Ray Nicholus Sep 23 '16 at 11:37
  • Hello Ray... I somehow managed to resolved that thing...and fine uploading is working totally fine. The one issue that I am facing is with deleteFile option. The file is being deleted from the storage but its not sending request to server with UUID. Any thaughts? – Shyam Shinde Sep 28 '16 at 10:46
  • here is the console log `[Fine Uploader 5.11.8] Detected valid file button click event on file 'test.jpg', ID: 0. [Fine Uploader 5.11.8] Submitting GET SAS request for a DELETE REST request related to file ID 0. [Fine Uploader 5.11.8] Sending GET request for 0 [Fine Uploader 5.11.8] Submitting Delete Blob request for 0 [Fine Uploader 5.11.8] Sending DELETE request for 0 [Fine Uploader 5.11.8] Delete request for 'test.jpg' has succeeded.` – Shyam Shinde Sep 28 '16 at 10:53
  • Looks like it is sending the request to me. In fact it only removes the file from the UI after your server indicates success. – Ray Nicholus Sep 28 '16 at 11:47
  • but my server is not getting any request at all. – Shyam Shinde Sep 28 '16 at 11:57
  • Either you've specified the incorrect endpoint address, or something else on your server is preventing the request from being handled as expected – Ray Nicholus Sep 28 '16 at 12:02
  • all other requests are being sent correctly...and also when I hit my delete endpoint from Postman it does get called. I also tried by changing the method property of delete file to POST – Shyam Shinde Sep 28 '16 at 12:43
  • also qqparentsize, qqparentuuid, qquuid values are being sent null on upload sucess request – Shyam Shinde Sep 28 '16 at 12:47
  • There is some serious issue with your environment then. – Ray Nicholus Sep 28 '16 at 13:19
  • I am using Azure blob storage....will that make any difference for delete file feature? – Shyam Shinde Sep 28 '16 at 14:24
  • If you are using Fine Uploader Azure, the delete request is sent directly to Azure. We're getting far off topic here. If you have an unrelated question, please open up a new question in SO with code and details. – Ray Nicholus Sep 28 '16 at 15:04
  • @ShyamShinde Hey, how did you manage to import FineUploader? I tried `import { qq } from 'fine-uploader';` it's giving me `/node_modules/fine-uploader/typescript/fine-uploader.d.ts` is not a module. I'm using version 5.14.2. – Chaitanya May 18 '17 at 09:30
  • _import * as qq from 'fine-uploader/azure.fine-uploader/azure.fine-uploader';_ and also need to add few lines in _system.config.js_ file – Shyam Shinde May 26 '17 at 13:21
1

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/

Chaitanya
  • 1,440
  • 1
  • 14
  • 26