@portive/client
Version:
Client to connect to and use Portive's cloud services for open source components
106 lines (105 loc) • 3.95 kB
JavaScript
;
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.createClientFile = exports.isHostedImage = void 0;
/**
* Array of supported image content types.
*/
const SUPPORTED_IMAGE_TYPES = [
"image/jpg",
"image/jpeg",
"image/png",
"image/gif",
"image/webp",
];
/**
* Returns true if the passed in `File` object is a supported image type.
* A supported image is able to be resized dynamically on the server.
*/
function isHostedImage(file) {
return SUPPORTED_IMAGE_TYPES.includes(file.type);
}
exports.isHostedImage = isHostedImage;
/**
* Takes a `url` to an image and returns its size as a tuple `[width, height]`.
*
* It works by creating an `Image` object, assigning the `url` to its `src`
* and waiting for it to load then finding its `naturalWidth` and `naturalHeight`.
*/
function getImageSize(url) {
return __awaiter(this, void 0, void 0, function* () {
return new Promise((resolve) => {
const image = new Image();
image.addEventListener("load", function () {
resolve({
width: this.naturalWidth,
height: this.naturalHeight,
});
});
image.src = url;
});
});
}
/**
* Keeps a WeakMap of `File` to `ClientFile` mappings. This lets a developer
* call `createClientFile` before the `uploadFile` method to get important
* information about the file. The operation to the get the image width/height
* is costly so we use this WeakMap to memoize the results.
*/
const CLIENT_FILE_MAP = new WeakMap();
/**
* Takes a `File` object and returns a `ClientFile` object with some useful
* properties. The values are cached in the WeakMap `CLIENT_FILE_MAP` because
* of the expensive `getImageSize` function.
*
* - type: `image` or `generic`
* - size: [width, height]
* - objectUrl: a URL that can be used as the image src before the image is uploaded
*/
function createClientFile(file) {
return __awaiter(this, void 0, void 0, function* () {
if (!(file instanceof File))
return file;
const cachedClientFile = CLIENT_FILE_MAP.get(file);
if (cachedClientFile !== undefined) {
return cachedClientFile;
}
const objectUrl = URL.createObjectURL(file);
if (isHostedImage(file)) {
const imageSize = yield getImageSize(objectUrl);
const clientImageFile = {
type: "image",
filename: file.name,
contentType: file.type,
bytes: file.size,
width: imageSize.width,
height: imageSize.height,
file,
objectUrl,
};
CLIENT_FILE_MAP.set(file, clientImageFile);
return clientImageFile;
}
else {
const clientGenericFile = {
type: "generic",
filename: file.name,
contentType: file.type,
bytes: file.size,
file,
objectUrl,
};
CLIENT_FILE_MAP.set(file, clientGenericFile);
return clientGenericFile;
}
});
}
exports.createClientFile = createClientFile;