From c23d9ba83c87511a626bfe8d1da5dd981e311262 Mon Sep 17 00:00:00 2001 From: bob Date: Thu, 23 Jan 2020 18:24:38 -0500 Subject: got rid of extension docs. changed layout-specific keys to start with "_" which flags them to be written to the current layout document --- src/client/util/Import & Export/DirectoryImportBox.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src/client/util/Import & Export') diff --git a/src/client/util/Import & Export/DirectoryImportBox.tsx b/src/client/util/Import & Export/DirectoryImportBox.tsx index 5b5bffd8c..c7c94abed 100644 --- a/src/client/util/Import & Export/DirectoryImportBox.tsx +++ b/src/client/util/Import & Export/DirectoryImportBox.tsx @@ -145,8 +145,8 @@ export default class DirectoryImportBox extends React.Component const offset: number = this.persistent ? (height === 0 ? 0 : height + 30) : 0; const options: DocumentOptions = { title: `Import of ${directory}`, - width: 1105, - height: 500, + _width: 1105, + _height: 500, x: NumCast(doc.x), y: NumCast(doc.y) + offset }; -- cgit v1.2.3-70-g09d2 From 416541c18545cabe0c1b25d698770d7a50a9136e Mon Sep 17 00:00:00 2001 From: Sam Wilkins Date: Fri, 24 Jan 2020 11:56:37 -0500 Subject: finalized image upload changes, fixed exif parsing, excessive image uploading and automatically encode native dimensions --- src/client/util/Import & Export/ImageUtils.ts | 12 ++++- src/client/util/request-image-size.js | 2 +- src/client/views/collections/CollectionSubView.tsx | 13 +++-- src/client/views/nodes/ImageBox.tsx | 42 ++++++++-------- src/server/ApiManagers/UploadManager.ts | 3 +- src/server/DashUploadUtils.ts | 56 ++++++++++------------ 6 files changed, 69 insertions(+), 59 deletions(-) (limited to 'src/client/util/Import & Export') diff --git a/src/client/util/Import & Export/ImageUtils.ts b/src/client/util/Import & Export/ImageUtils.ts index 6a9486f83..2f4db0e17 100644 --- a/src/client/util/Import & Export/ImageUtils.ts +++ b/src/client/util/Import & Export/ImageUtils.ts @@ -14,9 +14,17 @@ export namespace ImageUtils { return false; } const source = field.url.href; - const response = await Networking.PostToServer("/inspectImage", { source }); - const { error, data } = response.exifData; + const { + contentSize, + nativeWidth, + nativeHeight, + exifData: { error, data } + } = await Networking.PostToServer("/inspectImage", { source }); document.exif = error || Docs.Get.DocumentHierarchyFromJson(data); + const proto = Doc.GetProto(document); + proto.nativeWidth = nativeWidth; + proto.nativeHeight = nativeHeight; + proto.contentSize = contentSize; return data !== undefined; }; diff --git a/src/client/util/request-image-size.js b/src/client/util/request-image-size.js index 27605d167..beb030635 100644 --- a/src/client/util/request-image-size.js +++ b/src/client/util/request-image-size.js @@ -38,7 +38,7 @@ module.exports = function requestImageSize(options) { return reject(new HttpError(res.statusCode, res.statusMessage)); } - let buffer = new Buffer([]); + let buffer = new Buffer.from([]); let size; let imageSizeError; diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx index 063b5c5df..251828bbd 100644 --- a/src/client/views/collections/CollectionSubView.tsx +++ b/src/client/views/collections/CollectionSubView.tsx @@ -302,12 +302,19 @@ export function CollectionSubView(schemaCtor: (doc: Doc) => T) { formData.append('file', file); const dropFileName = file ? file.name : "-empty-"; promises.push(Networking.PostFormDataToServer("/upload", formData).then(results => { - results.map(action(({ clientAccessPath }: any) => { + results.map(action((result: any) => { + const { clientAccessPath, nativeWidth, nativeHeight, contentSize } = result; const full = { ...options, width: 300, title: dropFileName }; const pathname = Utils.prepend(clientAccessPath); Docs.Get.DocumentFromType(type, pathname, full).then(doc => { - doc && (Doc.GetProto(doc).fileUpload = basename(pathname).replace("upload_", "").replace(/\.[a-z0-9]*$/, "")); - doc && this.props.addDocument(doc); + if (doc) { + const proto = Doc.GetProto(doc); + proto.fileUpload = basename(pathname).replace("upload_", "").replace(/\.[a-z0-9]*$/, ""); + nativeWidth && (proto.nativeWidth = nativeWidth); + nativeHeight && (proto.nativeHeight = nativeHeight); + contentSize && (proto.contentSize = contentSize); + this.props.addDocument(doc); + } }); })); })); diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx index b7e904283..c47e656fe 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -214,26 +214,26 @@ export class ImageBox extends DocAnnotatableComponent { - requestImageSize(imgPath) - .then((size: any) => { - const rotation = NumCast(this.dataDoc.rotation) % 180; - const realsize = rotation === 90 || rotation === 270 ? { height: size.width, width: size.height } : size; - const aspect = realsize.height / realsize.width; - if (this.Document.width && (Math.abs(1 - NumCast(this.Document.height) / NumCast(this.Document.width) / (realsize.height / realsize.width)) > 0.1)) { - setTimeout(action(() => { - if (this.paths[NumCast(this.props.Document.curPage)] === imgPath && (!this.layoutDoc.isTemplateDoc || this.dataDoc !== this.layoutDoc)) { - this._resized = imgPath; - this.Document.height = this.Document[WidthSym]() * aspect; - this.Document.nativeHeight = realsize.height; - this.Document.nativeWidth = realsize.width; - } - }), 0); - } else this._resized = imgPath; - }) - .catch((err: any) => console.log(err)); - } + // _resized = ""; + // resize = (imgPath: string) => { + // requestImageSize(imgPath) + // .then((size: any) => { + // const rotation = NumCast(this.dataDoc.rotation) % 180; + // const realsize = rotation === 90 || rotation === 270 ? { height: size.width, width: size.height } : size; + // const aspect = realsize.height / realsize.width; + // if (this.Document.width && (Math.abs(1 - NumCast(this.Document.height) / NumCast(this.Document.width) / (realsize.height / realsize.width)) > 0.1)) { + // setTimeout(action(() => { + // if (this.paths[NumCast(this.props.Document.curPage)] === imgPath && (!this.layoutDoc.isTemplateDoc || this.dataDoc !== this.layoutDoc)) { + // this._resized = imgPath; + // this.Document.height = this.Document[WidthSym]() * aspect; + // this.Document.nativeHeight = realsize.height; + // this.Document.nativeWidth = realsize.width; + // } + // }), 0); + // } else this._resized = imgPath; + // }) + // .catch((err: any) => console.log(err)); + // } @action onPointerEnter = () => { @@ -306,7 +306,7 @@ export class ImageBox extends DocAnnotatableComponent
diff --git a/src/server/ApiManagers/UploadManager.ts b/src/server/ApiManagers/UploadManager.ts index 74f45ae62..583eaa59b 100644 --- a/src/server/ApiManagers/UploadManager.ts +++ b/src/server/ApiManagers/UploadManager.ts @@ -169,8 +169,7 @@ export default class UploadManager extends ApiManager { secureHandler: async ({ req, res }) => { const { source } = req.body; if (typeof source === "string") { - const { serverAccessPaths } = await DashUploadUtils.UploadImage(source); - return res.send(await DashUploadUtils.InspectImage(serverAccessPaths[SizeSuffix.Original])); + return res.send(await DashUploadUtils.InspectImage(source)); } res.send({}); } diff --git a/src/server/DashUploadUtils.ts b/src/server/DashUploadUtils.ts index 62a702a92..b826b4882 100644 --- a/src/server/DashUploadUtils.ts +++ b/src/server/DashUploadUtils.ts @@ -1,4 +1,4 @@ -import * as fs from 'fs'; +import { unlinkSync, createWriteStream, readFileSync, rename } from 'fs'; import { Utils } from '../Utils'; import * as path from 'path'; import * as sharp from 'sharp'; @@ -28,6 +28,10 @@ export function InjectSize(filename: string, size: SizeSuffix) { return filename.substring(0, filename.length - extension.length) + size + extension; } +function isLocal() { + return /Dash-Web[\\\/]src[\\\/]server[\\\/]public[\\\/](.*)/; +} + export namespace DashUploadUtils { export interface Size { @@ -93,12 +97,12 @@ export namespace DashUploadUtils { } async function UploadPdf(absolutePath: string) { - const dataBuffer = fs.readFileSync(absolutePath); + const dataBuffer = readFileSync(absolutePath); const result: ParsedPDF = await parse(dataBuffer); const parsedName = basename(absolutePath); await new Promise((resolve, reject) => { const textFilename = `${parsedName.substring(0, parsedName.length - 4)}.txt`; - const writeStream = fs.createWriteStream(serverPathToFile(Directory.text, textFilename)); + const writeStream = createWriteStream(serverPathToFile(Directory.text, textFilename)); writeStream.write(result.text, error => error ? reject(error) : resolve()); }); return MoveParsedFile(absolutePath, Directory.pdfs); @@ -167,16 +171,22 @@ export namespace DashUploadUtils { * @param source is the path or url to the image in question */ export const InspectImage = async (source: string): Promise => { - const url = convert(source); - const exifData = await parseExifData(url); + let resolvedUrl: string; + const matches = isLocal().exec(source); + if (matches === null) { + resolvedUrl = source; + } else { + resolvedUrl = `http://localhost:1050/${matches[1].split("\\").join("/")}`; + } + const exifData = await parseExifData(resolvedUrl); const results = { exifData, - requestable: url + requestable: resolvedUrl }; const { headers } = (await new Promise((resolve, reject) => { - request.head(url, (error, res) => error ? reject(error) : resolve(res)); + request.head(resolvedUrl, (error, res) => error ? reject(error) : resolve(res)); }).catch(error => console.error(error))); - const { width: nativeWidth, height: nativeHeight }: RequestedImageSize = await requestImageSize(url); + const { width: nativeWidth, height: nativeHeight }: RequestedImageSize = await requestImageSize(resolvedUrl); return { source, contentSize: parseInt(headers[size]), @@ -191,22 +201,20 @@ export namespace DashUploadUtils { return new Promise<{ clientAccessPath: Opt }>(resolve => { const filename = basename(absolutePath); const destinationPath = serverPathToFile(destination, filename); - fs.rename(absolutePath, destinationPath, error => { + rename(absolutePath, destinationPath, error => { resolve({ clientAccessPath: error ? undefined : clientPathToFile(destination, filename) }); }); }); } export const UploadInspectedImage = async (metadata: InspectionResults, filename?: string, format?: string, prefix = ""): Promise => { - const { requestable, source, contentSize, contentType, exifData } = metadata; + const { requestable, source, ...remaining } = metadata; const resolved = filename || generate(prefix, requestable); const extension = format || sanitizeExtension(requestable || resolved); const information: ImageUploadInformation = { clientAccessPath: clientPathToFile(Directory.images, resolved), serverAccessPaths: {}, - exifData, - contentSize, - contentType, + ...remaining }; const { pngs, jpgs } = AcceptibleMedia; return new Promise(async (resolve, reject) => { @@ -226,34 +234,22 @@ export namespace DashUploadUtils { await new Promise(resolve => { const filename = InjectSize(resolved, suffix); information.serverAccessPaths[suffix] = serverPathToFile(Directory.images, filename); - request(requestable).pipe(resizer).pipe(fs.createWriteStream(serverPathToFile(Directory.images, filename))) + request(requestable).pipe(resizer).pipe(createWriteStream(serverPathToFile(Directory.images, filename))) .on('close', resolve) .on('error', reject); }); } - if (source.includes("Dash-Web")) { - await new Promise(resolve => { - fs.unlink(source, error => resolve(error === null)); - }); + if (isLocal().test(source)) { + unlinkSync(source); } resolve(information); }); }; - const convert = (url: string) => { - let resolved: string; - const matches = /Dash-Web[\\\/]src[\\\/]server[\\\/]public[\\\/](.*)/.exec(url); - if (matches === null) { - resolved = url; - } else { - resolved = `http://localhost:1050/${matches[1].split("\\").join("/")}`; - } - return resolved; - }; - const parseExifData = async (source: string): Promise => { + const image = await request.get(source, { encoding: null }); return new Promise(resolve => { - new ExifImage(source, (error, data) => { + new ExifImage({ image }, (error, data) => { let reason: Opt = undefined; if (error) { reason = (error as any).code; -- cgit v1.2.3-70-g09d2 From c5d618538d4fd9669476dc7eb66ddd45783e5fa6 Mon Sep 17 00:00:00 2001 From: Sam Wilkins Date: Mon, 27 Jan 2020 05:50:15 -0500 Subject: nativewidth and nativeheight extension key fix and implemented UI to manually download a remotely hosted image --- .../util/Import & Export/DirectoryImportBox.tsx | 4 ++-- src/client/util/Import & Export/ImageUtils.ts | 4 ++-- src/client/views/DocComponent.tsx | 2 +- src/client/views/collections/CollectionSubView.tsx | 2 +- src/client/views/nodes/AudioBox.tsx | 2 +- src/client/views/nodes/ImageBox.scss | 24 ++++++++++++++----- src/client/views/nodes/ImageBox.tsx | 28 +++++++++++++++++++++- src/mobile/ImageUpload.tsx | 2 +- src/server/ApiManagers/UploadManager.ts | 14 ++++++++++- src/server/DashUploadUtils.ts | 12 +++------- 10 files changed, 69 insertions(+), 25 deletions(-) (limited to 'src/client/util/Import & Export') diff --git a/src/client/util/Import & Export/DirectoryImportBox.tsx b/src/client/util/Import & Export/DirectoryImportBox.tsx index c7c94abed..071015193 100644 --- a/src/client/util/Import & Export/DirectoryImportBox.tsx +++ b/src/client/util/Import & Export/DirectoryImportBox.tsx @@ -116,13 +116,13 @@ export default class DirectoryImportBox extends React.Component formData.append(Utils.GenerateGuid(), file); }); - collector.push(...(await Networking.PostFormDataToServer("/upload", formData))); + collector.push(...(await Networking.PostFormDataToServer("/uploadFormData", formData))); runInAction(() => this.completed += batch.length); }); await Promise.all(uploads.map(async ({ name, type, clientAccessPath, exifData }) => { const path = Utils.prepend(clientAccessPath); - const document = await Docs.Get.DocumentFromType(type, path, { width: 300, title: name }); + const document = await Docs.Get.DocumentFromType(type, path, { _width: 300, title: name }); const { data, error } = exifData; if (document) { Doc.GetProto(document).exif = error || Docs.Get.DocumentHierarchyFromJson(data); diff --git a/src/client/util/Import & Export/ImageUtils.ts b/src/client/util/Import & Export/ImageUtils.ts index 2f4db0e17..ff909cc6b 100644 --- a/src/client/util/Import & Export/ImageUtils.ts +++ b/src/client/util/Import & Export/ImageUtils.ts @@ -22,8 +22,8 @@ export namespace ImageUtils { } = await Networking.PostToServer("/inspectImage", { source }); document.exif = error || Docs.Get.DocumentHierarchyFromJson(data); const proto = Doc.GetProto(document); - proto.nativeWidth = nativeWidth; - proto.nativeHeight = nativeHeight; + proto["data-nativeWidth"] = nativeWidth; + proto["data-nativeHeight"] = nativeHeight; proto.contentSize = contentSize; return data !== undefined; }; diff --git a/src/client/views/DocComponent.tsx b/src/client/views/DocComponent.tsx index d98301cf6..6f3eb6808 100644 --- a/src/client/views/DocComponent.tsx +++ b/src/client/views/DocComponent.tsx @@ -61,7 +61,7 @@ export function DocAnnotatableComponent

(schema _annotationKey: string = "annotations"; public set annotationKey(val: string) { this._annotationKey = val; } - public get annotationKey() { return this._annotationKey } + public get annotationKey() { return this._annotationKey; } @action.bound removeDocument(doc: Doc): boolean { diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx index b96b86929..80fcc33aa 100644 --- a/src/client/views/collections/CollectionSubView.tsx +++ b/src/client/views/collections/CollectionSubView.tsx @@ -324,7 +324,7 @@ export function CollectionSubView(schemaCtor: (doc: Doc) => T) { formData.append('file', file); const dropFileName = file ? file.name : "-empty-"; - promises.push(Networking.PostFormDataToServer("/upload", formData).then(results => { + promises.push(Networking.PostFormDataToServer("/uploadFormData", formData).then(results => { results.map(action((result: any) => { const { clientAccessPath, nativeWidth, nativeHeight, contentSize } = result; const full = { ...options, _width: 300, title: dropFileName }; diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index 8ede79edc..62a479b2a 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -138,7 +138,7 @@ export class AudioBox extends DocExtendableComponent); } + @computed + private get considerDownloadIcon() { + const data = this.dataDoc[this.props.fieldKey]; + if (!(data instanceof ImageField)) { + return (null); + } + const primary = data.url.href; + if (primary.includes(window.location.origin)) { + return (null); + } + return ( + { + const { dataDoc } = this; + const [{ clientAccessPath }] = await Networking.PostToServer("/uploadRemoteImage", { sources: [primary] }); + dataDoc.originalUrl = primary; + dataDoc[this.props.fieldKey] = new ImageField(Utils.prepend(clientAccessPath)); + }} + /> + ); + } + @computed get nativeSize() { const pw = typeof this.props.PanelWidth === "function" ? this.props.PanelWidth() : typeof this.props.PanelWidth === "number" ? (this.props.PanelWidth as any) as number : 50; const nativeWidth = NumCast(this.dataDoc[this.props.fieldKey + "-nativeWidth"], pw); @@ -347,6 +372,7 @@ export class ImageBox extends DocAnnotatableComponent

+ {this.considerDownloadIcon} {this.considerGooglePhotosLink()} ; diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx index dab4de110..1583e3d5d 100644 --- a/src/mobile/ImageUpload.tsx +++ b/src/mobile/ImageUpload.tsx @@ -45,7 +45,7 @@ class Uploader extends React.Component { const formData = new FormData(); formData.append("file", files[0]); - const upload = window.location.origin + "/upload"; + const upload = window.location.origin + "/uploadFormData"; this.status = "uploading image"; const res = await fetch(upload, { method: 'POST', diff --git a/src/server/ApiManagers/UploadManager.ts b/src/server/ApiManagers/UploadManager.ts index 583eaa59b..a92b613b7 100644 --- a/src/server/ApiManagers/UploadManager.ts +++ b/src/server/ApiManagers/UploadManager.ts @@ -40,7 +40,7 @@ export default class UploadManager extends ApiManager { register({ method: Method.POST, - subscription: "/upload", + subscription: "/uploadFormData", secureHandler: async ({ req, res }) => { const form = new formidable.IncomingForm(); form.uploadDir = pathToDirectory(Directory.parsed_files); @@ -59,6 +59,18 @@ export default class UploadManager extends ApiManager { } }); + register({ + method: Method.POST, + subscription: "/uploadRemoteImage", + secureHandler: async ({ req, res }) => { + const { sources } = req.body; + if (Array.isArray(sources)) { + return res.send(await Promise.all(sources.map(url => DashUploadUtils.UploadImage(url)))); + } + res.send(); + } + }); + register({ method: Method.POST, subscription: "/uploadDoc", diff --git a/src/server/DashUploadUtils.ts b/src/server/DashUploadUtils.ts index b826b4882..cb7104757 100644 --- a/src/server/DashUploadUtils.ts +++ b/src/server/DashUploadUtils.ts @@ -108,13 +108,7 @@ export namespace DashUploadUtils { return MoveParsedFile(absolutePath, Directory.pdfs); } - const generate = (prefix: string, url: string) => `${prefix}upload_${Utils.GenerateGuid()}${sanitizeExtension(url)}`; - const sanitizeExtension = (source: string) => { - let extension = path.extname(source); - extension = extension.toLowerCase(); - extension = extension.split("?")[0]; - return extension; - }; + const generate = (prefix: string, extension: string) => `${prefix}upload_${Utils.GenerateGuid()}.${extension}`; /** * Uploads an image specified by the @param source to Dash's /public/files/ @@ -209,8 +203,8 @@ export namespace DashUploadUtils { export const UploadInspectedImage = async (metadata: InspectionResults, filename?: string, format?: string, prefix = ""): Promise => { const { requestable, source, ...remaining } = metadata; - const resolved = filename || generate(prefix, requestable); - const extension = format || sanitizeExtension(requestable || resolved); + const extension = remaining.contentType.toLowerCase().split("/")[1]; //format || sanitizeExtension(requestable || resolved); + const resolved = filename || generate(prefix, extension); const information: ImageUploadInformation = { clientAccessPath: clientPathToFile(Directory.images, resolved), serverAccessPaths: {}, -- cgit v1.2.3-70-g09d2