From 37cff0cdf99e55f93e9f9067047395e94199ade7 Mon Sep 17 00:00:00 2001
From: Mateusz Podlasin <mateusz@stoplight.io>
Date: Thu, 7 Jan 2021 16:22:25 +0100
Subject: [PATCH 1/9] feat: add send file button to TryIt

---
 .../operations/multipart-formdata-post.ts        |  4 ++++
 .../src/components/TryIt/ParameterEditor.tsx     | 16 ++++++++++++++--
 .../src/components/TryIt/parameter-utils.ts      |  8 ++++++++
 3 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/packages/elements/src/__fixtures__/operations/multipart-formdata-post.ts b/packages/elements/src/__fixtures__/operations/multipart-formdata-post.ts
index afc164ec2..8ace5b522 100644
--- a/packages/elements/src/__fixtures__/operations/multipart-formdata-post.ts
+++ b/packages/elements/src/__fixtures__/operations/multipart-formdata-post.ts
@@ -34,6 +34,10 @@ export const httpOperation: IHttpOperation = {
                 type: 'string',
                 enum: ['a', 'b', 'c'],
               },
+              someFile: {
+                type: 'string',
+                format: 'binary'
+              },
             },
             required: ['name', 'completed'],
           },
diff --git a/packages/elements/src/components/TryIt/ParameterEditor.tsx b/packages/elements/src/components/TryIt/ParameterEditor.tsx
index fa80e1031..81070048b 100644
--- a/packages/elements/src/components/TryIt/ParameterEditor.tsx
+++ b/packages/elements/src/components/TryIt/ParameterEditor.tsx
@@ -1,10 +1,11 @@
-import { Flex, Input, Select, Text } from '@stoplight/mosaic';
+import { Button, Flex, Input, Select, Text } from '@stoplight/mosaic';
 import * as React from 'react';
 
 import {
   exampleOptions,
   getPlaceholderForParameter,
   parameterOptions,
+  parameterSupportsFileUpload,
   ParameterSpec,
   selectExampleOption,
 } from './parameter-utils';
