File/Media upload with Axios/React Native?

I’m working on a React Native project that has an interface to upload media (with path “file://”) from a mobile device to our Omeka database, but I’ve been having trouble sending a post request using axios. Has anyone been able to successfully upload a file to Omeka using RN or React, or anything similar? I’ve tried converting other requests in languages like Python or using curl but they’ve been unsuccessful. Here’s a snippet of my POST request:

let item = {
“o:media”: [
{
“o:ingester”: “upload”,
file_index: “0”,
“o:item”: {},
“dcterms:title”: [
{
property_id: 1,
property_label: “Title”,
@value”: “My Image”,
type: “literal”,
},
],
},
],
“dcterms:title”: [
{
type: “literal”,
property_id: 1,
property_label: “Title”,
is_public: true,
@value”: “My Item”,
},
],
};
let payload = {
data: item,
“file[0]”: IMAGE_URI,
};
axios
.post(“http://address/api/media”, payload, {
params: {
key_identity: KEY_IDENTITY",
key_credential: KEY_CREDENTIAL,
},
})
.then((res) => {console.log(res, ‘res’})
.catch((error) => console.log(“error”, error.message));
})

And sending this gives me an error 422. Thanks in advance!

1 Like

Hello!! After looking into this more I’ve found a solution using fetch rather than Axios. Here’s my code if anyone else is having trouble with this-

var data = new FormData();
data.append("data", `{"o:ingester": "upload", "file_index": 0, "o:item": {"o:id": ${item_id}}}, "dcterms:title": [{"type": "literal", "property_id": 1, "@value": "picture.jpg"}]}`);
data.append("file[0]", {
   name: "placeholder.jpg",
   uri: file.uri,
   type: "image/jpg",
});

var config = {
   method: "post",
   headers: {
       Accept: "application/json",
       "Content-Type": "multipart/form-data",
   },
   body: data,
};

fetch(`http://${host_address}/api/media?key_identity=${key_identity}&key_credential=${key_credential}`, config)
.then((res) => res.json())
.then((data) => console.log(data))
.catch((err) => console.log(err);