diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/client/views/Main.tsx | 10 | ||||
-rw-r--r-- | src/client/views/collections/CollectionViewBase.tsx | 83 | ||||
-rw-r--r-- | src/server/index.ts | 22 |
3 files changed, 92 insertions, 23 deletions
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 6f08566bc..b78f59681 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -55,16 +55,16 @@ Documents.initProtos(mainDocId, (res?: Document) => { let pdfurl = "http://www.adobe.com/support/products/enterprise/knowledgecenter/media/c4611_sample_explain.pdf" let weburl = "https://cs.brown.edu/courses/cs166/"; let audiourl = "http://techslides.com/demos/samples/sample.mp3"; - let videourl = "http://techslides.com/demos/sample-videos/small.mp4"; + let videourl = "http://techslides.com/demos/sample-videos/small.mp4"; let clearDatabase = action(() => Utils.Emit(Server.Socket, MessageStore.DeleteAll, {})) let addTextNode = action(() => Documents.TextDocument({ width: 200, height: 200, title: "a text note" })) let addColNode = action(() => Documents.FreeformDocument([], { width: 200, height: 200, title: "a freeform collection" })); let addSchemaNode = action(() => Documents.SchemaDocument([Documents.TextDocument()], { width: 200, height: 200, title: "a schema collection" })); - let addVideoNode = action(() => Documents.VideoDocument(videourl, {width: 200, height:200, title: "video node"})); + let addVideoNode = action(() => Documents.VideoDocument(videourl, { width: 200, height: 200, title: "video node" })); let addPDFNode = action(() => Documents.PdfDocument(pdfurl, { width: 200, height: 200, title: "a schema collection" })); let addImageNode = action(() => Documents.ImageDocument(imgurl, { width: 200, height: 200, title: "an image of a cat" })); let addWebNode = action(() => Documents.WebDocument(weburl, { width: 200, height: 200, title: "a sample web page" })); - let addAudioNode = action(() => Documents.AudioDocument(audiourl,{ width: 200, height: 200, title: "audio node" } )) + let addAudioNode = action(() => Documents.AudioDocument(audiourl, { width: 200, height: 200, title: "audio node" })) let addClick = (creator: () => Document) => action(() => mainfreeform.GetList<Document>(KeyStore.Data, []).push(creator()) ); @@ -74,8 +74,8 @@ Documents.initProtos(mainDocId, (res?: Document) => { let webRef = React.createRef<HTMLDivElement>(); let textRef = React.createRef<HTMLDivElement>(); let schemaRef = React.createRef<HTMLDivElement>(); - let videoRef = React.createRef<HTMLDivElement>(); - let audioRef = React.createRef<HTMLDivElement>(); + let videoRef = React.createRef<HTMLDivElement>(); + let audioRef = React.createRef<HTMLDivElement>(); let colRef = React.createRef<HTMLDivElement>(); ReactDOM.render(( diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx index 0a3b965f2..661cec8ae 100644 --- a/src/client/views/collections/CollectionViewBase.tsx +++ b/src/client/views/collections/CollectionViewBase.tsx @@ -1,4 +1,4 @@ -import { action } from "mobx"; +import { action, runInAction } from "mobx"; import { Document } from "../../../fields/Document"; import { ListField } from "../../../fields/ListField"; import React = require("react"); @@ -11,6 +11,7 @@ import { Documents, DocumentOptions } from "../../documents/Documents"; import { Key } from "../../../fields/Key"; import { Transform } from "../../util/Transform"; import { CollectionView } from "./CollectionView"; +import * as request from "request"; export interface CollectionViewProps { fieldKey: Key; @@ -68,13 +69,17 @@ export class CollectionViewBase extends React.Component<SubCollectionViewProps> let html = e.dataTransfer.getData("text/html"); let text = e.dataTransfer.getData("text/plain"); if (html && html.indexOf("<img") != 0) { + console.log("not good"); let htmlDoc = Documents.HtmlDocument(html, { ...options, width: 300, height: 300 }); htmlDoc.SetText(KeyStore.DocumentText, text); this.props.addDocument(htmlDoc); return; } + console.log(e.dataTransfer.items.length); + for (let i = 0; i < e.dataTransfer.items.length; i++) { + const upload = window.location.origin + "/upload"; let item = e.dataTransfer.items[i]; if (item.kind === "string" && item.type.indexOf("uri") != -1) { e.dataTransfer.items[i].getAsString(function (s) { @@ -93,29 +98,71 @@ export class CollectionViewBase extends React.Component<SubCollectionViewProps> }) } - if (item.kind == "file" && item.type.indexOf("image")) { + if (item.kind == "file" && item.type.indexOf("image") !== -1) { let fReader = new FileReader() let file = item.getAsFile(); - - fReader.addEventListener("load", action("drop", () => { - if (fReader.result) { - let url = "" + fReader.result; - let doc = Documents.ImageDocument(url, options) - let docs = that.props.Document.GetT(KeyStore.Data, ListField); - if (docs != FieldWaiting) { - if (!docs) { - docs = new ListField<Document>(); - that.props.Document.Set(KeyStore.Data, docs) - } - docs.Data.push(doc); - } - } - }), false) + let formData = new FormData() if (file) { - fReader.readAsDataURL(file) + formData.append('file', file) } + + fetch(upload, { + method: 'POST', + body: formData + }) + .then((res: Response) => { + return res.json() + }).then(json => { + + json.map((file: any) => { + console.log(file) + console.log(typeof file) + let path = window.location.origin + file + console.log(path) + runInAction(() => { + var img = Documents.ImageDocument(path, { ...options, nativeWidth: 300, width: 300, }) + let docs = that.props.Document.GetT(KeyStore.Data, ListField); + if (docs != FieldWaiting) { + if (!docs) { + docs = new ListField<Document>(); + that.props.Document.Set(KeyStore.Data, docs) + } + docs.Data.push(img); + + } + }) + + + }) + }) + // fReader.addEventListener("load", action("drop", () => { + // if (fReader.result) { + // let form = request.post(upload).form(); + // form.append('file', fReader.result); + // // let url = "" + fReader.result; + // // let doc = Documents.ImageDocument(url, options) + // // let docs = that.props.Document.GetT(KeyStore.Data, ListField); + // // if (docs != FieldWaiting) { + // // if (!docs) { + // // docs = new ListField<Document>(); + // // that.props.Document.Set(KeyStore.Data, docs) + // // } + // // docs.Data.push(doc); + // // } + // } + // }), false) + // if (file) { + // fReader.readAsBinaryString(file) + // } + } + // request.post(upload, { + // body: { + // test: "DEAR GOD PLEASE SEND! (NEITHER)", + // }, + // json: true + // }) } } } diff --git a/src/server/index.ts b/src/server/index.ts index 4c2e09661..0d0b65b22 100644 --- a/src/server/index.ts +++ b/src/server/index.ts @@ -4,6 +4,7 @@ import * as webpack from 'webpack' import * as wdm from 'webpack-dev-middleware'; import * as whm from 'webpack-hot-middleware'; import * as path from 'path' +import * as formidable from 'formidable' import * as passport from 'passport'; import { MessageStore, Message, SetFieldArgs, GetFieldArgs, Transferable } from "./Message"; import { Client } from './Client'; @@ -74,6 +75,27 @@ app.post("/signup", postSignup); app.get("/login", getLogin); app.post("/login", postLogin); +// IMAGE UPLOADING HANDLER +app.post("/upload", (req, res, err) => { + let form = new formidable.IncomingForm() + form.uploadDir = __dirname + "/public/files/" + form.keepExtensions = true + // let path = req.body.path; + console.log("upload") + form.parse(req, (err, fields, files) => { + console.log("parsing") + let names: any[] = []; + for (const name in files) { + let file = files[name]; + names.push(`/files/` + path.basename(file.path)); + } + res.send(names); + }); +}) + +app.use(express.static(__dirname + '/public')); +app.use('/images', express.static(__dirname + '/public')) + let FieldStore: ObservableMap<FieldId, Field> = new ObservableMap(); // define a route handler for the default home page |