I’m trying to upload a file or image on a D9 site via json api. The test is namely to upload the user picture on the user entity.
I’ve been following the documentation or read questions about, but I can’t get it working.
The front-end is done with Next.js.
One the test done is the following:
The front-end next calls the next.js api server:
const filename = selectedFile.name; const fr = new FileReader(); fr.readAsArrayBuffer(selectedFile); fr.onload = async function () { const arrayBuffer = fr.result; if (arrayBuffer && typeof arrayBuffer !== 'string') { const base64String = _arrayBufferToBase64(arrayBuffer); const cookieSession = await getUpdateCookie(); const res = await fetch(`/api/users-test/user?cookie=${cookieSession}&name=${filename}`, { method: 'POST', body: base64String, }); } } function _arrayBufferToBase64(buffer: ArrayBuffer) { let binary = ''; const bytes = new Uint8Array(buffer); const len = bytes.byteLength; for (let i = 0; i < len; i++) { binary += String.fromCharCode(bytes[i]); } return window.btoa(binary); }
The api next.js server post then to Drupal:
const res = await fetch( `${process.env.NEXT_PUBLIC_DRUPAL_BASE_URL}/jsonapi/user/user/{userID}/user_picture`, { method: 'POST', headers: { 'Content-Type': 'application/octet-stream', Accept: 'application/vnd.api+json', 'Content-Disposition': `name="file"; filename="${filename}"`, Authorization: `Bearer ${token}`, }, body: req.body, } );
I tried different ways to convert the file to "binary file data", but none work: the user picture is always a blank square with an X.
However, if I try the same call with postman, the file is correctly loaded:
So, for now, I hypothesize the problem is on the javascript code, while Drupal has been configured correctly.