diff --git a/components/sidebars/SidebarFileStorageDeal.js b/components/sidebars/SidebarFileStorageDeal.js
index f0ae777c..8fd2bcc8 100644
--- a/components/sidebars/SidebarFileStorageDeal.js
+++ b/components/sidebars/SidebarFileStorageDeal.js
@@ -1,10 +1,10 @@
-import * as React from "react";
-import * as Strings from "~/common/strings";
-import * as Constants from "~/common/constants";
-import * as SVG from "~/components/system/svg";
-import * as System from "~/components/system";
+import * as React from 'react';
+import * as Strings from '~/common/strings';
+import * as Constants from '~/common/constants';
+import * as SVG from '~/components/system/svg';
+import * as System from '~/components/system';
 
-import { css } from "@emotion/react";
+import { css } from '@emotion/react';
 
 const STYLES_FILE_HIDDEN = css`
   height: 1px;
@@ -18,12 +18,12 @@ const STYLES_FILE_HIDDEN = css`
 
 const STYLES_FOCUS = css`
   font-size: ${Constants.typescale.lvl1};
-  font-family: "inter-medium";
+  font-family: 'inter-medium';
   overflow-wrap: break-word;
   width: 100%;
 
   strong {
-    font-family: "inter-semi-bold";
+    font-family: 'inter-semi-bold';
     font-weight: 400;
   }
 `;
