Upload directory of images

We can now upload directory containing the images we want to upload. They'll be added to the server's `uploads/` directory. Closes scorelab#272
2knal · Mar 1, 2020 · 8cb5497 · 8cb5497
1 parent 6c99ed3
commit 8cb5497
Show file tree

Hide file tree

Showing 5 changed files with 236 additions and 133 deletions.
diff --git a/labellab-client/src/components/labeller/index.js b/labellab-client/src/components/labeller/index.js
@@ -116,9 +116,11 @@ class LabelingLoader extends Component {
             labels={lab}
             labelData={(img && img.labelData) || {}}
             imageUrl={
+              'http://' +
               process.env.REACT_APP_HOST +
+              ':' +
               process.env.REACT_APP_SERVER_PORT +
-              `/static/uploads/${image.imageUrl}?${Date.now()}`
+              (image.directory.length > 0 ? `/static/uploads/${image.directory}/${image.imageUrl}?${Date.now()}` :`/static/uploads/${image.imageUrl}?${Date.now()}`)
             }
             demo={false}
             {...props}

diff --git a/labellab-client/src/components/project/images.js b/labellab-client/src/components/project/images.js
@@ -16,7 +16,11 @@ class ImagesIndex extends Component {
       imageNames: [],
       projectId: '',
       showform: false,
-      format: ''
+      format: '',
+      directoryName: '',
+      directoryImageNames: [],
+      directoryImageFormats: [],
+      directoryImages: []
     }
   }
   handleImageChange = e => {
@@ -38,21 +42,63 @@ class ImagesIndex extends Component {
       showform: !this.state.showform
     })
   }
+  handleAddDirectory = e => {
+    e.preventDefault()
+    const directoryInput = document.getElementById("directory-embedpollfileinput")
+
+    Array.from(directoryInput.files).forEach(file => {
+      const reader = new FileReader()
+      // Validating file type to be image
+      const directoryName = file.webkitRelativePath.split('/')[0]
+      if (file.type.startsWith('image')) {
+        reader.onloadend = () => {
+          this.setState({
+            directoryName,
+            directoryImages: [...this.state.directoryImages, reader.result],
+            directoryImageNames: [...this.state.directoryImageNames, file.name],
+            directoryImageFormats: [...this.state.directoryImageFormats, file.type]
+          })
+        }
+        reader.readAsDataURL(file)
+      }
+    });
+    this.setState({
+      showform: !this.state.showform
+    })
+  }
   handleSubmit = e => {
     e.preventDefault()
     const { project, fetchProject, submitImage } = this.props
-    const { imageNames, images, format } = this.state
-    let data = {
-      imageNames: imageNames,
-      images: images,
-      projectId: project.projectId,
-      format: format
+    const { imageName, image, format } = this.state
+    const { directoryName, directoryImageNames, directoryImages, directoryImageFormats } = this.state
+    let data = {}
+    if (this.state.imageName) {
+      data = {
+        imageName,
+        image,
+        projectId: project.projectId,
+        format
+      }
+    } else if (this.state.directoryName) {
+      data = {
+        directoryName,
+        directoryImages,
+        directoryImageNames,
+        directoryImageFormats,
+        projectId: project.projectId
+      }
     }
     submitImage(data, () => {
       this.setState({
         showform: false,
-        images: [],
-        imageNames: []
+        image: '',
+        file: '',
+        format: '',
+        imageName: '',
+        directoryImageNames: [],
+        directoryImages: [],
+        directoryImageFormats: [],
+        directoryName: ''
       })
       fetchProject(project.projectId)
     })
@@ -100,25 +146,37 @@ class ImagesIndex extends Component {
             Add Image
           </label>
         </div>
-
+        <div>
+          <input
+            type="file" 
+            webkitdirectory="true"
+            mozdirectory="true"
+            onChange={this.handleAddDirectory}
+            className="image-file-input"
+            id="directory-embedpollfileinput"
+          />
+          <label
+            htmlFor="directory-embedpollfileinput"
+            className="ui medium primary left floated button custom-margin"
+          >
+            Add Directory
+          </label>
+        </div>
         {showform ? (
           <Form
             className="file-submit-form"
             encType="multiple/form-data"
             onSubmit={this.handleSubmit}
           >
-            {this.state.images.length == 1 && (
-              <Form.Field>
-                <label>Image Name</label>
-                <input
-                  name="imageName"
-                  value={imageName}
-                  onChange={this.handleNameChange}
-                  placeholder="Image Name"
-                />
-              </Form.Field>
-            )}
-
+            <Form.Field>
+              <label>{this.state.imageName ? 'Image': 'Directory'} Name</label>
+              <input
+                name={this.state.imageName ? 'imageName': 'directoryName'}
+                value={this.state.imageName ? this.state.imageName: this.state.directoryName}
+                onChange={this.handleChange}
+                placeholder="Image Name"
+              />
+            </Form.Field>
             <Button loading={imageActions.isposting} type="submit">
               Submit
             </Button>
@@ -134,6 +192,7 @@ class ImagesIndex extends Component {
           <Table.Header className="image-table-header">
             <Table.Row className="flex image-table-row-back">
               <Table.HeaderCell style={columnStyles[0]}>ID</Table.HeaderCell>
+              <Table.HeaderCell style={columnStyles[1]}>Directory</Table.HeaderCell>
               <Table.HeaderCell style={columnStyles[1]}>
                 Image Link
               </Table.HeaderCell>
@@ -209,18 +268,16 @@ const columnStyles = [
 
 const Row = ({ image, projectId, style, onDelete, imageId }) => (
   <Table.Row style={{ ...style, display: 'flex' }}>
-    <Table.Cell style={columnStyles[0]}>
-      {imageId + 1}
-      {image.labelled ? <Icon name="checkmark green"></Icon> : null}
-    </Table.Cell>
+    <Table.Cell style={columnStyles[0]}>{imageId + 1}</Table.Cell>
+    <Table.Cell style={columnStyles[1]}><i class="folder icon"></i>{ image.directory ? image.directory: null }</Table.Cell>
     <Table.Cell style={columnStyles[1]}>
       <a
         href={
           'http://' +
           process.env.REACT_APP_HOST +
           ':' +
           process.env.REACT_APP_SERVER_PORT +
-          `/static/uploads/${image.imageUrl}?${Date.now()}`
+          (image.directory.length > 0 ? `/static/uploads/${image.directory}/${image.imageUrl}?${Date.now()}` :`/static/uploads/${image.imageUrl}?${Date.now()}`)
         }
       >
         {image.imageName}

diff --git a/labellab-server/app.js b/labellab-server/app.js
@@ -26,8 +26,8 @@ if (process.env.GITHUB_CLIENT_ID) {
 
 app.use(logger('dev'))
 app.use(cors())
-app.use(express.json({ limit: '10mb' }))
-app.use(express.urlencoded({ extended: false, limit: '10mb' }))
+app.use(express.json({ limit: '50mb' }))
+app.use(express.urlencoded({ extended: true, limit: '50mb' }))
 app.use(cookieParser())
 app.set('/views', path.join(__dirname, 'views'))
 app.engine('html', require('ejs').renderFile)