Uploading files in an angular view can sometimes be tricky, especially when using templates. The code snippet below shows how to upload multiple and single files using Angular File Upload library.
Multiple
<input type="file" name="file" nv-file-select="" uploader="uploader" multiple /><br/>
Single
<input type="file" name="file" nv-file-select="" uploader="uploader" />
Make sure to set up the controller correctly with the necessary dependencies as shown below:
UploadController.$inject = ['$scope', 'FileUploader'];
/**
* @namespace UploadController
*/
function UploadController($scope, FileUploader) {
$scope.uploader = new FileUploader();
$scope.uploader.url = 'api/v1/data/import/'
$scope.uploader.method = 'PUT'
};
On the server side, you need to handle the file upload request properly within the View class. However, there might be issues with parsing the request data as indicated by an empty Dict:
class FileUploadView(views.APIView):
parser_classes = (FileUploadParser,)
def put(self, request, format=None):
file_obj = request.FILES['file']
# ...
# do some staff with uploaded file
# ...
return Response(status=204)
If you encounter errors like 'MultiValueDictKeyError: "'file'", it's likely that the FileUploadParser is not handling the request data correctly. You may need to troubleshoot why the request is not being parsed as expected. Look into any parse exceptions within the parser and ensure that the request sent over the wire is formatted correctly.