@@ -44,26 +44,23 @@ const STYLES_IMAGE_PREVIEW = css`
 `;
 
 const SELECT_MENU_OPTIONS = [
-  { value: "1", name: "Anywhere" },
-  { value: "2", name: "China" },
-  { value: "3", name: "Russia" },
-  { value: "4", name: "USA" },
+  { value: '1', name: 'Anywhere' },
+  { value: '2', name: 'China' },
+  { value: '3', name: 'Russia' },
+  { value: '4', name: 'USA' },
 ];
 
 const SELECT_MENU_MAP = {
-  "1": "Anywhere",
-  "2": "China",
-  "3": "Russia",
-  "4": "USA",
+  '1': 'Anywhere',
+  '2': 'China',
+  '3': 'Russia',
+  '4': 'USA',
 };
 
 export default class SidebarFileStorageDeal extends React.Component {
   state = {
-    file: null,
-    settings_cold_default_duration: this.props.viewer
-      .settings_cold_default_duration,
-    settings_cold_default_replication_factor: this.props.viewer
-      .settings_cold_default_replication_factor,
+    settings_cold_default_duration: this.props.viewer.settings_cold_default_duration,
+    settings_cold_default_replication_factor: this.props.viewer.settings_cold_default_replication_factor,
   };
 
   _handleUpload = async (e) => {
@@ -71,43 +68,25 @@ export default class SidebarFileStorageDeal extends React.Component {
     let file = e.target.files[0];
 
     if (!file) {
-      alert("Something went wrong");
+      alert('Something went wrong');
       return;
     }
 
-    let data = new FormData();
-    data.append("image", file);
-
-    const options = {
-      method: "POST",
-      headers: {
-        Accept: "application/json",
-      },
-      body: data,
-    };
-
-    const response = await fetch(`/_/storage/${file.name}`, options);
-    const json = await response.json();
-
-    if (json && json.success) {
-      this.setState({ file });
-    }
+    await this.props.onSetFile({ file });
   };
 
   _handleMakeDeal = async (src) => {
-    console.log(src);
-
     const options = {
-      method: "POST",
-      credentials: "include",
+      method: 'POST',
+      credentials: 'include',
       headers: {
-        Accept: "application/json",
-        "Content-Type": "application/json",
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
       },
       body: JSON.stringify({ src }),
     };
 
-    const response = await fetch("/_/deals/storage", options);
+    const response = await fetch('/_/deals/storage', options);
     const json = await response.json();
     return json;
   };
@@ -115,7 +94,7 @@ export default class SidebarFileStorageDeal extends React.Component {
   _handleSubmit = async (e) => {
     e.persist();
 
-    const path = `/public/static/files/${this.state.file.name}`;
+    const path = `/public/static/files/${this.props.file.name}`;
     await this._handleMakeDeal(path);
 
     await this.props.onSubmit({});
@@ -144,44 +123,30 @@ export default class SidebarFileStorageDeal extends React.Component {
 
     return (
       <React.Fragment>
-        <System.P style={{ fontFamily: "inter-semi-bold" }}>
-          Upload a file to the network
-        </System.P>
-        <input
-          css={STYLES_FILE_HIDDEN}
-          type="file"
-          id="file"
-          onChange={this._handleUpload}
-        />
+        <System.P style={{ fontFamily: 'inter-semi-bold' }}>Upload a file to the network</System.P>
+        <input css={STYLES_FILE_HIDDEN} type="file" id="file" onChange={this._handleUpload} />
 
-        {this.state.file ? (
+        {this.props.file ? (
           <div>
-            <img
-              src={`/static/files/${this.state.file.name}`}
-              css={STYLES_IMAGE_PREVIEW}
-            />
+            <img src={`/static/files/${this.props.file.name}`} css={STYLES_IMAGE_PREVIEW} />
 
             <div css={STYLES_ITEM}>
-              <div css={STYLES_FOCUS}>{this.state.file.name}</div>
+              <div css={STYLES_FOCUS}>{this.props.file.name}</div>
               <div css={STYLES_SUBTEXT}>Name</div>
             </div>
 
             <div css={STYLES_ITEM}>
-              <div css={STYLES_FOCUS}>{this.state.file.size}</div>
+              <div css={STYLES_FOCUS}>{this.props.file.size}</div>
               <div css={STYLES_SUBTEXT}>File size</div>
             </div>
           </div>
         ) : null}
 
-        <System.ButtonSecondaryFull
-          type="label"
-          htmlFor="file"
-          style={{ marginTop: 24 }}
-        >
+        <System.ButtonSecondaryFull type="label" htmlFor="file" style={{ marginTop: 24 }}>
           Add file
         </System.ButtonSecondaryFull>
 
-        {this.state.file ? (
+        {this.props.file ? (
           <System.Input
             containerStyle={{ marginTop: 48 }}
             label="Deal duration"
@@ -193,7 +158,7 @@ export default class SidebarFileStorageDeal extends React.Component {
           />
         ) : null}
 
-        {this.state.file ? (
+        {this.props.file ? (
           <System.Input
             containerStyle={{ marginTop: 24 }}
             label="Replication factor"
@@ -203,7 +168,7 @@ export default class SidebarFileStorageDeal extends React.Component {
           />
         ) : null}
 
-        {this.state.file ? (
+        {this.props.file ? (
           <System.SelectMenuFull
             containerStyle={{ marginTop: 24 }}
             name="address"
@@ -211,17 +176,13 @@ export default class SidebarFileStorageDeal extends React.Component {
             value={this.props.selected.address}
             category="address"
             onChange={this.props.onSelectedChange}
-            options={this.props.viewer.addresses}
-          >
+            options={this.props.viewer.addresses}>
             {currentAddress.name}
           </System.SelectMenuFull>
         ) : null}
 
-        {this.state.file ? (
-          <System.ButtonPrimaryFull
-            style={{ marginTop: 48 }}
-            onClick={this._handleSubmit}
-          >
+        {this.props.file ? (
+          <System.ButtonPrimaryFull style={{ marginTop: 48 }} onClick={this._handleSubmit}>
             Make storage deal
           </System.ButtonPrimaryFull>
         ) : null}
diff --git a/pages/index.js b/pages/index.js
index 506e8717..8c43706a 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -86,6 +86,7 @@ export default class IndexPage extends React.Component {
     },
     viewer: State.getInitialState(this.props),
     sidebar: null,
+    file: null,
   };
 
   componentDidMount() {
@@ -100,8 +101,72 @@ export default class IndexPage extends React.Component {
         }
       }
     };
+
+    window.addEventListener('dragenter', this._handleDragEnter);
+    window.addEventListener('dragleave', this._handleDragLeave);
+    window.addEventListener('dragover', this._handleDragOver);
+    window.addEventListener('drop', this._handleDrop);
   }
 
+  componentWillUnmount() {
+    window.removeEventListener('dragenter', this._handleDragEnter);
+    window.removeEventListener('dragleave', this._handleDragLeave);
+    window.removeEventListener('dragover', this._handleDragOver);
+    window.removeEventListener('drop', this._handleDrop);
+  }
+
+  _handleSetFile = async ({ file }) => {
+    let data = new FormData();
+    data.append('image', file);
+
+    const options = {
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+      },
+      body: data,
+    };
+
+    const response = await fetch(`/_/storage/${file.name}`, options);
+    const json = await response.json();
+
+    if (json && json.success) {
+      this.setState({ file });
+    }
+  };
+
+  _handleDragEnter = (e) => {
+    // TODO(jim): Styles.
+    console.log('dragenter', e);
+  };
+
+  _handleDragLeave = (e) => {
+    // TODO(jim): Styles.
+    console.log('dragleave', e);
+  };
+
+  _handleDragOver = (e) => {
+    e.preventDefault();
+    console.log('dragover', e);
+  };
+
+  _handleDrop = async (e) => {
+    e.preventDefault();
+
+    if (e.dataTransfer.items) {
+      for (var i = 0; i < e.dataTransfer.items.length; i++) {
+        if (e.dataTransfer.items[i].kind === 'file') {
+          var file = e.dataTransfer.items[i].getAsFile();
+          console.log(file.name);
+          await this._handleSetFile({ file });
+          break;
+        }
+      }
+    }
+
+    this._handleAction({ type: 'SIDEBAR', value: 'SIDEBAR_FILE_STORAGE_DEAL' });
+  };
+
   rehydrate = async ({ data }) => {
     this.setState({ viewer: { ...State.getInitialState(data) } });
   };
@@ -312,11 +377,13 @@ export default class IndexPage extends React.Component {
     let sidebarElement;
     if (this.state.sidebar) {
       sidebarElement = React.cloneElement(this.state.sidebar, {
+        file: this.state.file,
         viewer: this.state.viewer,
         selected: this.state.selected,
         onSelectedChange: this._handleSelectedChange,
         onSubmit: this._handleSubmit,
         onCancel: this._handleCancel,
+        onSetFile: this._handleSetFile,
       });
     }