0

Hey so I am busy with a ReactJS & Django project, I would love to upload videos on this app that I am doing, so I tried two different methods and all did not work I do not know where my implementation is wrong.

Method1: Here I used the fetch to make a POST request to the URL http://127.0.0.1:8000/api/upload-lecture/

  • With this method, I had an onChange event listener so to change the state of the video property then, right away put every captured content from form to the FormData the make POST request

Code Below:

    uploadVideo = (e) => {

        e.preventDefault();
        console.log(this.state);
        let form_data = new FormData();
        form_data.append('lecturer', this.state.lecturer);
        form_data.append('module', this.state.module);
        form_data.append('video', this.state.video);
        form_data.append('date', this.state.date);
        let url = 'http://127.0.0.1:8000/api/upload-lecture/';
        
        fetch(url, {
            method: 'POST',
            body: form_data
      
        }).then(response => console.log(response)).catch(error => console.log(error))

      };
    }

So after running method1 I checked the API logs and this is what I found

[*] Error: {'video': [ErrorDetail(string='The submitted data was not a file. Check the encoding type on the form.', code='invalid')]}

So I then attempted using another method, that is first using the JavaScript FileReader before I change the state of my video

Code Below: This is the second way in which I tried to handle the video upload

    handleVideo = (e) => {
        let files = e.target.files;
        let video = [];

        console.log(files);
        let reader = new FileReader();
        reader.onload = r => {
            video.push(r.target.result);
            console.log("Done!!!!!!!!!");
        };
        reader.readAsDataURL(files[0]);
        this.setState({
            video:video
        })
    }

then after the code below, I used the same code that I initially had to POST data but now first I used FileReader on the video.

After all that when I tried to make a POST request I went to check the API logs and this is what I got:

Request body exceeded settings.DATA_UPLOAD_MAX_MEMORY_SIZE.
Bad Request: /api/upload-lecture/
[17/Aug/2020 04:56:44] "POST /api/upload-lecture/ HTTP/1.1" 400 128016

Then from here, I reached a dead-end not knowing what am I really missing to perform this task

  • what is the file size of the video you are trying to upload? – 95faf8e76605e973 Aug 17 '20 at 05:01
  • Okay so that is something I managed to fix byt going to ```settings.py``` and change MAX UPLOAD STORAGE but now I am getting the following error –  Aug 17 '20 at 09:38
  • ```{"video":["The submitted data was not a file. Check the encoding type on the form.``` –  Aug 17 '20 at 09:38
  • Now this error is the one that I got from Method1 only initially but now I get from both method1 and 2 –  Aug 17 '20 at 09:39
  • [This](https://stackoverflow.com/questions/28036404/django-rest-framework-upload-image-the-submitted-data-was-not-a-file) might help – 95faf8e76605e973 Aug 17 '20 at 10:00

0 Answers0