Participating Frequently

Full editor throw error when createWithAsset with dataType is blob

Forum|Forum|11 months ago
February 13, 2025
7 replies
801 views

Hi, I'm trying to create project with a video by using blob type. I used createWithAsset () method with bellow configuration but the edtior show an error message and then close. So if anyone know what I did wrong please let me know, any helps would be really appericated.

Version of the app: v4
Platform and OS version: Chrome 131.0.6778.205 (Official Build) (arm64)
Basic steps to reproduce the problem:

...
// data dataUrl is a url to the mp4 file
// fetch the file
const fetchedVideo = await fetch(dataUrl);
// covert to blob
const videoBlob = await fetchedVideo.blob();

//open and upload to adobe embeded with below config
ccEverywhere.editor.createWithAsset(
					{
						canvasSize: 'Video',
						asset: {
							type: 'video',
							dataType: 'blob',
							data: videoBlob,
						},
					},
					{
						selectedCategory: 'media',
						allowedFileTypes: ['image/png', 'image/jpeg', 'video/mp4'],
						callbacks: {
							onPublish: (intent, publishParams) => {
								//...
							},
						},
					},
					[
						{
							id: 'export-btn',
							label: 'Save & Export',
							action: {
								target: 'publish',
							},
							style: {
								uiType: 'button',
							},
						},
					],
					{
						zIndex: 1,
					}
				);

Expected result and actual result
The editor should be opened with the video file but throw an error and close instead.
Other error logs from my browser console:

freked

Known Participant

@Barranca Hey, so we'll need to verify it a bit more carefully during next week, but for the initial testing, it seems to finally work now! So that is a great way to end the week and thank you for getting back quickly 🙂

B

Barranca

Adobe Employee

Hi,
there's one more step involved: fetch -> blob -> file, then it works:

const video = await fetch(
  "https://videos.pexels.com/video-files/8468212/8468212-hd_1080_1920_30fps.mp4"
)
  .then((res) => res.blob())
  .then((blob) => new File([blob], "My video File", { type: "video/mp4" }));

let docConfig = {
  canvasSize: "YoutubeVideo",
  asset: {
    data: video,
    dataType: "blob",
    type: "video",
  },
};

editor.createWithAsset(docConfig, {}, []);

I hope this helps! And thank you so much for your patience 😊

Davide Barranca | Sr. Developer Relations Engineer @Adobe

freked

Known Participant

@Barranca Thanks for the update, hoping for a swift solution and that this can be prioritized by the team. This is becoming more critical by each passing day for us.

B

Barranca

Adobe Employee

Hi @freked ,
I've passed this along to Eng. I just tested a workflow where you pick a local file with a file picker and pass the file as a blob and it works. But fetch().then(res => res.blob()) does not, although the blob seems valid. I'll let you know as soon as I hear something back.

Davide Barranca | Sr. Developer Relations Engineer @Adobe

freked

Known Participant

Hey @Barranca it would be extremely appreciated if you or the team could just confirm that the issue is not our end (based on the examples provided above) so we don't need to spend more time on debugging until you make another fix.