The extension cannot be detected (source: source)

Shotstack API
1

Hi team,

Im trying to directly upload image from react native using ingest api.
When i try to upload the blob to the presigned url i got, i get an error from title. Extenstion issue.

I’ve read a bit of the other issues regarding extension, i’ve removed compression totally or any image editing to ensure that the media type/extension is never changed and it still doesnt work, i get the same error.

Here is the source id for one of the uploads failing: zzz01jmb-0td4z-sqwwg-y4gqe-ax0g9j

Here is the local uri from which im creating a blob, not sure if thats meaningful: file:///Users/{name}/Library/Developer/CoreSimulator/Devices/697EEFB8-1A24-4608-8438-9399F245ADE0/data/Media/DCIM/100APPLE/IMG_0050.PNG

{name} is my macbook name

2

This generally occurs when the encoding isn’t recognised. Could you share the image you are looking to upload?

3

IMG_0005
IMG_00051920×1281 233 KB

For example this one, but it happens for any image i have on simulator, every extension, screenshots whatever

4

I cannot reproduce the error unfortunately. Are you making sure to omit the content-header from the upload step?

The following works ok with me using your shared image file.

const fs = require('fs');

const API_KEY = 'YOUR_API_KEY';
const UPLOAD_URL = 'https://api.shotstack.io/ingest/v1/upload';
const STATUS_URL = 'https://api.shotstack.io/ingest/v1/sources';
const FILE = 'source.jpeg';
const sleep = ms => new Promise(r => setTimeout(r, ms));

const checkStatus = async (id, attempts = 60, interval = 1000) => {
  for (let i = 0; i < attempts; i++) {
    const res = await fetch(`${STATUS_URL}/${id}`, {
      headers: { Accept: 'application/json', 'x-api-key': API_KEY },
    });
    if (!res.ok) throw new Error(`Status check failed: ${res.status}`);
    const { data } = await res.json();
    const status = data?.attributes?.status;
    if (status === 'ready') return data;
    if (status === 'failed') throw new Error('Source processing failed');
    await sleep(interval);
  }
  throw new Error('Timeout waiting for source ready');
};

(async () => {
  const res = await fetch(UPLOAD_URL, {
    method: 'POST',
    headers: { Accept: 'application/json', 'x-api-key': API_KEY },
  });
  if (!res.ok) throw new Error(`Failed to get signed URL: ${res.status}`);
  const { data } = await res.json();
  const { url: signedUrl, id } = data.attributes;
  if (!signedUrl || !id) throw new Error('Missing signed URL or id');

  const fileBuffer = fs.readFileSync(FILE);
  const upRes = await fetch(signedUrl, { method: 'PUT', body: fileBuffer });
  if (!upRes.ok) throw new Error(`Upload failed: ${upRes.status}`);

  const result = await checkStatus(id);
  console.log('Final source details:', result);
})();
5

Turns out we shouldnt be sending blob, that was my mistake.
I was making blob and sending it to the server. Your code helped me i’ve just adapted it to react native. Thanks a lot

1 Like