Argthtjtr

I am new to Apostrophe and trying to create a contact us form with file attachment in Apostrophe by following the tutorial.
https://apostrophecms.org/docs/tutorials/intermediate/forms.html

I have also created the attachment field in my index.js and it works fine from the admin panel.

Now, I am trying to create my own html for the form with file submission.

// in lib/modules/contact-form-widgets/public/js/always.js

apos.define('contact-form-widgets', {



    extend: 'apostrophe-widgets',



    construct: function(self, options) {



      self.play = function($widget, data, options) {



        var $form = $widget.find('[data-contact-form]');

        var schema = self.options.submitSchema;

        var piece = _.cloneDeep(self.options.piece);



        return apos.schemas.populate($form, self.schema, self.piece, function(err) {

          if (err) {

            alert('A problem occurred setting up the contact form.');

            return;

          }

          enableSubmit();

        });



        function enableSubmit() {

          $form.on('submit', function() {

            submit();

           //I can access file here

            // console.log($form.find('file'))



            return false;

          });

        }



        function submit() {

          return async.series([

             convert,

            submitToServer

          ], function(err) {

            if (err) {

              alert('Something was not right. Please review your submission.');

            } else {

              // Replace the form with its formerly hidden thank you message

              $form.replaceWith($form.find('[data-thank-you]'));

            }

          });

          function convert(callback) {

            return apos.schemas.convert($form, schema, piece, callback);

          }

          function submitToServer(callback) {







            return self.api('submit', piece, function(data) {



                alert("I AM AT SUBMIT API ")

              if (data.status === 'ok') {

                // All is well

                return callback(null);

              }

              // API-level error

              return callback('error');

            }, function(err) {

              // Transport-level error

                alert("I AM HERE AT API ERROR")



              return callback(err);

            });

          }

        }

      };

    }

  });







    //and my widget.html is



    <div class="form-group">

        <input name="custom-file" type="file">

      </div>

When I run this I get following errors

user.js:310 Uncaught TypeError: Cannot read property 'serialize' of undefined

    at Object.self.getArea (user.js:310)

    at Object.self.getSingleton (user.js:303)

    at Object.convert (user.js:686)

    at user.js:164

    at async.js:181

    at iterate (async.js:262)

    at async.js:274

    at async.js:44

    at setImmediate.js:27

    at runIfPresent (setImmediate.js:46)

My question is, how do I handle file submission? Is there any better approach for this?

This is much easier to do using the apostrophe-pieces-submit-widgets module, which allows you to define a schema for what the user can submit. You can include a field of type attachment in that, and this is demonstrated in the README.