Handle error uploading image

[albertcito]

Is there a default exception that the editor can catch if the image doesn't load?

const uploadImage = async (file: File) => {
    const response = await upload({ file }); // AJAX request
    if (!response.data) {
      throw new Error('Not uploaded');
    }
    const { id, ext } = response.data.mediaUpload;
    return `${constants.urlServer}/public/uploads/images/${id}.${ext}`;
  };

Also, I think it would also be nice to upload an image with the option that TinyMCE has. To have more options for loading an image, such as using a custom component.

const uploadImage = async (
  file: File,
  success: (url: string) => void,
  failure: (error: string, options?: UploadFailureOptions) => void,
  progress?: (percent: number) => void,
) => {
    const response = await upload({ file });
    if (response.data) {
       const { id, ext } = response.data.mediaUpload;
       success(`${constants.urlServer}/public/uploads/images/${id}.${ext}`);
    }
    failure(response.error.message);
};

[tommoor]

I'm not sure what you mean with the first snippet- this error case should be handled and the upload placeholder removed

[albertcito]

The first snippet works fine with the Editor; in that case, it automatically deletes the image. But I think I need to create a custom error and a kind of global try/catch to handle this error. In order to not print the error in the console or not to send to the global error report.

I was thinking that maybe the Editor could catch this error instead of my code, with some custom exception to avoid to use the global try/catch.

I mean something like that:

import { ImageUploadException } from 'rich-markdown-editor';

const uploadImage = async (file: File) => {
    const response = await upload({ file }); // AJAX request
    if (!response.data) {
      throw new ImageUploadException(response.error.message);
    }
    const { id, ext } = response.data.mediaUpload;
    return `${constants.urlServer}/public/uploads/images/${id}.${ext}`;
  };

[tommoor]

I see, I don't think we want to swallow errors that might provide useful information inside the component. I'd say it's best practice to surround the editor with a React error boundary anyway which would provide a good place to handle the error how you see fit

[albertcito]

Thank you for take the time to answer my questions :)

[albertcito]

Hey @tommoor I sorry to bother you so much. But I think I have a good point here:

rich-markdown-editor/src/commands/insertFiles.ts

Lines 70 to 84 in 912e469

	.catch(error => {
	console.error(error);
	// cleanup the placeholder if there is a failure
	const transaction = view.state.tr.setMeta(uploadPlaceholderPlugin, {
	remove: { id },
	});
	view.dispatch(transaction);
	// let the user know
	if (onShowToast) {
	onShowToast(dictionary.imageUploadError, ToastType.Error);
	}
	})
	// eslint-disable-next-line no-loop-func

Each Exception in my code base, will be catch by the Editor catch. But an exception should fail and be handle by the global try/catch in my side of code not in the library side. For this reason I think the library need a custom exception to use it if the upload fail and send the information to the Editor. I mean something kind of:

catch(error) {
   if (error instanceof FailUploadImageException) {
       // do the job
   }  else {
     thrown error
   }
}

So in that case, I can inform the Editor about the files that didn't load correctly, and other not handle exceptions will be caught by my global try/catch on my side. So in that case it code make sense:

const uploadImage = async (file: File) => {
    const response = await upload({ file }); // AJAX request
    if (!response.data) {
      // Server error response. For instance "insufficient permissions", "the image could not be processed", ...
      throw new FailUploadImageException(response.error.message);
    }
    const { id, ext } = response.data.mediaUpload;
    return `${constants.urlServer}/public/uploads/images/${id}.${ext}`;
  };

[tommoor]

I'm having trouble following, you originally said it _was throwing and error and now that it isnt throwing an error. What is the behavior you're trying to achieve that the current system doesn't allow?

If you want to catch errors within your upload function then you're able to catch them and report them within upload in your example, you'll just need to re-throw to make sure that the placeholder is correctly removed.