Error uploading asset to directly from input in the browser

I’m trying to select a file from the browser using an <input type='file'> and uploaded using the CMA.

I tested it with a file already on the web like the docs explains, and also the example here, and it works perfect, the problem comes when I select a file and try to use it from the generated blob. This what I do:

fileChangedHandler = (e) => {
  const file = e.target.files[0];
  if (file) {
    this.setState({
      file: {
        selectedFile: file,
        fileUrl: URL.createObjectURL(file),
      },
    });
  }
};

then I use the fileUrl as the upload asset here:

environment.createAsset({
  fields: {
    title: {
      [locale]: selectedFile.name,
    },
    file: {
      [locale]: {
        contentType: selectedFile.type,
        fileName: selectedFile.name,
        upload: fileUrl,
      },
    },
  },
})

But I get an error saying that the value doesn’t match the regex validations as it starts with ‘blob’ instead a proper url error 1

I also tried using the selectedFile in the upload property but again it throws another error.

Any ideas? Thanks!

Hi @JC_Garcia,

It seems that the issue here is that the fileUrl would have to be parsed before being passed as part of the payload of the uploading item. Could you try doing so and clear it out of blob and let us know if it works?

Hi Gabriel,

I’m parsing it previously here:
fileUrl: URL.createObjectURL(file) -> blob:http://localhost:3000/xxxxxxx

In fact I can preview the image, in the browser using the parsed fileUrl.
This is the preview:

To me it looks like the problem is that the api doesn’t accept the blob data. The regex validation of the api only accepts a url that starts with ‘http’

if using fileUrl: URL.createObjectURL(file) is not the correct method, please could you let me know how to parse it?

thanks!