Files not upload to folder #813

New Issue

2017-05-24T17:24:18Z

Hanzofm commented

2017-05-24 17:24:18 +00:00

(Migrated from github.com)

Hi, 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

Hi, 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

👍 1

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: dc/ng2-file-upload#813