Upload using angular-file-model and rest_framework

Question

Got error

The submitted data was not a file. Check the encoding type on the form.

My code looks like follow:

Model:

class Document(models.Model):
    name = models.CharField(max_length=100, verbose_name=_('Name'))
    date = models.DateField(verbose_name=_('Date'))
    project = models.ForeignKey(Project, verbose_name=_('Project'), related_name='projects')
    type = models.CharField(max_length=50, verbose_name=_('Document Type'))
    docfile = models.FileField(upload_to='documents/%Y/%m/%d', blank=True, verbose_name=_('Document'))

    def __unicode__(self):
        return self.name

My code for serializer:

class DocumentSaveSerializer(serializers.ModelSerializer):
    date = serializers.DateField()

    class Meta:
        model = Document
        fields = ('name', 'date', 'project', 'type', 'docfile')

My views:

class DocumentViewSet(WithNestedSerializerMixin, viewsets.ModelViewSet):
    serializer_class = DocumentSerializer
    queryset = Document.objects.all()

    get_object_serializer_class = DocumentSerializer
    post_serializer_class = DocumentSaveSerializer
    put_serializer_class = DocumentPutSerializer

    parser_classes = (FileUploadParser,)

    def post(self, request, *args, **kwargs):
        docfile = request.FILES['docfile']

And some code from frontend:

Directive: cmsApp.directive(
    'contracts',
    [
        'ContractService',
        '$rootScope',
        function (ContractService, $rootScope) {
            return {
                restrict: 'A',
                scope: {
                    contract: '=',
                    projectId: '=',
                    typeId: '=',
                    docFile: '='
                },
                templateUrl: 'main/templates/contract.html',
                link: function (scope, element, attrs) {
                scope.newContract = function(){
                    scope.contract.document.project = scope.projectId;
                    scope.contract.document.type = scope.typeId;
                    scope.contract.document.docfile = scope.docFile;
                    ContractService.createContract(scope.contract)
                    scope.contract.document = {};
                };
                }
            }
        }
    ]
)

And finally HTML:

<input type="file" file-model="docfile">

<span ng-if="DocumentName == 'Contract'" contracts contract="Contract" project-id="ProjectID" type-id="DocumentName" doc-file="docfile"></span>

Dont have any ideas what is wrong with this code. Anny suggestions? File is loaded properly. I test it with showing name, size etc. But when i try to POST i've got an error I mentioned at the benning.

Thanks for help

did you add enctype='multipart/form-data' in your form tag? — levi
– levi, Commented Mar 17, 2015 at 16:01

levi · Accepted Answer · 2015-03-17 16:04:48Z

1

If you are submitting your file via form, you need to add enctype='multipart/form-data' to your <form> tag

Otherwise, if you are using $http angular service, you need add this header.

headers: {'Content-Type': 'multipart/form-data'}

It should looks like this:

$http({
   method: 'POST',
   url: '/your_post/url',
   data: data_with_your_file// your original form data,
   headers: {'Content-Type': 'multipart/form-data'}
}).

BUT

I highly recommend using angular-file-upload.js to upload files in angular. Is very clean, I use it with DRF too.

answered Mar 17, 2015 at 16:04

levi

22.8k7 gold badges79 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

bMh Over a year ago

got something like this: return $http({ method: 'POST', url: url, data: {contract: newContract.document.docfile}, // your original form data, headers: {'Content-Type': 'multipart/form-data'} }) But now I have error 500

levi Over a year ago

@bMh 500 error, is server error, check your server logs.

Collectives™ on Stack Overflow

Upload using angular-file-model and rest_framework

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related