fix(FileUploaderDropContainer): pass through empty accept attr (#4681)

carbon-design-system · Nov 19, 2019 · aa46d5d · aa46d5d
1 parent 980b550
commit aa46d5d
Show file tree

Hide file tree

Showing 7 changed files with 10,866 additions and 13 deletions.
diff --git a/packages/components/src/components/file-uploader/_file-uploader.scss b/packages/components/src/components/file-uploader/_file-uploader.scss
@@ -52,6 +52,7 @@
     margin-bottom: $carbon--spacing-03;
     display: inline-block;
     width: 100%;
+    max-width: rem(320px);
     color: $link-01;
     outline: none;
     transition: $duration--fast-02 motion(standard, productive);
@@ -260,7 +261,6 @@
     align-items: flex-start;
     justify-content: space-between;
     height: rem(96px);
-    max-width: rem(320px);
     padding: $carbon--spacing-05;
     overflow: hidden;
     border: 1px dashed $ui-04;

diff --git a/packages/react/examples/drag-and-drop-file-uploader/.gitignore b/packages/react/examples/drag-and-drop-file-uploader/.gitignore
@@ -0,0 +1,21 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/packages/react/examples/drag-and-drop-file-uploader/package.json b/packages/react/examples/drag-and-drop-file-uploader/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "drag-and-drop-file-uploader",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "carbon-components": "10.7.0",
+    "carbon-components-react": "7.7.0",
+    "react": "16.10.2",
+    "react-dom": "16.10.2",
+    "react-scripts": "3.2.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/packages/react/examples/drag-and-drop-file-uploader/public/index.html b/packages/react/examples/drag-and-drop-file-uploader/public/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="#000000" />
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/carbon-components/css/carbon-components.min.css"
+    />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/packages/react/examples/drag-and-drop-file-uploader/src/index.js b/packages/react/examples/drag-and-drop-file-uploader/src/index.js
@@ -0,0 +1,147 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, { useState, useCallback } from 'react';
+import { render } from 'react-dom';
+import { settings } from 'carbon-components';
+import {
+  FileUploaderItem,
+  FileUploaderDropContainer,
+  FormItem,
+} from 'carbon-components-react';
+
+let lastId = 0;
+
+function uid(prefix = 'id') {
+  lastId++;
+  return `${prefix}${lastId}`;
+}
+const { prefix } = settings;
+
+function ExampleDropContainerApp(props) {
+  const [files, setFiles] = useState([]);
+  const uploadFile = async fileToUpload => {
+    // file size validation
+    if (fileToUpload.size > 512000) {
+      const updatedFile = {
+        ...fileToUpload,
+        status: 'edit',
+        iconDescription: 'Delete file',
+        invalid: true,
+        errorSubject: 'File size exceeds limit',
+        errorBody: '500kb max file size. Select a new file and try again.',
+      };
+      setFiles(files =>
+        files.map(file =>
+          file.uuid === fileToUpload.uuid ? updatedFile : file
+        )
+      );
+      return;
+    }
+    try {
+      const response = await fetch(
+        'https://www.mocky.io/v2/5185415ba171ea3a00704eed?mocky-delay=1000ms',
+        {
+          method: 'POST',
+          mode: 'cors',
+          body: fileToUpload,
+        }
+      );
+      if (!response.ok) {
+        throw new Error('Network response was not ok');
+      }
+      const updatedFile = {
+        ...fileToUpload,
+        status: 'complete',
+        iconDescription: 'Upload complete',
+      };
+      setFiles(files =>
+        files.map(file =>
+          file.uuid === fileToUpload.uuid ? updatedFile : file
+        )
+      );
+
+      // show x icon after 1 second
+      setTimeout(() => {
+        const updatedFile = {
+          ...fileToUpload,
+          status: 'edit',
+          iconDescription: 'Remove file',
+        };
+        setFiles(files =>
+          files.map(file =>
+            file.uuid === fileToUpload.uuid ? updatedFile : file
+          )
+        );
+      }, 1000);
+    } catch (error) {
+      const updatedFile = {
+        ...fileToUpload,
+        status: 'edit',
+        iconDescription: 'Upload failed',
+        invalid: true,
+      };
+      setFiles(files =>
+        files.map(file => (file === fileToUpload ? updatedFile : file))
+      );
+      console.log(error);
+    }
+  };
+  const onAddFiles = useCallback(
+    (evt, { addedFiles }) => {
+      evt.stopPropagation();
+      const newFiles = addedFiles.map(file => ({
+        uuid: uid(),
+        name: file.name,
+        size: file.size,
+        status: 'uploading',
+        iconDescription: 'Uploading',
+      }));
+      props.multiple
+        ? setFiles([...files, ...newFiles])
+        : setFiles([...files, newFiles[0]]);
+      newFiles.forEach(uploadFile);
+    },
+    [files, props.multiple]
+  );
+  const handleFileUploaderItemClick = useCallback(
+    (evt, { uuid: clickedUuid }) =>
+      setFiles(files.filter(({ uuid }) => clickedUuid !== uuid)),
+    [files]
+  );
+  return (
+    <FormItem>
+      <strong className={`${prefix}--file--label`}>Account photo</strong>
+      <p className={`${prefix}--label-description`}>
+        Only .jpg and .png files. 500kb max file size
+      </p>
+      <FileUploaderDropContainer {...props} onAddFiles={onAddFiles} />
+      <div className="uploaded-files" style={{ width: '100%' }}>
+        {files.map(
+          ({ uuid, name, size, status, iconDescription, invalid, ...rest }) => (
+            <FileUploaderItem
+              key={uid()}
+              uuid={uuid}
+              name={name}
+              size={size}
+              status={status}
+              iconDescription={iconDescription}
+              invalid={invalid}
+              onDelete={handleFileUploaderItemClick}
+              {...rest}
+            />
+          )
+        )}
+      </div>
+    </FormItem>
+  );
+}
+
+render(
+  <ExampleDropContainerApp accept={['image/jpeg', 'image/png']} />,
+  document.getElementById('root')
+);