1 files changed, 54 insertions, 0 deletions
diff --git a/app/javascript/flavours/glitch/features/composer/upload_form/index.js b/app/javascript/flavours/glitch/features/composer/upload_form/index.js
new file mode 100644
index 000000000..ab46a3046
--- /dev/null
+++ b/app/javascript/flavours/glitch/features/composer/upload_form/index.js
@@ -0,0 +1,54 @@
+//  Package imports.
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+
+//  Components.
+import ComposerUploadFormItem from './item';
+import ComposerUploadFormProgress from './progress';
+
+//  The component.
+export default function ComposerUploadForm ({
+  active,
+  intl,
+  media,
+  onChangeDescription,
+  onRemove,
+  progress,
+}) {
+  const computedClass = classNames('composer--upload_form', { uploading: active });
+
+  //  We need `media` in order to be able to render.
+  if (!media) {
+    return null;
+  }
+
+  //  The result.
+  return (
+    <div className={computedClass}>
+      {active ? <ComposerUploadFormProgress progress={progress} /> : null}
+      {media.map(item => (
+        <ComposerUploadFormItem
+          description={item.get('description')}
+          key={item.get('id')}
+          id={item.get('id')}
+          intl={intl}
+          preview={item.get('preview_url')}
+          onChangeDescription={onChangeDescription}
+          onRemove={onRemove}
+        />
+      ))}
+    </div>
+  );
+}
+
+//  Props.
+ComposerUploadForm.propTypes = {
+  active: PropTypes.bool,
+  intl: PropTypes.object.isRequired,
+  media: ImmutablePropTypes.list,
+  onChangeDescription: PropTypes.func,
+  onRemove: PropTypes.func,
+  progress: PropTypes.number,
+};