How can I have the dropped file?

erossini commented 2 years ago

I try to use this library with Blazor and here you fine the repo. It is working.

The problem I get is to upload a file. Using only a simple HTML page

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Example / Preview</title>
        <link rel="stylesheet" href="../src/css/easymde.css" />
        <script src="../src/js/easymde.min.js"></script>
    </head>

    <body>
        <textarea></textarea>
        <script>
            const easyMDE = new EasyMDE({
                uploadImage: true,
                imageMaxSize: 2097152,
                imageAccept: "image/png, image/jpeg",
                imageUploadEndpoint: "https://localhost:7013/api/Image",
                imageUploadFunction: (file, onSuccess, onError) => {
                    console.log(file);
                },
            });
        </script>
    </body>
</html>

The result is this one (there some same Xs)

I drop and image on the textbox, I don't see any request from the page to the API.

easymde

What I expect is that the EasyMDE calls the API to save the file. So, the API return the path of the image.

Then, my question. All my APIs have a strict security, so I have to customize the call to the API. For that, I like to have the content of the file. With the content of the file (in a byte[] format or in base64) I can write a custom call and then give to the EasyMDE the path of the image.

Is it possible to have something like that?

Thank you in advance, Enrico

Ionaru commented 2 years ago

Check the documentation for imageUploadFunction. If that option is given, you should write a custom upload function in it, and it will replace the default uploading logic. The editor will only show the result when onSuccess is called.

The file in your "console.log(file);" is this type: https://developer.mozilla.org/en-US/docs/Web/API/File, I think file.arrayBuffer() will be useful to you.

erossini commented 2 years ago

Thank you. I found how to have the file!

erossini commented 2 years ago

I have a working example! Thank you

Ionaru / easy-markdown-editor

How can I have the dropped file? #379