@@ -19,6 +20,10 @@ export const ParameterEditor: React.FC<ParameterProps> = ({ parameter, value, on
   const parameterValueOptions = parameterOptions(parameter);
   const examples = exampleOptions(parameter);
   const selectedExample = examples?.find(e => e.value === value) ?? selectExampleOption;
+
+  const supportsFileUpload = parameterSupportsFileUpload(parameter);
+  const [files, setFiles] = React.useState<File[] | null>(null);
+
   return (
     <Flex align="center" key={parameter.name}>
       <Input appearance="minimal" readOnly value={parameter.name} />
@@ -41,8 +46,9 @@ export const ParameterEditor: React.FC<ParameterProps> = ({ parameter, value, on
             placeholder={getPlaceholderForParameter(parameter)}
             type={parameter.schema?.type === 'number' ? 'number' : 'text'}
             required
-            value={value ?? ''}
+            value={files ? files.map(file => file.name).join(', ') : value ?? ''}
             onChange={onChange}
+            disabled={supportsFileUpload}
           />
           {examples && (
             <Select
@@ -53,6 +59,12 @@ export const ParameterEditor: React.FC<ParameterProps> = ({ parameter, value, on
               onChange={onChange}
             />
           )}
+          {supportsFileUpload && (
+            <div>
+              <label role="button" htmlFor="file-upload">Upload</label>
+              <input onChange={e => setFiles(Array.from(e.currentTarget.files ?? []))} type="file" hidden id="file-upload" />
+            </div>
+          )}
         </Flex>
       )}
     </Flex>
diff --git a/packages/elements/src/components/TryIt/parameter-utils.ts b/packages/elements/src/components/TryIt/parameter-utils.ts
index 688bcca18..0c6591cce 100644
--- a/packages/elements/src/components/TryIt/parameter-utils.ts
+++ b/packages/elements/src/components/TryIt/parameter-utils.ts
@@ -29,11 +29,19 @@ export function exampleOptions(parameter: ParameterSpec) {
     : null;
 }
 
+export function parameterSupportsFileUpload(parameter: ParameterSpec) {
+  return parameter.schema?.type === 'string' && parameter.schema.format === 'binary';
+}
+
 export function exampleValue(example: INodeExample | INodeExternalExample) {
   return 'value' in example ? String(example.value) : String(example.externalValue);
 }
 
 export function getPlaceholderForParameter(parameter: ParameterSpec) {
+  if(parameterSupportsFileUpload(parameter)) {
+    return 'pick a file';
+  }
+
   const defaultOrType = retrieveDefaultFromSchema(parameter) ?? parameter.schema?.type;
   return defaultOrType !== undefined ? String(defaultOrType) : undefined;
 }

From b03d22360995db75599becb49100288e1dd721e4 Mon Sep 17 00:00:00 2001
From: Mateusz Podlasin <mateusz@stoplight.io>
Date: Mon, 11 Jan 2021 10:15:03 +0100
Subject: [PATCH 2/9] feat: add file to request body types

---
 .../components/TryIt/OperationParameters.tsx  |  7 +++--
 .../src/components/TryIt/ParameterEditor.tsx  | 27 ++++++++++++-------
 .../elements/src/components/TryIt/index.tsx   |  6 ++---
 3 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/packages/elements/src/components/TryIt/OperationParameters.tsx b/packages/elements/src/components/TryIt/OperationParameters.tsx
index 379bccc0b..a3b548f8f 100644
--- a/packages/elements/src/components/TryIt/OperationParameters.tsx
+++ b/packages/elements/src/components/TryIt/OperationParameters.tsx
@@ -11,7 +11,7 @@ type OperationParameters = Record<'path' | 'query' | 'headers', readonly Paramet
 interface OperationParametersProps {
   operationParameters: OperationParameters;
   values: Dictionary<string, string>;
-  onChangeValues: (newValues: Dictionary<string, string>) => void;
+  onChangeValues: (newValues: Dictionary<string | File, string>) => void;
 }
 
 export const OperationParameters: React.FC<OperationParametersProps> = ({
@@ -21,9 +21,8 @@ export const OperationParameters: React.FC<OperationParametersProps> = ({
 }) => {
   const parameters = flattenParameters(operationParameters);
 
-  const onChange = (name: string) => (e: React.FormEvent<HTMLSelectElement> | React.ChangeEvent<HTMLInputElement>) => {
-    const newValue = e.currentTarget.value;
-    onChangeValues({ ...values, [name]: newValue });
+  const onChange = (name: string) => (value: string | File) => {
+    onChangeValues({ ...values, [name]: value });
   };
 
   return (
diff --git a/packages/elements/src/components/TryIt/ParameterEditor.tsx b/packages/elements/src/components/TryIt/ParameterEditor.tsx
index 81070048b..c8caa9779 100644
--- a/packages/elements/src/components/TryIt/ParameterEditor.tsx
+++ b/packages/elements/src/components/TryIt/ParameterEditor.tsx
@@ -1,4 +1,4 @@
-import { Button, Flex, Input, Select, Text } from '@stoplight/mosaic';
+import { Flex, Input, Select, Text } from '@stoplight/mosaic';
 import * as React from 'react';
 
 import {
@@ -12,8 +12,8 @@ import {
 
 interface ParameterProps {
   parameter: ParameterSpec;
-  value: string;
-  onChange: (e: React.FormEvent<HTMLSelectElement> | React.ChangeEvent<HTMLInputElement>) => void;
+  value: string | File;
+  onChange: (parameterValue: string | File) => void;
 }
 
 export const ParameterEditor: React.FC<ParameterProps> = ({ parameter, value, onChange }) => {
@@ -22,7 +22,14 @@ export const ParameterEditor: React.FC<ParameterProps> = ({ parameter, value, on
   const selectedExample = examples?.find(e => e.value === value) ?? selectExampleOption;
 
   const supportsFileUpload = parameterSupportsFileUpload(parameter);
-  const [files, setFiles] = React.useState<File[] | null>(null);
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.currentTarget.files?.[0];
+
+    if (file === undefined) return;
+
+    onChange(file);
+  }
 
   return (
     <Flex align="center" key={parameter.name}>
@@ -33,8 +40,8 @@ export const ParameterEditor: React.FC<ParameterProps> = ({ parameter, value, on
           flexGrow
           aria-label={parameter.name}
           options={parameterValueOptions}
-          value={value}
-          onChange={onChange}
+          value={typeof value === 'string' ? value : ''}
+          onChange={e => onChange(e.currentTarget.value)}
         />
       ) : (
         <Flex flexGrow>
@@ -46,8 +53,8 @@ export const ParameterEditor: React.FC<ParameterProps> = ({ parameter, value, on
             placeholder={getPlaceholderForParameter(parameter)}
             type={parameter.schema?.type === 'number' ? 'number' : 'text'}
             required
-            value={files ? files.map(file => file.name).join(', ') : value ?? ''}
-            onChange={onChange}
+            value={typeof value === 'string' ? value : value.name}
+            onChange={e => onChange(e.currentTarget.value)}
             disabled={supportsFileUpload}
           />
           {examples && (
@@ -56,13 +63,13 @@ export const ParameterEditor: React.FC<ParameterProps> = ({ parameter, value, on
               flexGrow
               value={selectedExample.value}
               options={examples}
-              onChange={onChange}
+              onChange={e => onChange(e.currentTarget.value)}
             />
           )}
           {supportsFileUpload && (
             <div>
               <label role="button" htmlFor="file-upload">Upload</label>
-              <input onChange={e => setFiles(Array.from(e.currentTarget.files ?? []))} type="file" hidden id="file-upload" />
+              <input onChange={handleFileChange} type="file" hidden id="file-upload" />
             </div>
           )}
         </Flex>
diff --git a/packages/elements/src/components/TryIt/index.tsx b/packages/elements/src/components/TryIt/index.tsx
index 13bfcbbc6..2ea549dbd 100644
--- a/packages/elements/src/components/TryIt/index.tsx
+++ b/packages/elements/src/components/TryIt/index.tsx
@@ -36,7 +36,7 @@ export const TryIt: React.FC<TryItProps> = ({ httpOperation }) => {
   };
   const allParameters = flattenParameters(operationParameters);
 
-  const [parameterValues, setParameterValues] = React.useState<Dictionary<string, string>>(
+  const [parameterValues, setParameterValues] = React.useState<Dictionary<string | File, string>>(
     initialParameterValues(allParameters),
   );
 
@@ -127,7 +127,7 @@ const ResponseError: React.FC<{ state: ErrorState }> = ({ state }) => (
 
 interface BuildFetchRequestInput {
   httpOperation: IHttpOperation;
-  parameterValues: Dictionary<string, string>;
+  parameterValues: Dictionary<string | File, string>;
   bodyParameterValues?: Dictionary<string, string>;
 }
 
@@ -140,7 +140,7 @@ function buildFetchRequest({
 
   const queryParams = httpOperation.request?.query
     ?.map(param => [param.name, parameterValues[param.name] ?? ''])
-    .filter(([_, value]) => value.length > 0);
+    .filter(([_, value]) => typeof value !== 'string' || value.length > 0);
 
   const expandedPath = uriExpand(httpOperation.path, parameterValues);
   const url = new URL(server + expandedPath);

From 9abf5113f7548db461f941285eb22045f50cf36c Mon Sep 17 00:00:00 2001
From: Mateusz Podlasin <mateusz@stoplight.io>
Date: Tue, 12 Jan 2021 14:03:47 +0100
Subject: [PATCH 3/9] feat: cleanup operation parameters and alter only body
 paramteres types

---
 .../src/components/TryIt/FormDataBody.tsx     |  7 +++--
 .../components/TryIt/OperationParameters.tsx  |  4 +--
 .../src/components/TryIt/ParameterEditor.tsx  | 28 +++++++++++++++----
 .../elements/src/components/TryIt/index.tsx   |  8 +++---
 .../components/TryIt/request-body-utils.ts    | 10 ++++---
 5 files changed, 39 insertions(+), 18 deletions(-)

diff --git a/packages/elements/src/components/TryIt/FormDataBody.tsx b/packages/elements/src/components/TryIt/FormDataBody.tsx
index c6ac9e5fc..a2a480fc8 100644
--- a/packages/elements/src/components/TryIt/FormDataBody.tsx
+++ b/packages/elements/src/components/TryIt/FormDataBody.tsx
@@ -7,8 +7,8 @@ import { ParameterEditor } from './ParameterEditor';
 
 interface FormDataBodyProps {
   specification: IMediaTypeContent;
-  values: Dictionary<string, string>;
-  onChangeValues: (newValues: Dictionary<string, string>) => void;
+  values: Dictionary<string | File, string>;
+  onChangeValues: (newValues: Dictionary<string | File, string>) => void;
 }
 
 export const FormDataBody: React.FC<FormDataBodyProps> = ({ specification, values, onChangeValues }) => {
@@ -31,10 +31,11 @@ export const FormDataBody: React.FC<FormDataBodyProps> = ({ specification, value
       <Panel.Content className="sl-overflow-y-auto OperationParametersContent">
         {Object.entries(parameters).map(([name, schema]) => (
           <ParameterEditor
+            withFileUpload
             key={name}
             parameter={{ name, schema, examples: schema?.examples }}
             value={values[name]}
-            onChange={e => onChangeValues({ ...values, [name]: e.currentTarget.value })}
+            onChange={newValue => onChangeValues({ ...values, [name]: newValue })}
           />
         ))}
       </Panel.Content>
diff --git a/packages/elements/src/components/TryIt/OperationParameters.tsx b/packages/elements/src/components/TryIt/OperationParameters.tsx
index a3b548f8f..8ad05483f 100644
--- a/packages/elements/src/components/TryIt/OperationParameters.tsx
+++ b/packages/elements/src/components/TryIt/OperationParameters.tsx
@@ -11,7 +11,7 @@ type OperationParameters = Record<'path' | 'query' | 'headers', readonly Paramet
 interface OperationParametersProps {
   operationParameters: OperationParameters;
   values: Dictionary<string, string>;
-  onChangeValues: (newValues: Dictionary<string | File, string>) => void;
+  onChangeValues: (newValues: Dictionary<string, string>) => void;
 }
 
 export const OperationParameters: React.FC<OperationParametersProps> = ({
@@ -21,7 +21,7 @@ export const OperationParameters: React.FC<OperationParametersProps> = ({
 }) => {
   const parameters = flattenParameters(operationParameters);
 
-  const onChange = (name: string) => (value: string | File) => {
+  const onChange = (name: string) => (value: string) => {
     onChangeValues({ ...values, [name]: value });
   };
 
diff --git a/packages/elements/src/components/TryIt/ParameterEditor.tsx b/packages/elements/src/components/TryIt/ParameterEditor.tsx
index c8caa9779..5aa0bfda1 100644
--- a/packages/elements/src/components/TryIt/ParameterEditor.tsx
+++ b/packages/elements/src/components/TryIt/ParameterEditor.tsx
@@ -10,20 +10,38 @@ import {
   selectExampleOption,
 } from './parameter-utils';
 
-interface ParameterProps {
+type ParameterProps = ParameterPropsWithFileUpload | ParameterPropsWithoutFileUpload;
+
+interface ParameterPropsWithoutFileUpload {
+  withFileUpload?: false;
+  parameter: ParameterSpec;
+  value: string;
+  onChange: (parameterValue: string) => void;
+}
+
+interface ParameterPropsWithFileUpload {
+  withFileUpload: true;
   parameter: ParameterSpec;
   value: string | File;
   onChange: (parameterValue: string | File) => void;
 }
 
-export const ParameterEditor: React.FC<ParameterProps> = ({ parameter, value, onChange }) => {
+export const supportsFileUpload = (props: ParameterProps): props is ParameterPropsWithFileUpload => {
+  return props.withFileUpload ?? false;
+}
+
+export const ParameterEditor: React.FC<ParameterProps> = (props) => {
+  const parameterSupportsFileUpload = supportsFileUpload(props);
+  const { parameter, value, onChange } = props;
   const parameterValueOptions = parameterOptions(parameter);
   const examples = exampleOptions(parameter);
   const selectedExample = examples?.find(e => e.value === value) ?? selectExampleOption;
 
-  const supportsFileUpload = parameterSupportsFileUpload(parameter);
-
   const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (!supportsFileUpload(props)) return;
+
+    const onChange = props.onChange;
+
     const file = event.currentTarget.files?.[0];
 
     if (file === undefined) return;
@@ -55,7 +73,7 @@ export const ParameterEditor: React.FC<ParameterProps> = ({ parameter, value, on
             required
             value={typeof value === 'string' ? value : value.name}
             onChange={e => onChange(e.currentTarget.value)}
-            disabled={supportsFileUpload}
+            disabled={parameterSupportsFileUpload}
           />
           {examples && (
             <Select
diff --git a/packages/elements/src/components/TryIt/index.tsx b/packages/elements/src/components/TryIt/index.tsx
index 2ea549dbd..ee54df343 100644
--- a/packages/elements/src/components/TryIt/index.tsx
+++ b/packages/elements/src/components/TryIt/index.tsx
@@ -10,7 +10,7 @@ import { getHttpCodeColor } from '../../utils/http';
 import { FormDataBody } from './FormDataBody';
 import { flattenParameters, OperationParameters } from './OperationParameters';
 import { initialParameterValues } from './parameter-utils';
-import { createRequestBody, useBodyParameterState } from './request-body-utils';
+import { BodyParameterValues, createRequestBody, useBodyParameterState } from './request-body-utils';
 
 export interface TryItProps {
   httpOperation: IHttpOperation;
@@ -36,7 +36,7 @@ export const TryIt: React.FC<TryItProps> = ({ httpOperation }) => {
   };
   const allParameters = flattenParameters(operationParameters);
 
-  const [parameterValues, setParameterValues] = React.useState<Dictionary<string | File, string>>(
+  const [parameterValues, setParameterValues] = React.useState<Dictionary<string, string>>(
     initialParameterValues(allParameters),
   );
 
@@ -127,8 +127,8 @@ const ResponseError: React.FC<{ state: ErrorState }> = ({ state }) => (
 
 interface BuildFetchRequestInput {
   httpOperation: IHttpOperation;
-  parameterValues: Dictionary<string | File, string>;
-  bodyParameterValues?: Dictionary<string, string>;
+  parameterValues: Dictionary<string, string>;
+  bodyParameterValues?: BodyParameterValues;
 }
 
 function buildFetchRequest({
diff --git a/packages/elements/src/components/TryIt/request-body-utils.ts b/packages/elements/src/components/TryIt/request-body-utils.ts
index b55887c7e..e9bf48404 100644
--- a/packages/elements/src/components/TryIt/request-body-utils.ts
+++ b/packages/elements/src/components/TryIt/request-body-utils.ts
@@ -3,6 +3,8 @@ import * as React from 'react';
 
 import { initialParameterValues } from './parameter-utils';
 
+export type BodyParameterValues = Record<string, string | File>;
+
 export const isFormDataContent = (content: IMediaTypeContent) =>
   isUrlEncodedContent(content) || isMultipartContent(content);
 
@@ -16,7 +18,7 @@ function isMultipartContent(content: IMediaTypeContent) {
 
 export function createRequestBody(
   httpOperation: IHttpOperation,
-  bodyParameterValues: Record<string, string> | undefined,
+  bodyParameterValues: Record<string, string | File> | undefined,
 ) {
   const bodySpecification = httpOperation.request?.body?.contents?.[0];
   if (!bodySpecification) return undefined;
@@ -27,12 +29,12 @@ export function createRequestBody(
 
 type RequestBodyCreator = (options: {
   httpOperation: IHttpOperation;
-  bodyParameterValues?: Record<string, string>;
+  bodyParameterValues?: Record<string, string | File>;
   rawBodyValue?: string;
 }) => BodyInit;
 
 const createUrlEncodedRequestBody: RequestBodyCreator = ({ bodyParameterValues = {} }) => {
-  return new URLSearchParams(bodyParameterValues);
+  return new URLSearchParams(bodyParameterValues as any /* TODO: change!!!! */);
 };
 
 const createMultipartRequestBody: RequestBodyCreator = ({ bodyParameterValues = {} }) => {
@@ -67,7 +69,7 @@ export const useBodyParameterState = (httpOperation: IHttpOperation) => {
     return initialParameterValues(parameters);
   }, [isFormDataBody, bodySpecification]);
 
-  const [bodyParameterValues, setBodyParameterValues] = React.useState<Record<string, string>>(initialState);
+  const [bodyParameterValues, setBodyParameterValues] = React.useState<Record<string, string | File>>(initialState);
 
   React.useEffect(() => {
     setBodyParameterValues(initialState);

From 761182b2a07d59fe40c1390483214a32e6f1ba91 Mon Sep 17 00:00:00 2001
From: Mateusz Podlasin <mateusz@stoplight.io>
Date: Tue, 12 Jan 2021 16:38:12 +0100
Subject: [PATCH 4/9] feat: separate file sending into its own component

---
 .../TryIt/FileUploadParameterEditors.tsx      | 51 +++++++++++++++++++
 .../src/components/TryIt/FormDataBody.tsx     | 23 ++++++---
 .../src/components/TryIt/ParameterEditor.tsx  | 40 +--------------
 .../src/components/TryIt/parameter-utils.ts   |  4 --
 4 files changed, 70 insertions(+), 48 deletions(-)
 create mode 100644 packages/elements/src/components/TryIt/FileUploadParameterEditors.tsx

diff --git a/packages/elements/src/components/TryIt/FileUploadParameterEditors.tsx b/packages/elements/src/components/TryIt/FileUploadParameterEditors.tsx
new file mode 100644
index 000000000..31501ebd9
--- /dev/null
+++ b/packages/elements/src/components/TryIt/FileUploadParameterEditors.tsx
@@ -0,0 +1,51 @@
+import { Flex, Input, Select, Text } from '@stoplight/mosaic';
+import * as React from 'react';
+
+import {
+  exampleOptions,
+  getPlaceholderForParameter,
+  parameterOptions,
+  parameterSupportsFileUpload,
+  ParameterSpec,
+  selectExampleOption,
+} from './parameter-utils';
+
+interface FileUploadParamterEditorProps {
+  parameter: ParameterSpec;
+  value: File;
+  onChange: (parameterValue: File) => void;
+}
+
+export const FileUploadParamterEditor: React.FC<FileUploadParamterEditorProps> = ({ parameter, value, onChange }) => {
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.currentTarget.files?.[0];
+
+    if (file === undefined) return;
+
+    onChange(file);
+  }
+
+  return (
+    <Flex align="center" key={parameter.name}>
+      <Input appearance="minimal" readOnly value={parameter.name} />
+      <Text mx={3}>:</Text>
+        <Flex flexGrow>
+            <Input
+                style={{ paddingLeft: 15 }}
+                aria-label={parameter.name}
+                appearance="minimal"
+                flexGrow
+                placeholder={getPlaceholderForParameter(parameter)}
+                type='text'
+                required
+                value={value.name}
+                disabled
+            />
+            <div>
+                <label role="button" htmlFor="file-upload">Upload</label>
+                <input onChange={handleFileChange} type="file" hidden id="file-upload" />
+            </div>
+        </Flex>
+    </Flex>
+  );
+};
diff --git a/packages/elements/src/components/TryIt/FormDataBody.tsx b/packages/elements/src/components/TryIt/FormDataBody.tsx
index a2a480fc8..f7f8b6ff0 100644
--- a/packages/elements/src/components/TryIt/FormDataBody.tsx
+++ b/packages/elements/src/components/TryIt/FormDataBody.tsx
@@ -2,6 +2,8 @@ import { safeStringify } from '@stoplight/json';
 import { Panel } from '@stoplight/mosaic';
 import { Dictionary, IMediaTypeContent } from '@stoplight/types';
 import * as React from 'react';
+import { FileUploadParamterEditor } from './FileUploadParameterEditors';
+import { parameterSupportsFileUpload } from './parameter-utils';
 
 import { ParameterEditor } from './ParameterEditor';
 
@@ -29,13 +31,22 @@ export const FormDataBody: React.FC<FormDataBodyProps> = ({ specification, value
     <Panel defaultIsOpen>
       <Panel.Titlebar>Body</Panel.Titlebar>
       <Panel.Content className="sl-overflow-y-auto OperationParametersContent">
-        {Object.entries(parameters).map(([name, schema]) => (
+        {Object.entries(parameters)
+        .map(([name, schema]) => ({ name, schema, examples: schema?.examples }))
+        .map((parameter) => (
+          parameterSupportsFileUpload(parameter) ?
+          <FileUploadParamterEditor
+            key={parameter.name}
+            parameter={parameter}
+            value={values[parameter.name] as File}
+            onChange={newValue => onChangeValues({ ...values, [parameter.name]: newValue })}
+          />
+          :
           <ParameterEditor
-            withFileUpload
-            key={name}
-            parameter={{ name, schema, examples: schema?.examples }}
-            value={values[name]}
-            onChange={newValue => onChangeValues({ ...values, [name]: newValue })}
+            key={parameter.name}
+            parameter={parameter}
+            value={values[parameter.name] as string}
+            onChange={newValue => onChangeValues({ ...values, [parameter.name]: newValue })}
           />
         ))}
       </Panel.Content>
diff --git a/packages/elements/src/components/TryIt/ParameterEditor.tsx b/packages/elements/src/components/TryIt/ParameterEditor.tsx
index 5aa0bfda1..7f771a89f 100644
--- a/packages/elements/src/components/TryIt/ParameterEditor.tsx
+++ b/packages/elements/src/components/TryIt/ParameterEditor.tsx
@@ -5,50 +5,21 @@ import {
   exampleOptions,
   getPlaceholderForParameter,
   parameterOptions,
-  parameterSupportsFileUpload,
   ParameterSpec,
   selectExampleOption,
 } from './parameter-utils';
-
-type ParameterProps = ParameterPropsWithFileUpload | ParameterPropsWithoutFileUpload;
-
-interface ParameterPropsWithoutFileUpload {
-  withFileUpload?: false;
+interface ParameterProps {
   parameter: ParameterSpec;
   value: string;
   onChange: (parameterValue: string) => void;
 }
 
-interface ParameterPropsWithFileUpload {
-  withFileUpload: true;
-  parameter: ParameterSpec;
-  value: string | File;
-  onChange: (parameterValue: string | File) => void;
-}
-
-export const supportsFileUpload = (props: ParameterProps): props is ParameterPropsWithFileUpload => {
-  return props.withFileUpload ?? false;
-}
-
 export const ParameterEditor: React.FC<ParameterProps> = (props) => {
-  const parameterSupportsFileUpload = supportsFileUpload(props);
   const { parameter, value, onChange } = props;
   const parameterValueOptions = parameterOptions(parameter);
   const examples = exampleOptions(parameter);
   const selectedExample = examples?.find(e => e.value === value) ?? selectExampleOption;
 
-  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    if (!supportsFileUpload(props)) return;
-
-    const onChange = props.onChange;
-
-    const file = event.currentTarget.files?.[0];
-
-    if (file === undefined) return;
-
-    onChange(file);
-  }
-
   return (
     <Flex align="center" key={parameter.name}>
       <Input appearance="minimal" readOnly value={parameter.name} />
@@ -71,9 +42,8 @@ export const ParameterEditor: React.FC<ParameterProps> = (props) => {
             placeholder={getPlaceholderForParameter(parameter)}
             type={parameter.schema?.type === 'number' ? 'number' : 'text'}
             required
-            value={typeof value === 'string' ? value : value.name}
+            value={value}
             onChange={e => onChange(e.currentTarget.value)}
-            disabled={parameterSupportsFileUpload}
           />
           {examples && (
             <Select
@@ -84,12 +54,6 @@ export const ParameterEditor: React.FC<ParameterProps> = (props) => {
               onChange={e => onChange(e.currentTarget.value)}
             />
           )}
-          {supportsFileUpload && (
-            <div>
-              <label role="button" htmlFor="file-upload">Upload</label>
-              <input onChange={handleFileChange} type="file" hidden id="file-upload" />
-            </div>
-          )}
         </Flex>
       )}
     </Flex>
diff --git a/packages/elements/src/components/TryIt/parameter-utils.ts b/packages/elements/src/components/TryIt/parameter-utils.ts
index 0c6591cce..fe3846c22 100644
--- a/packages/elements/src/components/TryIt/parameter-utils.ts
+++ b/packages/elements/src/components/TryIt/parameter-utils.ts
@@ -38,10 +38,6 @@ export function exampleValue(example: INodeExample | INodeExternalExample) {
 }
 
 export function getPlaceholderForParameter(parameter: ParameterSpec) {
-  if(parameterSupportsFileUpload(parameter)) {
-    return 'pick a file';
-  }
-
   const defaultOrType = retrieveDefaultFromSchema(parameter) ?? parameter.schema?.type;
   return defaultOrType !== undefined ? String(defaultOrType) : undefined;
 }

From 6466869cea9018b36e15b56022c51a6cc4d1a0c9 Mon Sep 17 00:00:00 2001
From: Mateusz Podlasin <mateusz@stoplight.io>
Date: Tue, 12 Jan 2021 17:00:51 +0100
Subject: [PATCH 5/9] feat: revert unnecessary changes and add small fixes

---
 .../operations/multipart-formdata-post.ts     |  2 +-
 .../TryIt/FileUploadParameterEditors.tsx      | 44 +++++++++----------
 .../src/components/TryIt/FormDataBody.tsx     | 44 ++++++++++---------
 .../components/TryIt/OperationParameters.tsx  |  5 ++-
 .../src/components/TryIt/ParameterEditor.tsx  | 15 +++----
 .../elements/src/components/TryIt/index.tsx   |  2 +-
 .../components/TryIt/request-body-utils.ts    | 16 +++----
 7 files changed, 64 insertions(+), 64 deletions(-)

diff --git a/packages/elements/src/__fixtures__/operations/multipart-formdata-post.ts b/packages/elements/src/__fixtures__/operations/multipart-formdata-post.ts
index 8ace5b522..c04b07bab 100644
--- a/packages/elements/src/__fixtures__/operations/multipart-formdata-post.ts
+++ b/packages/elements/src/__fixtures__/operations/multipart-formdata-post.ts
@@ -36,7 +36,7 @@ export const httpOperation: IHttpOperation = {
               },
               someFile: {
                 type: 'string',
-                format: 'binary'
+                format: 'binary',
               },
             },
             required: ['name', 'completed'],
diff --git a/packages/elements/src/components/TryIt/FileUploadParameterEditors.tsx b/packages/elements/src/components/TryIt/FileUploadParameterEditors.tsx
index 31501ebd9..aaec2506b 100644
--- a/packages/elements/src/components/TryIt/FileUploadParameterEditors.tsx
+++ b/packages/elements/src/components/TryIt/FileUploadParameterEditors.tsx
@@ -1,13 +1,9 @@
-import { Flex, Input, Select, Text } from '@stoplight/mosaic';
+import { Flex, Input, Text } from '@stoplight/mosaic';
 import * as React from 'react';
 
 import {
-  exampleOptions,
   getPlaceholderForParameter,
-  parameterOptions,
-  parameterSupportsFileUpload,
   ParameterSpec,
-  selectExampleOption,
 } from './parameter-utils';
 
 interface FileUploadParamterEditorProps {
@@ -23,29 +19,31 @@ export const FileUploadParamterEditor: React.FC<FileUploadParamterEditorProps> =
     if (file === undefined) return;
 
     onChange(file);
-  }
+  };
 
   return (
     <Flex align="center" key={parameter.name}>
       <Input appearance="minimal" readOnly value={parameter.name} />
       <Text mx={3}>:</Text>
-        <Flex flexGrow>
-            <Input
-                style={{ paddingLeft: 15 }}
-                aria-label={parameter.name}
-                appearance="minimal"
-                flexGrow
-                placeholder={getPlaceholderForParameter(parameter)}
-                type='text'
-                required
-                value={value.name}
-                disabled
-            />
-            <div>
-                <label role="button" htmlFor="file-upload">Upload</label>
-                <input onChange={handleFileChange} type="file" hidden id="file-upload" />
-            </div>
-        </Flex>
+      <Flex flexGrow>
+        <Input
+          style={{ paddingLeft: 15 }}
+          aria-label={parameter.name}
+          appearance="minimal"
+          flexGrow
+          placeholder={getPlaceholderForParameter(parameter)}
+          type="text"
+          required
+          value={value.name}
+          disabled
+        />
+        <div>
+          <label role="button" htmlFor="file-upload">
+            Upload
+          </label>
+          <input onChange={handleFileChange} type="file" hidden id="file-upload" />
+        </div>
+      </Flex>
     </Flex>
   );
 };
diff --git a/packages/elements/src/components/TryIt/FormDataBody.tsx b/packages/elements/src/components/TryIt/FormDataBody.tsx
index f7f8b6ff0..89da1a91b 100644
--- a/packages/elements/src/components/TryIt/FormDataBody.tsx
+++ b/packages/elements/src/components/TryIt/FormDataBody.tsx
@@ -1,16 +1,17 @@
 import { safeStringify } from '@stoplight/json';
 import { Panel } from '@stoplight/mosaic';
-import { Dictionary, IMediaTypeContent } from '@stoplight/types';
+import { IMediaTypeContent } from '@stoplight/types';
 import * as React from 'react';
+
 import { FileUploadParamterEditor } from './FileUploadParameterEditors';
 import { parameterSupportsFileUpload } from './parameter-utils';
-
 import { ParameterEditor } from './ParameterEditor';
+import { BodyParameterValues } from './request-body-utils';
 
 interface FormDataBodyProps {
   specification: IMediaTypeContent;
-  values: Dictionary<string | File, string>;
-  onChangeValues: (newValues: Dictionary<string | File, string>) => void;
+  values: BodyParameterValues;
+  onChangeValues: (newValues: BodyParameterValues) => void;
 }
 
 export const FormDataBody: React.FC<FormDataBodyProps> = ({ specification, values, onChangeValues }) => {
@@ -32,23 +33,24 @@ export const FormDataBody: React.FC<FormDataBodyProps> = ({ specification, value
       <Panel.Titlebar>Body</Panel.Titlebar>
       <Panel.Content className="sl-overflow-y-auto OperationParametersContent">
         {Object.entries(parameters)
-        .map(([name, schema]) => ({ name, schema, examples: schema?.examples }))
-        .map((parameter) => (
-          parameterSupportsFileUpload(parameter) ?
-          <FileUploadParamterEditor
-            key={parameter.name}
-            parameter={parameter}
-            value={values[parameter.name] as File}
-            onChange={newValue => onChangeValues({ ...values, [parameter.name]: newValue })}
-          />
-          :
-          <ParameterEditor
-            key={parameter.name}
-            parameter={parameter}
-            value={values[parameter.name] as string}
-            onChange={newValue => onChangeValues({ ...values, [parameter.name]: newValue })}
-          />
-        ))}
+          .map(([name, schema]) => ({ name, schema, examples: schema?.examples }))
+          .map(parameter =>
+            parameterSupportsFileUpload(parameter) ? (
+              <FileUploadParamterEditor
+                key={parameter.name}
+                parameter={parameter}
+                value={values[parameter.name] as File}
+                onChange={newValue => onChangeValues({ ...values, [parameter.name]: newValue })}
+              />
+            ) : (
+              <ParameterEditor
+                key={parameter.name}
+                parameter={parameter}
+                value={values[parameter.name] as string}
+                onChange={e => onChangeValues({ ...values, [parameter.name]: e.currentTarget.value })}
+              />
+            ),
+          )}
       </Panel.Content>
     </Panel>
   );
diff --git a/packages/elements/src/components/TryIt/OperationParameters.tsx b/packages/elements/src/components/TryIt/OperationParameters.tsx
index 8ad05483f..379bccc0b 100644
--- a/packages/elements/src/components/TryIt/OperationParameters.tsx
+++ b/packages/elements/src/components/TryIt/OperationParameters.tsx
@@ -21,8 +21,9 @@ export const OperationParameters: React.FC<OperationParametersProps> = ({
 }) => {
   const parameters = flattenParameters(operationParameters);
 
-  const onChange = (name: string) => (value: string) => {
-    onChangeValues({ ...values, [name]: value });
+  const onChange = (name: string) => (e: React.FormEvent<HTMLSelectElement> | React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.currentTarget.value;
+    onChangeValues({ ...values, [name]: newValue });
   };
 
   return (
diff --git a/packages/elements/src/components/TryIt/ParameterEditor.tsx b/packages/elements/src/components/TryIt/ParameterEditor.tsx
index 7f771a89f..bb467994f 100644
--- a/packages/elements/src/components/TryIt/ParameterEditor.tsx
+++ b/packages/elements/src/components/TryIt/ParameterEditor.tsx
@@ -8,18 +8,17 @@ import {
   ParameterSpec,
   selectExampleOption,
 } from './parameter-utils';
+
 interface ParameterProps {
   parameter: ParameterSpec;
   value: string;
-  onChange: (parameterValue: string) => void;
+  onChange: (e: React.FormEvent<HTMLSelectElement> | React.ChangeEvent<HTMLInputElement>) => void;
 }
 
-export const ParameterEditor: React.FC<ParameterProps> = (props) => {
-  const { parameter, value, onChange } = props;
+export const ParameterEditor: React.FC<ParameterProps> = ({ parameter, value, onChange }) => {
   const parameterValueOptions = parameterOptions(parameter);
   const examples = exampleOptions(parameter);
   const selectedExample = examples?.find(e => e.value === value) ?? selectExampleOption;
-
   return (
     <Flex align="center" key={parameter.name}>
       <Input appearance="minimal" readOnly value={parameter.name} />
@@ -29,8 +28,8 @@ export const ParameterEditor: React.FC<ParameterProps> = (props) => {
           flexGrow
           aria-label={parameter.name}
           options={parameterValueOptions}
-          value={typeof value === 'string' ? value : ''}
-          onChange={e => onChange(e.currentTarget.value)}
+          value={value}
+          onChange={onChange}
         />
       ) : (
         <Flex flexGrow>
@@ -43,7 +42,7 @@ export const ParameterEditor: React.FC<ParameterProps> = (props) => {
             type={parameter.schema?.type === 'number' ? 'number' : 'text'}
             required
             value={value}
-            onChange={e => onChange(e.currentTarget.value)}
+            onChange={onChange}
           />
           {examples && (
             <Select
@@ -51,7 +50,7 @@ export const ParameterEditor: React.FC<ParameterProps> = (props) => {
               flexGrow
               value={selectedExample.value}
               options={examples}
-              onChange={e => onChange(e.currentTarget.value)}
+              onChange={onChange}
             />
           )}
         </Flex>
diff --git a/packages/elements/src/components/TryIt/index.tsx b/packages/elements/src/components/TryIt/index.tsx
index ee54df343..2d3dd0fb9 100644
--- a/packages/elements/src/components/TryIt/index.tsx
+++ b/packages/elements/src/components/TryIt/index.tsx
@@ -140,7 +140,7 @@ function buildFetchRequest({
 
   const queryParams = httpOperation.request?.query
     ?.map(param => [param.name, parameterValues[param.name] ?? ''])
-    .filter(([_, value]) => typeof value !== 'string' || value.length > 0);
+    .filter(([_, value]) => value.length > 0);
 
   const expandedPath = uriExpand(httpOperation.path, parameterValues);
   const url = new URL(server + expandedPath);
diff --git a/packages/elements/src/components/TryIt/request-body-utils.ts b/packages/elements/src/components/TryIt/request-body-utils.ts
index e9bf48404..27f4cdcff 100644
--- a/packages/elements/src/components/TryIt/request-body-utils.ts
+++ b/packages/elements/src/components/TryIt/request-body-utils.ts
@@ -1,4 +1,5 @@
-import { IHttpOperation, IMediaTypeContent } from '@stoplight/types';
+import { Dictionary, IHttpOperation, IMediaTypeContent } from '@stoplight/types';
+import { pickBy } from 'lodash';
 import * as React from 'react';
 
 import { initialParameterValues } from './parameter-utils';
@@ -16,10 +17,7 @@ function isMultipartContent(content: IMediaTypeContent) {
   return content.mediaType.toLowerCase() === 'multipart/form-data';
 }
 
-export function createRequestBody(
-  httpOperation: IHttpOperation,
-  bodyParameterValues: Record<string, string | File> | undefined,
-) {
+export function createRequestBody(httpOperation: IHttpOperation, bodyParameterValues: BodyParameterValues | undefined) {
   const bodySpecification = httpOperation.request?.body?.contents?.[0];
   if (!bodySpecification) return undefined;
 
@@ -29,12 +27,14 @@ export function createRequestBody(
 
 type RequestBodyCreator = (options: {
   httpOperation: IHttpOperation;
-  bodyParameterValues?: Record<string, string | File>;
+  bodyParameterValues?: BodyParameterValues;
   rawBodyValue?: string;
 }) => BodyInit;
 
 const createUrlEncodedRequestBody: RequestBodyCreator = ({ bodyParameterValues = {} }) => {
-  return new URLSearchParams(bodyParameterValues as any /* TODO: change!!!! */);
+  const filteredValues = pickBy(bodyParameterValues, value => typeof value === 'string') as Dictionary<string>;
+
+  return new URLSearchParams(filteredValues);
 };
 
 const createMultipartRequestBody: RequestBodyCreator = ({ bodyParameterValues = {} }) => {
@@ -69,7 +69,7 @@ export const useBodyParameterState = (httpOperation: IHttpOperation) => {
     return initialParameterValues(parameters);
   }, [isFormDataBody, bodySpecification]);
 
-  const [bodyParameterValues, setBodyParameterValues] = React.useState<Record<string, string | File>>(initialState);
+  const [bodyParameterValues, setBodyParameterValues] = React.useState<BodyParameterValues>(initialState);
 
   React.useEffect(() => {
     setBodyParameterValues(initialState);

From cbb588502cac1b0840841bc68692bd7593edd1ab Mon Sep 17 00:00:00 2001
From: Mateusz Podlasin <mateusz@stoplight.io>
Date: Wed, 13 Jan 2021 11:54:45 +0100
Subject: [PATCH 6/9] feat: add unit tests and removing file button

---
 .../TryIt/FileUploadParameterEditors.tsx      | 22 ++++++++-----
 .../src/components/TryIt/FormDataBody.tsx     |  7 ++++-
 .../TryIt/__tests__/BasicSend.test.tsx        | 31 +++++++++++++++++++
 3 files changed, 51 insertions(+), 9 deletions(-)

diff --git a/packages/elements/src/components/TryIt/FileUploadParameterEditors.tsx b/packages/elements/src/components/TryIt/FileUploadParameterEditors.tsx
index aaec2506b..cea7bba52 100644
--- a/packages/elements/src/components/TryIt/FileUploadParameterEditors.tsx
+++ b/packages/elements/src/components/TryIt/FileUploadParameterEditors.tsx
@@ -1,15 +1,12 @@
 import { Flex, Input, Text } from '@stoplight/mosaic';
 import * as React from 'react';
 
-import {
-  getPlaceholderForParameter,
-  ParameterSpec,
-} from './parameter-utils';
+import { getPlaceholderForParameter, ParameterSpec } from './parameter-utils';
 
 interface FileUploadParamterEditorProps {
   parameter: ParameterSpec;
-  value: File;
-  onChange: (parameterValue: File) => void;
+  value?: File;
+  onChange: (parameterValue: File | undefined) => void;
 }
 
 export const FileUploadParamterEditor: React.FC<FileUploadParamterEditorProps> = ({ parameter, value, onChange }) => {
@@ -21,11 +18,15 @@ export const FileUploadParamterEditor: React.FC<FileUploadParamterEditorProps> =
     onChange(file);
   };
 
+  const clearFile = () => {
+    onChange(undefined);
+  };
+
   return (
     <Flex align="center" key={parameter.name}>
       <Input appearance="minimal" readOnly value={parameter.name} />
       <Text mx={3}>:</Text>
-      <Flex flexGrow>
+      <Flex flexGrow alignItems="center">
         <Input
           style={{ paddingLeft: 15 }}
           aria-label={parameter.name}
@@ -34,9 +35,14 @@ export const FileUploadParamterEditor: React.FC<FileUploadParamterEditorProps> =
           placeholder={getPlaceholderForParameter(parameter)}
           type="text"
           required
-          value={value.name}
+          value={value?.name ?? ''}
           disabled
         />
+        {value && (
+          <button aria-label="Remove file" onClick={clearFile}>
+            X
+          </button>
+        )}
         <div>
           <label role="button" htmlFor="file-upload">
             Upload
diff --git a/packages/elements/src/components/TryIt/FormDataBody.tsx b/packages/elements/src/components/TryIt/FormDataBody.tsx
index 89da1a91b..ffe940564 100644
--- a/packages/elements/src/components/TryIt/FormDataBody.tsx
+++ b/packages/elements/src/components/TryIt/FormDataBody.tsx
@@ -1,6 +1,7 @@
 import { safeStringify } from '@stoplight/json';
 import { Panel } from '@stoplight/mosaic';
 import { IMediaTypeContent } from '@stoplight/types';
+import { omit } from 'lodash';
 import * as React from 'react';
 
 import { FileUploadParamterEditor } from './FileUploadParameterEditors';
@@ -40,7 +41,11 @@ export const FormDataBody: React.FC<FormDataBodyProps> = ({ specification, value
                 key={parameter.name}
                 parameter={parameter}
                 value={values[parameter.name] as File}
-                onChange={newValue => onChangeValues({ ...values, [parameter.name]: newValue })}
+                onChange={newValue =>
+                  newValue
+                    ? onChangeValues({ ...values, [parameter.name]: newValue })
+                    : onChangeValues(omit(values, parameter.name))
+                }
               />
             ) : (
               <ParameterEditor
diff --git a/packages/elements/src/components/TryIt/__tests__/BasicSend.test.tsx b/packages/elements/src/components/TryIt/__tests__/BasicSend.test.tsx
index 3a7adeb98..7ab2b894c 100644
--- a/packages/elements/src/components/TryIt/__tests__/BasicSend.test.tsx
+++ b/packages/elements/src/components/TryIt/__tests__/BasicSend.test.tsx
@@ -211,5 +211,36 @@ describe('TryIt', () => {
         expect(body.get('someEnum')).toBe('a');
       });
     });
+
+    it('displays the name of the imported file in the string input', () => {
+      render(<TryIt httpOperation={multipartFormdataOperation} />);
+
+      userEvent.upload(screen.getByLabelText('Upload'), new File(['something'], 'some-file'));
+
+      expect(screen.getByLabelText('someFile')).toHaveValue('some-file');
+    });
+
+    it('allows to remove file after importing it', () => {
+      render(<TryIt httpOperation={multipartFormdataOperation} />);
+
+      userEvent.upload(screen.getByLabelText('Upload'), new File(['something'], 'some-file'));
+
+      userEvent.click(screen.getByLabelText('Remove file'));
+
+      expect(screen.getByLabelText('someFile')).not.toHaveValue();
+    });
+
+    it('allows to upload file in multipart request', async () => {
+      render(<TryIt httpOperation={multipartFormdataOperation} />);
+
+      userEvent.upload(screen.getByLabelText('Upload'), new File(['something'], 'some-file'));
+
+      clickSend();
+
+      const body = fetchMock.mock.calls[0][1]!.body as URLSearchParams | FormData;
+
+      expect(body.get('someFile')).toBeInstanceOf(File);
+      expect((body.get('someFile') as File).name).toBe('some-file');
+    });
   });
 });

From 3b87a3e1a05b68e1be9a5881a4ba37548d82789e Mon Sep 17 00:00:00 2001
From: Mateusz Podlasin <mateusz@stoplight.io>
Date: Thu, 14 Jan 2021 13:44:18 +0100
Subject: [PATCH 7/9] feat: minor fixes

---
 .../TryIt/FileUploadParameterEditors.tsx      | 10 ++---
 .../TryIt/__tests__/BasicSend.test.tsx        | 38 ++++++++++---------
 2 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/packages/elements/src/components/TryIt/FileUploadParameterEditors.tsx b/packages/elements/src/components/TryIt/FileUploadParameterEditors.tsx
index cea7bba52..8eb348222 100644
--- a/packages/elements/src/components/TryIt/FileUploadParameterEditors.tsx
+++ b/packages/elements/src/components/TryIt/FileUploadParameterEditors.tsx
@@ -1,7 +1,7 @@
-import { Flex, Input, Text } from '@stoplight/mosaic';
+import { Flex, Icon, Input, Text } from '@stoplight/mosaic';
 import * as React from 'react';
 
-import { getPlaceholderForParameter, ParameterSpec } from './parameter-utils';
+import { ParameterSpec } from './parameter-utils';
 
 interface FileUploadParamterEditorProps {
   parameter: ParameterSpec;
@@ -32,15 +32,15 @@ export const FileUploadParamterEditor: React.FC<FileUploadParamterEditorProps> =
           aria-label={parameter.name}
           appearance="minimal"
           flexGrow
-          placeholder={getPlaceholderForParameter(parameter)}
+          placeholder="pick a file"
           type="text"
           required
           value={value?.name ?? ''}
           disabled
         />
         {value && (
-          <button aria-label="Remove file" onClick={clearFile}>
-            X
+          <button className="mr-3 p-2" aria-label="Remove file" onClick={clearFile}>
+            <Icon icon="times" />
           </button>
         )}
         <div>
diff --git a/packages/elements/src/components/TryIt/__tests__/BasicSend.test.tsx b/packages/elements/src/components/TryIt/__tests__/BasicSend.test.tsx
index 7ab2b894c..ccd1cab45 100644
--- a/packages/elements/src/components/TryIt/__tests__/BasicSend.test.tsx
+++ b/packages/elements/src/components/TryIt/__tests__/BasicSend.test.tsx
@@ -212,35 +212,37 @@ describe('TryIt', () => {
       });
     });
 
-    it('displays the name of the imported file in the string input', () => {
-      render(<TryIt httpOperation={multipartFormdataOperation} />);
+    describe('File Upload', () => {
+      it('displays the name of the imported file in the string input', () => {
+        render(<TryIt httpOperation={multipartFormdataOperation} />);
 
-      userEvent.upload(screen.getByLabelText('Upload'), new File(['something'], 'some-file'));
+        userEvent.upload(screen.getByLabelText('Upload'), new File(['something'], 'some-file'));
 
-      expect(screen.getByLabelText('someFile')).toHaveValue('some-file');
-    });
+        expect(screen.getByLabelText('someFile')).toHaveValue('some-file');
+      });
 
-    it('allows to remove file after importing it', () => {
-      render(<TryIt httpOperation={multipartFormdataOperation} />);
+      it('allows to remove file after importing it', () => {
+        render(<TryIt httpOperation={multipartFormdataOperation} />);
 
-      userEvent.upload(screen.getByLabelText('Upload'), new File(['something'], 'some-file'));
+        userEvent.upload(screen.getByLabelText('Upload'), new File(['something'], 'some-file'));
 
-      userEvent.click(screen.getByLabelText('Remove file'));
+        userEvent.click(screen.getByLabelText('Remove file'));
 
-      expect(screen.getByLabelText('someFile')).not.toHaveValue();
-    });
+        expect(screen.getByLabelText('someFile')).not.toHaveValue();
+      });
 
-    it('allows to upload file in multipart request', async () => {
-      render(<TryIt httpOperation={multipartFormdataOperation} />);
+      it('allows to upload file in multipart request', async () => {
+        render(<TryIt httpOperation={multipartFormdataOperation} />);
 
-      userEvent.upload(screen.getByLabelText('Upload'), new File(['something'], 'some-file'));
+        userEvent.upload(screen.getByLabelText('Upload'), new File(['something'], 'some-file'));
 
-      clickSend();
+        clickSend();
 
-      const body = fetchMock.mock.calls[0][1]!.body as URLSearchParams | FormData;
+        const body = fetchMock.mock.calls[0][1]!.body as URLSearchParams | FormData;
 
-      expect(body.get('someFile')).toBeInstanceOf(File);
-      expect((body.get('someFile') as File).name).toBe('some-file');
+        expect(body.get('someFile')).toBeInstanceOf(File);
+        expect((body.get('someFile') as File).name).toBe('some-file');
+      });
     });
   });
 });

From 0b6167e2adca1897eda283ff978c9f1dbd9932b0 Mon Sep 17 00:00:00 2001
From: Mateusz Podlasin <mateusz@stoplight.io>
Date: Fri, 15 Jan 2021 12:26:07 +0100
Subject: [PATCH 8/9] feat: code review fixes

---
 packages/elements/package.json                |  1 +
 .../TryIt/FileUploadParameterEditors.tsx      |  8 ++--
 .../src/components/TryIt/FormDataBody.tsx     | 39 +++++++++++--------
 .../src/components/TryIt/ParameterEditor.tsx  |  2 +-
 .../TryIt/__tests__/BasicSend.test.tsx        |  2 +-
 .../components/TryIt/request-body-utils.ts    |  6 +--
 yarn.lock                                     | 12 +++---
 7 files changed, 40 insertions(+), 30 deletions(-)

diff --git a/packages/elements/package.json b/packages/elements/package.json
index 91e71d9b1..064874ee6 100644
--- a/packages/elements/package.json
+++ b/packages/elements/package.json
@@ -70,6 +70,7 @@
     "httpsnippet": "^1.24.0",
     "lodash": "^4.17.19",
     "mobx-react-lite": "^1.5.2",
+    "nanoid": "^3.1.20",
     "object-hash": "^2.0.3",
     "openapi-sampler": "^1.0.0-beta.16",
     "parse-prefer-header": "^1.0.0",
diff --git a/packages/elements/src/components/TryIt/FileUploadParameterEditors.tsx b/packages/elements/src/components/TryIt/FileUploadParameterEditors.tsx
index 8eb348222..0118da55b 100644
--- a/packages/elements/src/components/TryIt/FileUploadParameterEditors.tsx
+++ b/packages/elements/src/components/TryIt/FileUploadParameterEditors.tsx
@@ -1,4 +1,5 @@
 import { Flex, Icon, Input, Text } from '@stoplight/mosaic';
+import { nanoid } from 'nanoid';
 import * as React from 'react';
 
 import { ParameterSpec } from './parameter-utils';
@@ -12,7 +13,6 @@ interface FileUploadParamterEditorProps {
 export const FileUploadParamterEditor: React.FC<FileUploadParamterEditorProps> = ({ parameter, value, onChange }) => {
   const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const file = event.currentTarget.files?.[0];
-
     if (file === undefined) return;
 
     onChange(file);
@@ -22,6 +22,8 @@ export const FileUploadParamterEditor: React.FC<FileUploadParamterEditorProps> =
     onChange(undefined);
   };
 
+  const fileUploadInputId = React.useRef(`file-upload-${nanoid()}`);
+
   return (
     <Flex align="center" key={parameter.name}>
       <Input appearance="minimal" readOnly value={parameter.name} />
@@ -44,10 +46,10 @@ export const FileUploadParamterEditor: React.FC<FileUploadParamterEditorProps> =
           </button>
         )}
         <div>
-          <label role="button" htmlFor="file-upload">
+          <label role="button" htmlFor={fileUploadInputId.current}>
             Upload
           </label>
-          <input onChange={handleFileChange} type="file" hidden id="file-upload" />
+          <input onChange={handleFileChange} type="file" hidden id={fileUploadInputId.current} />
         </div>
       </Flex>
     </Flex>
diff --git a/packages/elements/src/components/TryIt/FormDataBody.tsx b/packages/elements/src/components/TryIt/FormDataBody.tsx
index ffe940564..8bb6f8f2d 100644
--- a/packages/elements/src/components/TryIt/FormDataBody.tsx
+++ b/packages/elements/src/components/TryIt/FormDataBody.tsx
@@ -35,27 +35,34 @@ export const FormDataBody: React.FC<FormDataBodyProps> = ({ specification, value
       <Panel.Content className="sl-overflow-y-auto OperationParametersContent">
         {Object.entries(parameters)
           .map(([name, schema]) => ({ name, schema, examples: schema?.examples }))
-          .map(parameter =>
-            parameterSupportsFileUpload(parameter) ? (
-              <FileUploadParamterEditor
-                key={parameter.name}
-                parameter={parameter}
-                value={values[parameter.name] as File}
-                onChange={newValue =>
-                  newValue
-                    ? onChangeValues({ ...values, [parameter.name]: newValue })
-                    : onChangeValues(omit(values, parameter.name))
-                }
-              />
-            ) : (
+          .map(parameter => {
+            const supportsFileUpload = parameterSupportsFileUpload(parameter);
+            const value = values[parameter.name];
+
+            if (supportsFileUpload) {
+              return (
+                <FileUploadParamterEditor
+                  key={parameter.name}
+                  parameter={parameter}
+                  value={value instanceof File ? value : undefined}
+                  onChange={newValue =>
+                    newValue
+                      ? onChangeValues({ ...values, [parameter.name]: newValue })
+                      : onChangeValues(omit(values, parameter.name))
+                  }
+                />
+              );
+            }
+
+            return (
               <ParameterEditor
                 key={parameter.name}
                 parameter={parameter}
-                value={values[parameter.name] as string}
+                value={typeof value === 'string' ? value : undefined}
                 onChange={e => onChangeValues({ ...values, [parameter.name]: e.currentTarget.value })}
               />
-            ),
-          )}
+            );
+          })}
       </Panel.Content>
     </Panel>
   );
diff --git a/packages/elements/src/components/TryIt/ParameterEditor.tsx b/packages/elements/src/components/TryIt/ParameterEditor.tsx
index bb467994f..cf51f2c0d 100644
--- a/packages/elements/src/components/TryIt/ParameterEditor.tsx
+++ b/packages/elements/src/components/TryIt/ParameterEditor.tsx
@@ -11,7 +11,7 @@ import {
 
 interface ParameterProps {
   parameter: ParameterSpec;
-  value: string;
+  value?: string;
   onChange: (e: React.FormEvent<HTMLSelectElement> | React.ChangeEvent<HTMLInputElement>) => void;
 }
 
diff --git a/packages/elements/src/components/TryIt/__tests__/BasicSend.test.tsx b/packages/elements/src/components/TryIt/__tests__/BasicSend.test.tsx
index ccd1cab45..c592e0e47 100644
--- a/packages/elements/src/components/TryIt/__tests__/BasicSend.test.tsx
+++ b/packages/elements/src/components/TryIt/__tests__/BasicSend.test.tsx
@@ -238,7 +238,7 @@ describe('TryIt', () => {
 
         clickSend();
 
-        const body = fetchMock.mock.calls[0][1]!.body as URLSearchParams | FormData;
+        const body = fetchMock.mock.calls[0][1]!.body as FormData;
 
         expect(body.get('someFile')).toBeInstanceOf(File);
         expect((body.get('someFile') as File).name).toBe('some-file');
diff --git a/packages/elements/src/components/TryIt/request-body-utils.ts b/packages/elements/src/components/TryIt/request-body-utils.ts
index 27f4cdcff..04e93a828 100644
--- a/packages/elements/src/components/TryIt/request-body-utils.ts
+++ b/packages/elements/src/components/TryIt/request-body-utils.ts
@@ -1,5 +1,5 @@
-import { Dictionary, IHttpOperation, IMediaTypeContent } from '@stoplight/types';
-import { pickBy } from 'lodash';
+import { IHttpOperation, IMediaTypeContent } from '@stoplight/types';
+import { isString, pickBy } from 'lodash';
 import * as React from 'react';
 
 import { initialParameterValues } from './parameter-utils';
@@ -32,7 +32,7 @@ type RequestBodyCreator = (options: {
 }) => BodyInit;
 
 const createUrlEncodedRequestBody: RequestBodyCreator = ({ bodyParameterValues = {} }) => {
-  const filteredValues = pickBy(bodyParameterValues, value => typeof value === 'string') as Dictionary<string>;
+  const filteredValues = pickBy(bodyParameterValues, isString);
 
   return new URLSearchParams(filteredValues);
 };
diff --git a/yarn.lock b/yarn.lock
index 771d8fef6..44044c007 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8027,12 +8027,7 @@ can-use-dom@^0.1.0:
   resolved "https://registry.yarnpkg.com/can-use-dom/-/can-use-dom-0.1.0.tgz#22cc4a34a0abc43950f42c6411024a3f6366b45a"
   integrity sha1-IsxKNKCrxDlQ9CxkEQJKP2NmtFo=
 
-caniuse-lite@^1.0.30000989, caniuse-lite@^1.0.30001035, caniuse-lite@^1.0.30001036:
-  version "1.0.30001173"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001173.tgz"
-  integrity sha512-R3aqmjrICdGCTAnSXtNyvWYMK3YtV5jwudbq0T7nN9k4kmE4CBuwPqyJ+KBzepSTh0huivV2gLbSMEzTTmfeYw==
-
-caniuse-lite@^1.0.30001125:
+caniuse-lite@^1.0.30000989, caniuse-lite@^1.0.30001035, caniuse-lite@^1.0.30001036, caniuse-lite@^1.0.30001125:
   version "1.0.30001173"
   resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001173.tgz"
   integrity sha512-R3aqmjrICdGCTAnSXtNyvWYMK3YtV5jwudbq0T7nN9k4kmE4CBuwPqyJ+KBzepSTh0huivV2gLbSMEzTTmfeYw==
@@ -15843,6 +15838,11 @@ nan@^2.12.1, nan@^2.13.2:
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.0.tgz#7818f722027b2459a86f0295d434d1fc2336c52c"
   integrity sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg==
 
+nanoid@^3.1.20:
+  version "3.1.20"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.20.tgz#badc263c6b1dcf14b71efaa85f6ab4c1d6cfc788"
+  integrity sha512-a1cQNyczgKbLX9jwbS/+d7W8fX/RfgYR7lVWwWOGIPNgK2m0MWvrGF6/m4kk6U3QcFMnZf3RIhL0v2Jgh/0Uxw==
+
 nanomatch@^1.2.9:
   version "1.2.13"
   resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"

From a5936d8d5bc231c7a0b7af37d4f516e9b075c17e Mon Sep 17 00:00:00 2001
From: Marcell Toth <marcell@stoplight.io>
Date: Mon, 18 Jan 2021 17:21:53 +0100
Subject: [PATCH 9/9] chore: resolve breaking changes after v7 merge

---
 .../src/components/TryIt/__tests__/BasicSend.test.tsx     | 6 +++---
 packages/elements/src/components/TryIt/index.tsx          | 7 ++-----
 packages/elements/src/components/TryIt/mocking-utils.ts   | 8 ++++++--
 3 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/packages/elements/src/components/TryIt/__tests__/BasicSend.test.tsx b/packages/elements/src/components/TryIt/__tests__/BasicSend.test.tsx
index 3fedcb8d9..92fbdcb30 100644
--- a/packages/elements/src/components/TryIt/__tests__/BasicSend.test.tsx
+++ b/packages/elements/src/components/TryIt/__tests__/BasicSend.test.tsx
@@ -286,7 +286,7 @@ describe('TryIt', () => {
 
     describe('File Upload', () => {
       it('displays the name of the imported file in the string input', () => {
-        render(<TryIt httpOperation={multipartFormdataOperation} />);
+        render(<TryItWithPersistence httpOperation={multipartFormdataOperation} />);
 
         userEvent.upload(screen.getByLabelText('Upload'), new File(['something'], 'some-file'));
 
@@ -294,7 +294,7 @@ describe('TryIt', () => {
       });
 
       it('allows to remove file after importing it', () => {
-        render(<TryIt httpOperation={multipartFormdataOperation} />);
+        render(<TryItWithPersistence httpOperation={multipartFormdataOperation} />);
 
         userEvent.upload(screen.getByLabelText('Upload'), new File(['something'], 'some-file'));
 
@@ -304,7 +304,7 @@ describe('TryIt', () => {
       });
 
       it('allows to upload file in multipart request', async () => {
-        render(<TryIt httpOperation={multipartFormdataOperation} />);
+        render(<TryItWithPersistence httpOperation={multipartFormdataOperation} />);
 
         userEvent.upload(screen.getByLabelText('Upload'), new File(['something'], 'some-file'));
 
diff --git a/packages/elements/src/components/TryIt/index.tsx b/packages/elements/src/components/TryIt/index.tsx
index 34954dc7d..c4602bcd0 100644
--- a/packages/elements/src/components/TryIt/index.tsx
+++ b/packages/elements/src/components/TryIt/index.tsx
@@ -8,7 +8,7 @@ import * as React from 'react';
 import { HttpCodeDescriptions } from '../../constants';
 import { getHttpCodeColor } from '../../utils/http';
 import { FormDataBody } from './FormDataBody';
-import { getMockData, MockingOptions } from './mocking-utils';
+import { getMockData, MockData, MockingOptions } from './mocking-utils';
 import { MockingButton } from './MockingButton';
 import { OperationParameters } from './OperationParameters';
 import { BodyParameterValues, createRequestBody, useBodyParameterState } from './request-body-utils';
@@ -142,10 +142,7 @@ interface BuildFetchRequestInput {
   httpOperation: IHttpOperation;
   parameterValues: Dictionary<string, string>;
   bodyParameterValues?: BodyParameterValues;
-  mockData?: {
-    url: string;
-    header?: Record<'Prefer', string>;
-  };
+  mockData?: MockData;
 }
 
 function buildFetchRequest({
diff --git a/packages/elements/src/components/TryIt/mocking-utils.ts b/packages/elements/src/components/TryIt/mocking-utils.ts
index 1a9eda318..7926776c1 100644
--- a/packages/elements/src/components/TryIt/mocking-utils.ts
+++ b/packages/elements/src/components/TryIt/mocking-utils.ts
@@ -1,15 +1,19 @@
 import { compact } from 'lodash';
 
 import { formatMultiValueHeader } from '../../utils/headers';
-import { BuildFetchRequestInput } from '.';
 
 export type MockingOptions = { isEnabled: boolean; code?: string; example?: string; dynamic?: boolean };
 type PreferHeaderProps = { code: string; example?: string; dynamic?: boolean };
 
+export type MockData = {
+  url: string;
+  header?: Record<'Prefer', string>;
+};
+
 export function getMockData(
   url: string | undefined,
   { isEnabled, code, dynamic, example }: MockingOptions,
-): BuildFetchRequestInput['mockData'] {
+): MockData | undefined {
   return isEnabled && code && url ? { url, header: buildPreferHeader({ code, dynamic, example }) } : undefined;
 }