Kendo UI Angular Upload File to Backend as Node.JS

Hary

I am using Kendo Upload Control to upload files to Node.js backend which used GridFS multer.

Angular

<kendo-upload 
  [saveField]="file"
  [withCredentials]="false"
  [saveUrl]="uploadUrl"
  (autoUpload)="false"
  [multiple]="false"
  (select)="selectProfilePic($event)"></kendo-upload>

But the node.js API doesn't pick up the request. I am using [saveField]="file" to pass the uploaded file and the node.js below.

var storage = new GridFsStorage({
    //url: mongoose.connection.client.s.url,
    //options: options,
    db: mongoose.connection,
    file: (req, file) => {
      return new Promise((resolve, reject) => {
        myCrypto.randomBytes(16, (err, buf) => {
          if (err) {
            return reject(err);
          }
          const filename = buf.toString('hex') + path.extname(file.originalname);
          const fileInfo = {
            filename: filename,
            bucketName: 'uploads'
          };
          resolve(fileInfo);
        });
      });
    }
  });



const upload = multer({ storage });
router.post('/upload', upload.single('file'), fileUpload);

module.exports = router;

function fileUpload(req, res) {

 console.log("fileUpload")
  try {
    res.send({ file: req.file })
  }
  catch(err){

    console.log(err);
    res.send(err)
  }
}

Logs

2019-07-21T19:34:33.679205+00:00 app[web.1]: File Controller 2019-07-21T19:34:33.680436+00:00 app[web.1]: {} 2019-07-21T19:34:33.983631+00:00 app[web.1]: MulterError: Unexpected field 2019-07-21T19:34:33.983647+00:00 app[web.1]: at wrappedFileFilter (/app/node_modules/multer/index.js:40:19) 2019-07-21T19:34:33.983649+00:00 app[web.1]: at Busboy. (/app/node_modules/multer/lib/make-middleware.js:114:7) 2019-07-21T19:34:33.983650+00:00 app[web.1]: at Busboy.emit (events.js:198:13) 2019-07-21T19:34:33.983670+00:00 app[web.1]: at Busboy.emit (/app/node_modules/busboy/lib/main.js:38:33) 2019-07-21T19:34:33.983671+00:00 app[web.1]: at PartStream. (/app/node_modules/busboy/lib/types/multipart.js:213:13) 2019-07-21T19:34:33.983673+00:00 app[web.1]: at PartStream.emit (events.js:198:13) 2019-07-21T19:34:33.983674+00:00 app[web.1]: at HeaderParser. (/app/node_modules/dicer/lib/Dicer.js:51:16) 2019-07-21T19:34:33.983675+00:00 app[web.1]: at HeaderParser.emit (events.js:198:13) 2019-07-21T19:34:33.983677+00:00 app[web.1]: at HeaderParser._finish (/app/node_modules/dicer/lib/HeaderParser.js:68:8) 2019-07-21T19:34:33.983678+00:00 app[web.1]: at SBMH. (/app/node_modules/dicer/lib/HeaderParser.js:40:12) 2019-07-21T19:34:33.983679+00:00 app[web.1]: at SBMH.emit (events.js:198:13) 2019-07-21T19:34:33.983680+00:00 app[web.1]: at SBMH._sbmh_feed (/app/node_modules/streamsearch/lib/sbmh.js:159:14) 2019-07-21T19:34:33.983682+00:00 app[web.1]: at SBMH.push (/app/node_modules/streamsearch/lib/sbmh.js:56:14) 2019-07-21T19:34:33.983683+00:00 app[web.1]: at HeaderParser.push (/app/node_modules/dicer/lib/HeaderParser.js:46:19) 2019-07-21T19:34:33.983685+00:00 app[web.1]: at Dicer._oninfo (/app/node_modules/dicer/lib/Dicer.js:197:25) 2019-07-21T19:34:33.983686+00:00 app[web.1]: at SBMH. (/app/node_modules/dicer/lib/Dicer.js:127:10) 2019-07-21T19:34:33.989908+00:00 heroku[router]: at=info method=POST path="/v1/file/upload" host=herokuapp.com request_id=aa1010df-d244-46bc-9b36-f8e437d5ad2a fwd="80.233.46.84" dyno=web.1 connect=0ms service=312ms status=500 bytes=286 protocol=https

GProst

