React から Axios で Django Rest API にファイルを送ってDBに入れる方法をご存知な方いらっしゃいますでしょうか

前提・実現したいこと

お世話になっております。初歩的なご質問かもしれず、大変恐縮ではございますが、ご質問させていただきます。

実現したいことは、
フロント側（React）から、ボタンをクリックしたときに、ファイル（例えばPDFファイルやワードファイルなど）のデータをAxiosで、バックエンドのDjangoに送り、DBに登録したい、というものです。

Djangoのデフォルト管理画面からは、ファイルデータの登録ができて、データベースに反映されていますので、フロント側から送る際に間違っている、と考えております。

React, Typescriptで書いております

発生している問題・エラーメッセージ

エラーメッセージ
以下のコードで実行すると、
POST 400 (Bad Request)が表示され、エラーの中身が以下でございます。
「Multipart form parse error - Invalid boundary in multipart: None」とエラー出ているようでございます。

data:
detail: "Multipart form parse error - Invalid boundary in multipart: None"
[[Prototype]]: Object
headers:
content-length: "77"
content-type: "application/json"
[[Prototype]]: Object
request: XMLHttpRequest
onabort: ƒ handleAbort()
onerror: ƒ handleError()
onload: null
onloadend: null
onloadstart: null
onprogress: null
onreadystatechange: ƒ handleLoad()
ontimeout: ƒ handleTimeout()
readyState: 4
response: "{\"detail\":\"Multipart form parse error - Invalid boundary in multipart: None\"}"
responseText: "{\"detail\":\"Multipart form parse error - Invalid boundary in multipart: None\"}"
responseType: ""
responseXML: null
status: 400
statusText: "Bad Request"
timeout: 0
upload: XMLHttpRequestUpload {onloadstart: null, onprogress: null, onabort: null, onerror: null, onload: null, …}
withCredentials: false
[[Prototype]]: XMLHttpRequest
status: 400
statusText: "Bad Request"

該当のソースコード

// フロント側、React Typescriptでございます。

export const fetchAsyncCreateFile = createAsyncThunk(
    "potentialDeal/createFile",
    async (uploadingfile: FILE) => {
　　　　　　　　　　　
　　　　　　　　　　　　　　　　console.log(uploadingfile)
        
        let formData = new FormData()
        formData.append('file', uploadingfile);

        const res = await axios.post<FILE>(
            `${process.env.REACT_APP_API_URL}/api/files/`,
            { 
                formData,   
            },
            {
                headers: {
                    // "Content-Type": "application/json", 
                    'Content-Type': 'multipart/form-data',
                    Authorization: `JWT ${localStorage.localJWT}`,
                }
            }
        )
        .then(response => {
            console.log(response)
        })
        .catch(error => {
            console.log(error.response)
        })
        // return res.data
    }
)

// formData.append　で渡しているデータ（console.log(uploadingfile)）は以下でございます。ワードファイルを渡した場合です

File {name: "wordfile.docx", lastModified: 1630541701576, lastModifiedDate: Thu Sep 02 2021 09:15:01 GMT+0900 (日本標準時), webkitRelativePath: "", size: 11969, …}
lastModified: 1630541701576
lastModifiedDate: Thu Sep 02 2021 09:15:01 GMT+0900 (日本標準時) {}
name: "wordfile.docx"
size: 11969
type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
webkitRelativePath: ""
[[Prototype]]: File


// 関係ないと思うのですが、バックエンド側のコードがこちらでございます
Django　views.py
class FileViewSet(viewsets.ModelViewSet):
    queryset = File.objects.all()
    serializer_class = FileSerializer

    # def perform_create(self, serializer):
    #     serializer.save(user_id=self.request.user)

Django　models.py
class File(models.Model):
    file = models.FileField(
        # blank=True,
        # null=True,
        upload_to=upload_file_path,
        verbose_name='関連ファイル'

    user_id = models.ForeignKey(
        settings.AUTH_USER_MODEL,
        related_name='files',
        on_delete=models.CASCADE,
        blank=True,
        null=True,
    )
    dealpotential_id = models.ForeignKey(
        DealPotential,
        related_name='files',
        on_delete=models.CASCADE,
        blank=True,
        null=True,
    )
    created_on = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        return self.file.url

Django serializers.py
class FileSerializer(serializers.ModelSerializer):
    created_on = serializers.DateTimeField(format="%Y-%m-%d %H:%M", read_only=True)
    class Meta:
        model = File
        fields = ('id', 'file', 'user_id', 'dealpotential_id', 'created_on')

Django /urls.py
(略)
router = routers.DefaultRouter()
router.register('files', FileViewSet)
(略)

試したこと

Content-typeが、"Content-Type": "application/json",　で実行している例も発見したため、こちらでも試していますが、ダメでした。
response: "{"file":["No file was submitted."]}"
responseText: "{"file":["No file was submitted."]}"
こちらの場合、このエラーが出ています。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答1件

ベストアンサー

ココだけ修正すればすべて問題なくなって、うまくいくかは分かりまへんけど、これやと明らかにダメな気がするゆうところがありまして、axiosでpostするとこ、formDataをくくってる { と } は不要ですわ。

diff
1const res = await axios.post<FILE>(
2            `${process.env.REACT_APP_API_URL}/api/files/`,
3-           { 
4                formData,   
5-           },
6            {
7                headers: {
8                    // "Content-Type": "application/json", 
9                    'Content-Type': 'multipart/form-data',
10                    Authorization: `JWT ${localStorage.localJWT}`,
11                }
12            }
13        )

投稿2021/09/03 04:40

退会済みユーザー

総合スコア0

mehul2021

2021/09/03 23:46

suwmn50799さん、お世話になっております。いつも有難うございます！解決することができました！お返事が遅くなり、申し訳ございませんでした。具体的には、suwmn50799さんのご指摘の｛｝を外したところ、エラーが500に変わり、サーバーサイドで試行錯誤しておりました。結果、Django側のモデルで設定していたフィールドに渡す値（ファイル以外の値）を、ここでいうformDataに入れて渡すことが必要だと分かり、解決いたしました！以下という具合でした。今回も初歩的なミスが気づかず、大変助かりました。誠にありがとうございました。ーー async (uploadingfile: PROPS_NEWFILE) => { let formData = new FormData() formData.append('dealpotential_id', `${uploadingfile.dealpotential_id}`) formData.append('user_id', `${uploadingfile.user_id}`) uploadingfile.file && formData.append("file", uploadingfile.file) const res = await axios.post<PROPS_NEWFILE>( `${process.env.REACT_APP_API_URL}/api/files/`, formData, { headers: { 'Content-Type': 'multipart/form-data', Authorization: `JWT ${localStorage.localJWT}`, } } )

退会済みユーザー

2021/09/04 03:38

> 解決することができました！おめっとうさん！

行動規範の内容に同意します