Ndtyjky

I tried now in so many different ways, I can not get a file uploaded with Angular 7 to the Django Backend - shouldn't be so difficult?!

My .html:

<div class="form-group">

  <label for="file">Choose File</label>

  <input type="file"

         id="file"

         (change)="handleFileInput($event.target.files)">

</div>

uploader.component.ts

  fileToUpload: File = null;



  handleFileInput(files: FileList) {

    this.fileToUpload = files.item(0);

    this.uploadFileToActivity();

  }



  uploadFileToActivity() {

    this.uploaderService.post(this.fileToUpload).subscribe(data => {

      // do something, if upload success

      }, error => {

        console.log(error);

      });

  }

my uploader.service.ts that also shows the upload progress

public post( fileToUpload: File): Observable<number>{

    const url = '/api/upload/';



    var subject = new Subject<number>()

    const req = new HttpRequest('POST', url, fileToUpload, {

        reportProgress: true,

    });



    this.httpClient.request(req).subscribe(event => {

        if (event.type === HttpEventType.UploadProgress) {

            const percentDone = Math.round(100 * event.loaded / event.total);

            subject.next(percentDone);

          } else if (event instanceof HttpResponse) {

            subject.complete();

          }

    });

    return subject.asObservable();

  }

And in the Django backend:

views.py:

def post(request):

    if request.method == 'POST':

        form = UploadFileForm(request.POST, request.FILES)

        if form.is_valid():

            #handle_uploaded_file(request.FILES['file'])

            return HttpResponseRedirect('/success/url/')

    else:

        form = UploadFileForm()

    return render(request, 'index.html', {'form': form})

forms.py:

class UploadFileForm(forms.Form):

    title = forms.CharField(max_length=50)

    file = forms.FileField()

and urls.py:

urlpatterns = [

    path(r'api/upload/', views.post, name='post'),

]

When I ran this I get

zone.js:2969 POST http://127.0.0.1:8000/api/upload/ 403 (Forbidden)

Do I need to include an authorization token? If yes: how?

Thanks a lot!

EDIT: After the useful input from Martin Urbanec I inspected the file upload request in the Browser. Here the result:

Someone any idea what I need to change in my code above to make this work?

Content-Type header must be multipart/form-data to transfer any files. I recommend you to check if this header is sent to your Django backend.