Meteor UI working but nothing is uploaded

[muscaiu]

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:

[t246246]

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.

[janus-reith]

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]

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

[t246246]

@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.

[muscaiu]

@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]

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 :)