I am trying to perform a file upload. I am using Angularjs as front-end and Django as backend. I am able to upload a file successfully as shown in my logs. However, when the file data is passed to Django, I don't know why the form is not valid. This is my error message:
There's a mistake in field 'file': <ul class="errorlist"><li>This field is required.</li></ul>
My JSON message:
<JsonResponse status_code=200, "application/json">
Request Payload: content-disposition
html:
<body ng-app="myApp" ng-controller="appCtrl">
<input type="file" id="file" name="files" accept="text/*"
data-url="file" class="inputfile_upload" select-ng-files
ng-model="uploadedFile"/>
<label for="file"> <span id="chooseFile"></span>Upload a file!</label>
<button id="submitBtn" type="submit" ng-click="upload()">Upload</button>
</body>
controller.js:
var app = angular.module('myApp', [])
app.controller('appCtrl', function ($scope, $rootScope, $http, fileUploadService){
$scope.upload = function() {
var file = $scope.uploadedFile;
console.log('file is ' );
console.dir(file);
var uploadUrl = "/uploaded_file";
fileUploadService.uploadFileToUrl(file, uploadUrl);
};
}
service.js:
app.factory('fileUploadService', function ($rootScope, $http) {
var service = {};
service.uploadFileToUrl = function upload(file, uploadUrl){
var fd = new FormData();
fd.append('file', file);
$http.post(uploadUrl, fd, {
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
}).then(function successCallback(response){
console.log("Files added");
}, function errorCallback(response){
console.log("Files not successfully added");
})
}
return service;
});
directives.js:
app.directive("selectNgFiles", function($parse) {
return {
require: "ngModel",
link: function postLink(scope,elem,attrs,ngModel) {
elem.on("change", function(e) {
var files = elem[0].files;
ngModel.$setViewValue(files);
})
}
}
});
views.py:
@csrf_exempt
def uploadFile(request):
try:
if request.method == 'POST':
# When files are submitted to the server, the file data ends up placed in request.FILES.
form = UploadFileForm(request.POST, request.FILES)
for error_field in form.errors:
print("There's a mistake in field '{field}': {problem}".format(
field=error_field,
problem=form.errors[error_field]
))
if form.is_valid():
# file is saved
form.save()
data = request.FILES['file'].read();
print(data);
messages.success(request, 'File uploaded successfully!', extra_tags='alert')
return JsonResponse({"status": "success", "message": "Success"})
else:
print(JsonResponse({"status": "error", "message": form.errors}))
return JsonResponse({"status": "error", "message": form.errors})
else:
form = UploadFileForm()
return render(request, uploadFile(), {'form': form})
except Exception as e:
return JsonResponse({"error": str(e)}, status=500)
Model.py:
class UploadFile(models.Model):
file = models.FileField(null=True)
def __unicode__(self):
return self.file
form.py
class UploadFileForm(ModelForm):
class Meta:
model = UploadFile
fields = '__all__'
