Copy file to server using angular

I can't believe it's that hard. If you are using nodejs and standard html, I can transfer the file by doing:


<form id       =  "uploadForm"
     enctype   =  "multipart/form-data"
     action    =  "/api/photo"
     method    =  "post"
<input type="file" name="userPhoto" />
<input type="text" placeholder="keywords" name="keywords" />
<input type="submit" value="Upload Image" name="submit">


and on server.js

var express=require("express");
var multer  = require('multer');
var app=express();
var done=false;

app.use(express.static(__dirname + '/')); 

/*Configure the multer.*/
app.use(multer({ dest: './uploads/',
 rename: function (fieldname, filename) {
onFileUploadStart: function (file) {
  console.log(file.originalname + ' is starting ...')
onFileUploadComplete: function (file) {
  console.log(file.fieldname + ' uploaded to  ' + file.path)

/*Handling routes.*/
    res.end("File uploaded.");

/*Run the server.*/
    console.log("Working on port 3000");


This way, any uploaded image is copied to the uploads folder. Now I want to use angular for various reasons. As it turns out, I need a directive. Why, I don't understand (but that 's another question ). Since I am using multer, I need data of type "multipart / form-data". This is my index.html:

</<!DOCTYPE html>
<script src="//"></script>

<body ng-app="formExample">
<div ng-controller="ExampleController">

    <form ng-submit="examplePost()" role="form" >
        <input type="file" bind-file="" ng-model="file" />
        <input type="text" ng-model="keywords" placeholder="keywords"/>
        <input type="submit" ng-onclick="submit" value="Upload Image" >


  angular.module('formExample', [])
    .controller('ExampleController', ['$scope', '$http', function($scope,$http) {
        $scope.master = {};

        $scope.examplePost = function() {

            method: 'POST',
            url: '/upload-file',
            headers: {
                'Content-Type': 'multipart/form-data'
            data: {
                upload: $scope.file
            transformRequest: function (data, headersGetter) {
                var formData = new FormData();
                angular.forEach(data, function (value, key) {
                    formData.append(key, value);

                return formData;
        .success(function (data) {

        .error(function (data, status) {



    .directive('bindFile', [function () {
        return {
            require: "ngModel",
            restrict: 'A',
            link: function ($scope, el, attrs, ngModel) {
                el.bind('change', function (event) {

                $scope.$watch(function () {
                    return ngModel.$viewValue;
                }, function (value) {
                    if (!value) {



and I get a lovely 500 response: Error: Multipart: Border not found. Now I don't want to use external modules. I could, but actually I have to write a lot of code and send a lot of files plus some data, so I want to fully understand what is going on before choosing an external module (or writing it).

How to solve the error "Border not found" and what does it mean?


source to share

1 answer

As for the "border", wikipedia pretty much explains it:

A multi-user MIME message contains a border in the "Content-Type:" header; this border, which should not occur in any of the parts, is located between the parts, as well as at the beginning and end of the body of the message, as follows:

MIME-Version: 1.0
Content-Type: multipart/mixed; boundary=frontier

This is a message with multiple parts in MIME format.
Content-Type: text/plain

This is the body of the message.
Content-Type: application/octet-stream
Content-Transfer-Encoding: base64





All Articles