Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-24 23:48:13 -05:00
Code Issues Activity

Optimised gallery image upload previews (#1079)

Browse source 
no issue
- use `URL.createObjectURL(file)` to get a blob url rather than using `FileReader.readAsDataURL` which generates a very large data attribute
- speeds up the display of previews and associated browser hangs when an upload finishes, especially noticeable with large images and fast connections where multiple uploads finish around the same time
This commit is contained in:
Kevin Ansfield 2018-12-05 20:16:03 +00:00 • committed by GitHub
parent b3b5290a3c
commit 2639ff62e6
1 changed files with 11 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
ghost/admin/lib/koenig-editor/addon/components/koenig-card-gallery.js
View file

@ -228,30 +228,22 @@ export default Component.extend({
},
_readDataFromImageFile(file) {
let reader = new FileReader();
let url = URL.createObjectURL(file);
let image = EmberObject.create({
fileName: file.name
fileName: file.name,
previewSrc: url
});
reader.onload = (e) => {
let imgElement = new Image();
let previewSrc = htmlSafe(e.target.result);
let imageElem = new Image();
imageElem.onload = () => {
// update current display images
image.set('width', imageElem.naturalWidth);
image.set('height', imageElem.naturalHeight);
image.set('previewSrc', previewSrc);
imgElement.onload = () => {
// update current display images
image.set('width', imgElement.width);
image.set('height', imgElement.height);
// ensure width/height makes it into the payload images
this._buildAndSaveImagesPayload();
};
imgElement.src = previewSrc;
// ensure width/height makes it into the payload images
this._buildAndSaveImagesPayload();
};
reader.readAsDataURL(file);
imageElem.src = url;
return image;
},