2016-07-21 8 views
1

Redux Form's file inputを使用して、ユーザーが画像をアップロードできるようにしようとしています。私は私のフィールドの残りの部分と一緒に私のフォームに設定することができます。私はCloudinary to post to their APIを使用して画像をアップロードしていイメージをアップロードする際にReduxフォームのファイル入力のファイルタイプは何ですか?

{ 
    userImages: { 
    value: [ 
     { 
     lastModified: 1467575553000, 
     lastModifiedDate: Sun Jul 03 2016 15:52:33 GMT-0400 (EDT), 
     name: "hero_bg.jpg", 
     size: 96826, 
     type : "image/jpeg", 
     webkitRelativePath: "" 
     } 
    ] 
    } 
} 

:私の行動にまで渡されるJPGファイルは次のようになります。しかし、私がuserImages.value [0]を私のファイルとして渡すと、それは私に400の悪い要求エラーを返しています。これは、渡されるファイル情報の問題であると私に信じさせています。

が実際のデータ(バイト配列バッファ)、データURI(Base64でエンコードされた )、リモートFTP、HTTPまたはHTTPS URLを指定できます。彼らは、以下のファイルタイプを受け入れるCloudinaryドキュメントで

既存のファイル、または S3 URL(ホワイトリストに登録されたバケットの)。

画像の小道具がこれらのいずれかに合っているとは思わないでください。私が正しく、このファイル入力/ JPGはReduxのフォームからアップロード取り扱い

//... 

export function putImage(props) { 

    console.log(props) 

    const cloudinaryURL = 'https://api.cloudinary.com/v1_1/<my_name_here>/image/upload'; 

    const image = 
    axios.post(cloudinaryURL, { 
     file: props, 
     upload_preset: 'test123' 
    }) 
    .then(function(response) { 
     console.log(response) 
    }) 
    .catch(function(error) { 
     console.log(error) 
    }) 

    return { 
    type: PUT_IMAGE, 
    payload: image, 
    } 
} 

アム:

は、ここに私の行動は?すべての助けが大歓迎です。ありがとう!!

+0

あなたは成功を手に入れましたか? –

答えて

0

私はAxiosと同じ問題があり、その問題についての回答が見つからない場合は、スーパーエージェントに切り替えて正常に動作します。

https://github.com/visionmedia/superagent

import request from 'superagent'; 

    let upload = request.post(CLOUDINARY.UPLOAD_URL) 
    .field('upload_preset', CLOUDINARY.UPLOAD_PRESET) 
    .field('file', file); // file to upload 

    upload.end((err, response) => { 
    if (err) { 
     console.error(err); // error handling 
    } 

    if (response.body.secure_url !== '') { 
     console.log(response.body.secure_url); // cloudinary image url 
    } 
    }); 
関連する問題