Upload file Vue 3 and Django REST

Question

I dont get if i work with request correctly, after upload all files is 1 KB and i cant open them. How to create correct file? If i save file as .doc i can see:

 ------WebKitFormBoundaryt3UjlK5SVq8hgppA
Content-Disposition: form-data; name="file"

[object FileList]
------WebKitFormBoundaryt3UjlK5SVq8hgppA--

So my functions to submit in js file:

async submitFiles() {

            let formData = new FormData();
            formData.append('file', this.file);
            console.log(this.file)

            axios.put(`/api/v1/myapp/upload/${this.file[0].name}`,
                formData,
                {
                    headers: {
                        'Content-Disposition': 'attachment',
                        'X-CSRFToken': await this.getCsrfToken(),
                    },

                }
            ).then(function () {
                console.log('SUCCESS!!');
            })
            .catch(function () {
                console.log('FAILURE!!');
            });

        },

To handle change of file in form

        fileChanged(file) {
            this.file = file.target.files
        },

And finally my view.py

class FileUploadView(APIView):
    parser_classes = [FileUploadParser]

    def put(self, request, filename, format=None):

        file_obj = request.data['file']

        handle_uploaded_file(file_obj)
        return Response({'received data': request.data})

Where

def handle_uploaded_file(f):
    with open('path/to/my/folder/' + str(f.name), 'wb+') as destination:
        for chunk in f.chunks():
            destination.write(chunk)

szatkus · Accepted Answer · 2021-02-09 13:02:43Z

1

[object FileList]

Oh, you serialized the whole FileList.

Change to: formData.append('file', this.file[0]);

If this won't work you may need to read the file's content.

Edit: it should be enough, according to MDN:

The field's value. This can be a USVString or Blob (including subclasses such as File). If none of these are specified the value is converted to a string.

answered Feb 9, 2021 at 13:02

szatkus

1,3958 silver badges17 bronze badges

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

2 Comments

APlusPeace Over a year ago

thanks, now it's decode error, but i can see the data. utf-8' codec can't decode byte 0x80 in position 42: invalid start byte

APlusPeace Over a year ago

where is no much problem with .txt file, because i can see

------WebKitFormBoundarygfCrlrL8otI2oR98 Content-Disposition: form-data; name="file"; filename="try.txt" Content-Type: text/plain  If i can see it, it's working! ------WebKitFormBoundarygfCrlrL8otI2oR98--

Collectives™ on Stack Overflow

Upload file Vue 3 and Django REST

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