Error uploading asset to contentful (sdk CMA) directly from input in the browser

Question

I'm trying to select a file from the browser using an <input type='file'> and the Contentful manangement api.

I tested it with a file already on the web like the example here: Angular & Contentful: Cannot create asset inside a space 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

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

Any ideas? Thanks!

Answer 1

It's hard for me to troubleshoot this but you can have a look at this example.

https://github.com/contentful-labs/file-upload-example :)

It uploads files using the Content Management API.