400 Response when uploading User Avatar

[mahbubhasanhira]

When I upload an avatar from registration page, It gives me 400 error and says "The submitted data was not a file. Check the encoding type on the form." I use Axios for uploading

[alamorre]

The avatar is a Filefield using Rest. If you don't submit a proper blob for that field it will not work.

What does your request look like? Can you share some code?

[mahbubhasanhira]

Actually, I am using Axios and send data from the front-end(react.js), Everything is fine but only the avatar field creating the main problem.

const [img, setImg] = useState('');

<input type="file" name="avatar" multiple={false} onChange={e => setImg(e.target.value)}/>

async function createUser(data){ const config = { method: "post", url: "https://api.chatengine.io/users/", headers: { "PRIVATE-KEY": "key", }, data: { username: data.username, first_name: data.first_name, last_name: data.last_name, secret: data.secret, avatar: img }, }; try { await axios(config).then(function (response) { console.log(JSON.stringify(response.data)); }); } catch (error) { console.log(error); } };

[alamorre]

When submitting files you need to use a formData object and pass in the values like this snippet here.

https://github.com/alamorre/unichat/blob/95f680bf6c638f70f050921856e959fbf7329420/src/components/Chats.js#L50-L62

There are lots of docs on sending files with formdata beyond this snippet too. Generic JSON objects wont work