Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to use uploadImage(e)? #37

Open
acarlstein opened this issue Apr 26, 2023 · 1 comment
Open

How to use uploadImage(e)? #37

acarlstein opened this issue Apr 26, 2023 · 1 comment

Comments

@acarlstein
Copy link

acarlstein commented Apr 26, 2023

First at all, great project and nicely done. Much appreciated.

I'm trying to use uploadImage(e) but I get:

e.target is undefined

I'm not sure if e is supposed to be an URL, data, or what.

I tried with an URL but didn't work:

https://dummyimage.com/458x340/000000/9b1bdb.png

I tried with the image as base64 below but didn't work either:

const imageDefault = "data:image/png;base64,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";

Also I tried by assigning the base64 string to an image but no luck:

    const image = new Image();
    image.src = imageDefault;

I also tried to pass it as FileReader with the base64 content, but didn't work either:

    const blob = new Blob([imageDefault], {type: 'text/plain'});
    
    const fileReader = new FileReader();
    fileReader.readAsDataURL(blob);

Also, I tried like this:

 const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
    

    // Create a new File object
    const myFile = new File([imageDefault], 'myFile.txt', { type: 'text/plain' });

    const dataTransfer = new DataTransfer();
    dataTransfer.items.add(myFile);
    
    fileInput.files = dataTransfer.files;

Do anyone have some code example? Thank you.

@akempes
Copy link

akempes commented Nov 23, 2023

I just ran into the same problem. For anyone who wants to load an image from an url:

const url = 'https://dummyimage.com/458x340/000000/9b1bdb.png';

fetch(url)
    .then(response => {

        // Check if the request was successful (status code 200)
        if (!response.ok) {
            throw new Error(`Failed to fetch data from ${url}`);
        }

        // Convert the response body to a Blob
        return response.blob();
    })
    .then(blob => {

        const e = {
            target: {
                files: [
                    blob,
                ]
            }
        };

        this.$refs.editor.uploadImage(e);
    });

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants