I've been attempting to get a file to upload using REST services and have been having a heck of a time getting it to work. All attempts come back as 403 (Forbidden).

Here's the code:

export const postImage = async file => {
  const url = "http://XXXXXX.com/entity/file?_format=json";

  const reader = new FileReader();


  reader.onload = async e => {
    const body = {
      filename: [{ value: file.name }],
      filemime: [{ value: file.type }],
      filesize: [{ value: file.size }],
      type: [{ target_id: "image" }],
      data: [{ value: Base64.encode(e.target.result) }]

const requestObject = {
  body: JSON.stringify(body),
  method: "POST",
  mode: "cors",
  headers: {
    "Content-Type": "application/json",
    Accept: "application/json",
    Authorization: "Basic XXXXXXXXX",
    "X-CSRF-Token": "XXXXXXXX"

const response = await fetch(url, requestObject);

const data = await response.json();

return data

I have been able to properly POST with content just fine using the same authentication. Setup for File in REST is just like with Content (JSON, basic auth). The account I'm posting from has full admin privileges. Any help would be greatly appreciated.

File REST Setup

1 Answer 1


I was missing the File Entity module. Installed it and was good to go.

Also, was having trouble when using normal json format. Switched to hal_json and that got it.

It's also worth noting that using Base64.encode is unnecessary because FileReader does that for you. Also, you need to split off the file type from the returned data string, otherwise the file will be corrupted when you go to upload it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.