Can you limit uploadType to images when using the `@uploadcare/upload-client` package?

Questions / Help
1

Hi there.

Sorry if this question is already answered.

We are using the @uploadcare/upload-client library,
and thinking about if it’s possible to restrict filetype to Image?

2

Hey @ah1,

When it comes to uploading local files, you can do the following:

  1. Add the accept attribute to your file input to filter image files in the system dialog
<input type="file" id="file" accept="image/*" />
  1. Check the type of the selected file and upload it only if it matches image/* 
const fileInput = document.getElementById("file");

fileInput.addEventListener("change", (e) => {
  const file = e.target.files[0];
  const { type } = file;
  if (!type.match(/image\/.*/gi)) {
    e.target.value = "";
    alert("Only image files accepted");
  } else {
    uploadFile(e.target.files[0]);
  }
});

async function uploadFile(file) {
  const upload = await client.uploadFile(file, {});
  console.log(upload);
}

Here’s a live demo on Codesandbox.

Also, it’s possible to enable backend mime-type validation on a project level

image
image723×426 49.1 KB

This feature is available on the Business and Enterprise plans.

1 Like