I'm trying to implement this library to upload images to a folder server:
When I click on "upload" button the server returns:
ImageUpload:uploaded: FileItem {url: "http://127.0.0.1:5000/api/uploadPhoto", headers: Array(0), withCredentials: false, formData: Array(0), isReady: false…}alias: "file"file: FileLikeObjectformData: Array(0)headers: Array(0)index: undefinedisCancel: falseisError: falseisReady: falseisSuccess: trueisUploaded: trueisUploading: falsemethod: "POST"options: ObjectautoUpload: falsedisableMultipart: falsefilters: Array(1)isHTML5: trueitemAlias: "file"removeAfterUpload: falseurl: "http://127.0.0.1:5000/api/uploadPhoto"__proto__: Objectprogress: 100some: Fileuploader: FileUploaderurl: "http://127.0.0.1:5000/api/uploadPhoto"withCredentials: false_file: File_xhr: XMLHttpRequest__proto__: Object 200 "uploaded"
But the file is not present on server. What would be doing wrong?
this is my backend:
var express = require("express"),
app = express()
multer = require("multer")
.....
app.use(function (req, res, next) {
res.header("Access-Control-Allow-Methods", "POST, PUT, OPTIONS, DELETE, GET");
res.header('Access-Control-Allow-Origin', 'http://localhost:3000');
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
res.header("Access-Control-Allow-Credentials", true);
next();
});
var upload = multer({dest: "./uploads/"}).single('file');
router.post("/uploadPhoto",function (req, res) {
upload(req, res, function (err) {
if (err) {
console.log(err.toString())
return res.status(422).json("an Error occured")
}
console.log("done")
return res.status(200).json("uploaded")
})
}
);
This is my Frontend
fileUpload.ts
import { FileUploader } from 'ng2-file-upload';
...
public uploader:FileUploader;
constructor() {
this.uploader = new FileUploader({url: this.URL + "uploadPhoto", itemAlias: 'file'});
this.uploader.onBeforeUploadItem = (item) => {
item.withCredentials = false;
}
this.uploader.onCompleteItem = (item:any, response:any, status:any, headers:any) => {
console.log("ImageUpload:uploaded:", item, status, response);
};
}
fileUpload.html
....
<input name="file" type="file" ng2FileSelect [uploader]="uploader"/>
<button type="button" class="btn btn-success btn-xs"
(click)="item.upload()" [disabled]="item.isReady || item.isUploading || item.isSuccess">
<span class="glyphicon glyphicon-upload"></span> upload
</button>
.....
My versions:
Angular: 4.1.3 ng2-file-Upload: 1.2.1
via Hanzo
No comments:
Post a Comment