Is it possible to upload a base64 image? #617

New Issue

2017-02-03T22:32:29Z

surfercoder commented

2017-02-03 22:32:29 +00:00

(Migrated from github.com)

Hi there,

I know you have already touched this topic but I think that my case in a special one.

I am using the ng2-img-cropper Component, which allows you to get a smaller and lighter image from the original one.

Inside the image property, after cropping you get the resulting base64 string of the cropped image.

What I want to do is in my uploder object add this base64 image to the queue, so after that I will be allowed to invoke the uploader.queue[0].upload() function.

I am bugging you with this since we will be working with several images with different sizes, such as cover images, profile images/thumbnails and companies logos just to mention a few of them, and as you can imagine it would be quite nice if we can save some net traffic and also storage just saving the image we have cropped and not the initial one.

I have tried creating an Image from the base64 string and assign it directly but I am always getting an exception

Any kind of help on this will be more than appreciated.

Best regards.

Hi there, I know you have already touched this topic but I think that my case in a special one. I am using the ng2-img-cropper Component, which allows you to get a smaller and lighter image from the original one. Inside the image property, after cropping you get the resulting base64 string of the cropped image. What I want to do is in my uploder object add this base64 image to the queue, so after that I will be allowed to invoke the uploader.queue[0].upload() function. I am bugging you with this since we will be working with several images with different sizes, such as cover images, profile images/thumbnails and companies logos just to mention a few of them, and as you can imagine it would be quite nice if we can save some net traffic and also storage just saving the image we have cropped and not the initial one. I have tried creating an Image from the base64 string and assign it directly but I am always getting an exception Any kind of help on this will be more than appreciated. Best regards.

👍 1 ❤️ 4

chriseenberg commented

2017-02-23 11:42:30 +00:00

(Migrated from github.com)

+1

Spawnrad commented

2017-03-14 16:42:58 +00:00

(Migrated from github.com)

+1

KeitaElric commented

2017-03-20 02:17:43 +00:00

(Migrated from github.com)

+1

SouengKimmeng commented

2017-04-19 07:11:52 +00:00

(Migrated from github.com)

+1

breitsmiley commented

2017-04-24 05:47:35 +00:00

(Migrated from github.com)

+1

thanhpd commented

2017-04-28 10:57:29 +00:00

(Migrated from github.com)

+1

razvanstan commented

2017-05-29 08:58:04 +00:00

(Migrated from github.com)

+1

ghost commented

2017-06-02 22:07:01 +00:00

(Migrated from github.com)

+1

aquintiliano commented

2017-06-14 12:03:28 +00:00

(Migrated from github.com)

+1

👍 1

pedrohills commented

2017-06-27 22:03:26 +00:00

(Migrated from github.com)

+1

Boffka commented

2017-07-25 22:27:46 +00:00

(Migrated from github.com)

Solved!
Use dom-to-image

let node = document.getElementById('cropedimage');
domtoimage.toBlob(node)
    .then((blob) => {
        blob['name'] = 'myfilename.png';
        this.uploader.addToQueue([blob]);
        this.uploader.uploadAll();
});

Solved! Use [dom-to-image](https://github.com/tsayen/dom-to-image) ```javascript let node = document.getElementById('cropedimage'); domtoimage.toBlob(node) .then((blob) => { blob['name'] = 'myfilename.png'; this.uploader.addToQueue([blob]); this.uploader.uploadAll(); }); ```

👎 3

JianhuisHuang commented

2019-05-06 10:11:50 +00:00

(Migrated from github.com)

@surfercoder @valor-software @chriseenberg @Boffka I have the same request and tried research but nothing helpful，anyone can help me？thanks

xiaolong-zh commented

2019-11-13 09:56:43 +00:00

(Migrated from github.com)

+!

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: dc/ng2-file-upload#617