I am developing a MEAN stack web application and I want to upload file using ng2-file-upload. This is my Angular 2 code.
classroom.component.html
<input type="file" class="form-control" name="single" ng2FileSelect [uploader]="uploader" />
<button type="button" class="btn btn-success btn-s"
(click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length">
<span class="glyphicon glyphicon-upload"></span> Upload all
</button><br />
classroom.component.ts
uploader:FileUploader = new FileUploader({url: "http://localhost:3000/api/material/create-material"});
In server.js
app.use(cors());
app.use('/api',api);
app.use('/api/material',material);
and in material.js
var storage = multer.diskStorage({ //multers disk storage settings
destination: function (req, file, cb) {
cb(null, './uploads/');
},
filename: function (req, file, cb) {
var datetimestamp = Date.now();
cb(null, file.fieldname + '-' + datetimestamp + '.' + file.originalname.split('.')[file.originalname.split('.').length -1]);
}
});
var upload = multer({ //multer settings
storage: storage
}).single('file');
router.post('/create-material',passport.authenticate('jwt', {session: false}),function (req, res) {
upload(req,res,function(err){
console.log(req.file);
if(err){
res.json({error_code:1,err_desc:err});
return;
}
//res.json({error_code:0,err_desc:null});
});
});
When uploading a file I get following error
XMLHttpRequest cannot load http://localhost:3000/api/material/create-material. Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://localhost:4200' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
What is the reason for this?
via chamathabeysinghe
No comments:
Post a Comment