Is there any chance you had to set the field name to some file variable? So, I believe you expected [saveField]="file" to set field name to 'file' string but instead it searches for some this.filevariable which is undefined so you got field name set to the default 'files' value?

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

Kendo UI Angular Upload File to Backend as Node.JS

分類Dev

Angular JS File upload Content Disposition

分類Dev

Node.js upload file into Buffer instead of /tmp

分類Dev

node.js file upload typeError Can not read property 'image'

分類Dev

Angular File Upload

分類Dev

Hide the header row of Kendo-ui in angular

分類Dev

Nginx redirect to Node.js backend

分類Dev

react js handling file upload

分類Dev

Sails js Error in file Upload

分類Dev

Kendo-Angular-UIおよびKendo-Angular-Developのサポート

分類Dev

Downloading excel file on the frontend using excel4node in the backend

分類Dev

Save FormData with File Upload in Angular 5

分類Dev

Upload JSON file using Angular 6

分類Dev

Kendo UI File Upload Controlを使用してファイルをアップロードするにはどうすればよいですか?

分類Dev

Kendo UI Core vs Kendo UI Web

分類Dev

Upload multiple file with vue js and axios

分類Dev

Error reading a file with Node js

分類Dev

Kendo UI Grid hierarchy

分類Dev

Customizing Grid of Kendo UI

分類Dev

Kendo UI MVCグリッドで、各行にKendo Uploadを追加するにはどうすればよいですか?

分類Dev

Node.js/Mongodb/GridFS resize images on upload

分類Dev

node js Get Zip From a URL and upload to Google drive

分類Dev

Cloudinary Upload 'overwrite' option not working on Node.js

分類Dev

Kendo UI Angular:(SystemJS)予期しないトークン<

分類Dev

Kendo UI for Angular: Can't bind to 'primary' since it isn't a known property of 'button'

分類Dev

Kendo UI for Angular: Can't bind to 'primary' since it isn't a known property of 'button'

分類Dev

Kendo UI for Angular Datepicker Localization doesn't work when module is loaded via ngIf

分類Dev

kendo-ui-angular2の「DateTimePicker」が見つかりませんか?

分類Dev

Kendo-ui-angular2 grid selectable = "true"が機能しない

Related 関連記事

  1. 1

    Kendo UI Angular Upload File to Backend as Node.JS

  2. 2

    Angular JS File upload Content Disposition

  3. 3

    Node.js upload file into Buffer instead of /tmp

  4. 4

    node.js file upload typeError Can not read property 'image'

  5. 5

    Angular File Upload

  6. 6

    Hide the header row of Kendo-ui in angular

  7. 7

    Nginx redirect to Node.js backend

  8. 8

    react js handling file upload

  9. 9

    Sails js Error in file Upload

  10. 10

    Kendo-Angular-UIおよびKendo-Angular-Developのサポート

  11. 11

    Downloading excel file on the frontend using excel4node in the backend

  12. 12

    Save FormData with File Upload in Angular 5

  13. 13

    Upload JSON file using Angular 6

  14. 14

    Kendo UI File Upload Controlを使用してファイルをアップロードするにはどうすればよいですか?

  15. 15

    Kendo UI Core vs Kendo UI Web

  16. 16

    Upload multiple file with vue js and axios

  17. 17

    Error reading a file with Node js

  18. 18

    Kendo UI Grid hierarchy

  19. 19

    Customizing Grid of Kendo UI

  20. 20

    Kendo UI MVCグリッドで、各行にKendo Uploadを追加するにはどうすればよいですか?

  21. 21

    Node.js/Mongodb/GridFS resize images on upload

  22. 22

    node js Get Zip From a URL and upload to Google drive

  23. 23

    Cloudinary Upload 'overwrite' option not working on Node.js

  24. 24

    Kendo UI Angular:(SystemJS)予期しないトークン<

  25. 25

    Kendo UI for Angular: Can't bind to 'primary' since it isn't a known property of 'button'

  26. 26

    Kendo UI for Angular: Can't bind to 'primary' since it isn't a known property of 'button'

  27. 27

    Kendo UI for Angular Datepicker Localization doesn't work when module is loaded via ngIf

  28. 28

    kendo-ui-angular2の「DateTimePicker」が見つかりませんか?

  29. 29

    Kendo-ui-angular2 grid selectable = "true"が機能しない

ホットタグ

アーカイブ