formly-js / angular-formly

JavaScript powered forms for AngularJS
http://docs.angular-formly.com
MIT License
2.22k stars 405 forks source link

formly with dropzone.js, req.files is undefined. #607

Closed rishighan closed 8 years ago

rishighan commented 8 years ago

I am reposting this issue that I opened on dropzone's github as well.

I am using dropzone with angular-formly, straight from this example page: http://angular-formly.com/#/example/integrations/dropzone-js

// My form model
$scope.postFormModel = {
            attachedFile: []
        };

I made very slight changes to the dropzone config, specifically to the addedFile handler:

// dropzone config
        $scope.dropzoneConfig = {
            'options': {
                url: '/db/createpost',
                maxFileSize: 100,
                paramName: 'uploadedFile',
                maxThumbnailFilesize: 5,
                autoProcessQueue: false,
                maxFiles: 5,
                uploadMultiple: true,
                parallelUploads: 5
            },
            'eventHandlers': {
                'sending': function(file, xhr, formData) {
                    console.log("Sending" + file);
                },
                'success': function(file, response) {console.log(file);},
                'maxfilesexceeded': function(file) {
                    this.removeFile(file);
                },
                'addedfile': function(file) {
                    $scope.postFormModel.attachedFile.push({"filename":file.name, "filesize": file.size});
                    $scope.$digest();
                }
            }
        };

My formly markup. I do not have a formly field for the dropzone element.

<formly-form model = "postFormModel" fields = "postFormFields" class="admin">
  <div dropzone="dropzoneConfig" class="margin20 well clearfix">
    <div>
      <h5>Drag and drop files here or click to upload</h5>
    </div>
  </div>

  <div class="margin20">
    <button class="btn btn-primary" ng-click="createPost()">Save Post</button>
  </div>
</formly-form>

On the server side, I am using multer for handling multipart/form-data.

// pasting the relevant bits

var path = require('path');
var express = require('express');
var fs = require('fs');
var multer = require('multer');
var bodyParser = require('body-parser');

app.use(bodyParser.json()); // for parsing application/json
app.use(bodyParser.urlencoded({ extended: true })); // for parsing application/x-www-form-urlencoded

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});

var upload = multer({dest: __dirname + '/assets/images'});

// Create a new post
app.post('/db/createpost', function(req, res, next) {

console.log(req.files) // <----undefined
   postModel.create({
    title: req.body.postTitle,
    tags: req.body.tags,
    date_created: new Date(),
    date_updated: new Date(),
    attachment: req.body.attachedFile,
    is_draft: false,
    content: req.body.content,
    excerpt: req.body.excerpt,
    citation: req.body.citations,
   }, function(err, post){
    if(err){
        res.send(err);
    }

});

});

I must be missing something or doing something wrong. Or this could be a bug with dropzone itself.

kentcdodds commented 8 years ago

Thanks for your interest in angular-formly. The best way to get help is by following the instructions at help.angular-formly.com. The GitHub issues on this project are reserved for feature requests and bug reports, so I'm going to close this issue. See you on chat and Stack Overflow!