I tried post FormData using "angular Js" and then using Directly post html to django api But It Will be failure , Anyone Tried it and Known It Please Tell me your answer it is the full code i tried out :
html:
<form action="http://localhost:55555/collaboratoradmin/test/upload_driver" method="post" enctype="multipart/form-data">
<input type="file" id="file" name="csv_file" accept=".csv"
onchange="angular.element(this).scope().getFileDetails(this)" />
<button type="submit" ng-click="uploadFiles()">upload</button>
Angular Js:
$scope.getFileDetails = function (e) {
$scope.files = [];
$scope.$apply(function () {
var file = e.files[0];
filename = '';
if ('name' in file)
filename = file.name;
else
filename = file.fileName;
});
};
$scope.uploadFiles = function () {
//FILL FormData WITH FILE DETAILS.
// ADD LISTENERS.
var objXhr = new XMLHttpRequest();
objXhr.addEventListener("progress", updateProgress, false);
objXhr.addEventListener("load", transferComplete, false);
// SEND FILE DETAILS TO THE API.
objXhr.open('POST', endpoint + '/collaboratoradmin/test/upload_driver', true);
var fd = new FormData();
fd.append("filename", filename);
fd.append("csv_file", file);
objXhr.send(fd);
}
// UPDATE PROGRESS BAR.
function updateProgress(e) {
if (e.lengthComputable) {
document.getElementById('pro').setAttribute('value', e.loaded);
document.getElementById('pro').setAttribute('max', e.total);
}
}
// CONFIRMATION.
function transferComplete(e) {
alert("Files uploaded successfully.");
}
Django api:
@api_view(['POST'])
def upload_driver(request):
if request.POST and request.FILES:
csvfile = request.FILES['csv_file']
dialect = csv.Sniffer().sniff(codecs.EncodedFile(csvfile, "utf-8").read(1024))
csvfile.open()
reader = csv.reader(codecs.EncodedFile(csvfile, "utf-8"), delimiter=',', dialect=dialect)
# Redirect to the document list after POST
return HttpResponseRedirect(reverse('myproject.myapp.views.list'))
print(list1)
