Meteor UI working but nothing is uploaded #307

New Issue

2016-07-14T09:45:48Z

muscaiu commented

2016-07-14 09:45:48 +00:00

(Migrated from github.com)

I'm using Angular2 with Meteor and i imported by using meteor npm install ng2-file-upload --save
The UI works and looks just like Demo, i get no errors in the console and the Network tab seems to be uploading something. The progress bar is also not moving.

I just want the files in my /uploads folder, and i have no api listening in the back end or anything.
I have set const URL = 'http://localhost:3000/upload' , and i'm not sure this is supposed to work.

Should i have some kind of api server listening for file uploads too? If so where can i find a tutorial for this?

Here is a pic with the Network tab:

I'm using Angular2 with Meteor and i imported by using `meteor npm install ng2-file-upload --save` The UI works and looks just like Demo, i get no errors in the console and the Network tab seems to be uploading something. The progress bar is also not moving. I just want the files in my /uploads folder, and i have no api listening in the back end or anything. I have set `const URL = 'http://localhost:3000/upload'` , and i'm not sure this is supposed to work. Should i have some kind of api server listening for file uploads too? If so where can i find a tutorial for this? Here is a pic with the Network tab: ![2016-07-14_12h39_47](https://cloud.githubusercontent.com/assets/11426309/16835274/9ad2f50a-49c0-11e6-8fb7-57e7df15fb9d.png)

t246246 commented

2016-07-14 10:06:38 +00:00

(Migrated from github.com)

You need backend api. Example is located at demo/components/file-upload/file-catcher.js. (But it seems old. See https://github.com/valor-software/ng2-file-upload/issues/295.) For non-moving-progress bar, it's a bug. See https://github.com/valor-software/ng2-file-upload/issues/238.

You need backend api. Example is located at [demo/components/file-upload/file-catcher.js](https://github.com/valor-software/ng2-file-upload/blob/aee69d8b80f9e88b22af6da5841352307bc2b42e/demo/components/file-upload/file-catcher.js). (But it seems old. See https://github.com/valor-software/ng2-file-upload/issues/295.) For non-moving-progress bar, it's a bug. See https://github.com/valor-software/ng2-file-upload/issues/238.

👍 1 😕 1

janus-reith commented

2016-07-14 14:04:42 +00:00

(Migrated from github.com)

Closed my issue, as this is essentialy the same thing.
I tried both the file-catcher demo from this git which worked after some fiddling, and your version in #295.

The server crashes and throws an exception: listen EADDRINUSE
const url is set to http://localhost:3000/api
I belive this is related to meteor and the following part of the code:

var PORT = process.env.PORT || 3000;

app.listen(PORT, function() {
    console.log('Working on port ' + PORT);
});

The console log shows the 'Working on port' line once before crashing,
with (appareantly) random ports in the 2XXXX-Range.

Closed my issue, as this is essentialy the same thing. I tried both the file-catcher demo from this git which worked after some fiddling, and your version in #295. The server crashes and throws an exception: listen EADDRINUSE const url is set to `http://localhost:3000/api` I belive this is related to meteor and the following part of the code: ``` var PORT = process.env.PORT || 3000; app.listen(PORT, function() { console.log('Working on port ' + PORT); }); ``` The console log shows the 'Working on port' line once before crashing, with (appareantly) random ports in the 2XXXX-Range.

muscaiu commented

2016-07-14 18:35:15 +00:00

(Migrated from github.com)

@t246246 I have no idea how to implement that. Is there any other Upload button for Angular2 that works without this much trouble?

t246246 commented

2016-07-14 22:19:54 +00:00

(Migrated from github.com)

@janus-reith
EADDRINUSE means that - if your angular is listening on port 3000, you cannot use port 3000 for this service. (You can check whether ng2-file-upload is working or not with this express+multer demo service by listening port at other than 3000. I know your goal is to implement the same kind of logic within meteor.)

@muscaiu
There is another UI button, at least primeng is planning in next version. However all is same as long as it's a UI component. The role of upload button is sending file content to the server usually in multipart/form-data format. You have to implement server-side whatever server you are using.

After checking angular-meteor document, they are using angular2-file-drop and Meteor UploadFS. It is also just a client side, but I think it is worth reading the document as it explains how to use it in angular-meteor.

@janus-reith EADDRINUSE means that - if your angular is listening on port 3000, you cannot use port 3000 for this service. (You can check whether ng2-file-upload is working or not with this express+multer demo service by listening port at other than 3000. I know your goal is to implement the same kind of logic within meteor.) @muscaiu There is another UI button, at least [primeng](http://www.primefaces.org/primeng/) is [planning](http://blog.primefaces.org/?p=3978) in next version. However all is same as long as it's a UI component. The role of upload button is sending file content to the server usually in multipart/form-data format. You have to implement server-side whatever server you are using. After checking angular-meteor [document,](http://www.angular-meteor.com/tutorials/socially/angular2/handling-files-with-collectionfs) they are using [angular2-file-drop](https://github.com/jellyjs/angular2-file-drop) and [Meteor UploadFS](https://github.com/jalik/jalik-ufs). It is also just a client side, but I think it is worth reading the document as it explains how to use it in angular-meteor.

muscaiu commented

2016-07-19 07:09:30 +00:00

(Migrated from github.com)

@t246246 for weeks i'm trying to implement ngprime in Angular2 CLI and by this day i haven't been able to do it. I tried creating new project, i tried without the CLI ... and it's imposibru. I will try again today, but my hopes are really low.

eric-burel commented

2016-07-19 12:47:01 +00:00

(Migrated from github.com)

This package is meant for REST API architecture. The Meteor way would be to store the file in the client local database (using UploadFS and GridFS). Then Meteor take care of the synchronization with its DDP protocol.
It also implies that computing the upload time might not be easy with Meteor, since the UI is optimistic : from the user point of view, uploading feels like the file is immediately on the server, while the real work is hidden to him.

Conclusion, I'll stick to the tutorial :)

This package is meant for REST API architecture. The Meteor way would be to store the file in the client local database (using UploadFS and GridFS). Then Meteor take care of the synchronization with its DDP protocol. It also implies that computing the upload time might not be easy with Meteor, since the UI is optimistic : from the user point of view, uploading _feels like_ the file is immediately on the server, while the real work is hidden to him. Conclusion, I'll stick to [the tutorial](http://www.angular-meteor.com/tutorials/socially/angular2/handling-files-with-collectionfs) :)

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: dc/ng2-file-upload#307