hunk.code_window:         <button class="uppy-DashboardItem-remove"
             type="button"
             aria-label={props.i18n('removeFile')}
             title={props.i18n('removeFile')}
             onclick={() => props.removeFile(file.id)}>
             <svg aria-hidden="true" class="UppyIcon" width="60" height="60" viewBox="0 0 60 60">
               <path stroke="#FFF" stroke-width="1" fill-rule="nonzero" vector-effect="non-scaling-stroke" d="M30 1C14 1 1 14 1 30s13 29 29 29 29-13 29-29S46 1 30 1z" />
               <path fill="#FFF" vector-effect="non-scaling-stroke" d="M42 39.667L39.667 42 30 32.333 20.333 42 18 39.667 27.667 30 18 20.333 20.333 18 30 27.667 39.667 18 42 20.333 32.333 30z" />
             </svg>
           </button>
         }
       </div>
  
hunk.labels: keep keep keep keep keep replace replace replace keep keep keep keep
hunk.after_edit:           <svg aria-hidden="true" class="UppyIcon" width="18" height="18" viewBox="0 0 18 18">
               <path d="M9 0C4.034 0 0 4.034 0 9s4.034 9 9 9 9-4.034 9-9-4.034-9-9-9z" />
               <path fill="#FFF" d="M13 12.222l-.778.778L9 9.778 5.778 13 5 12.222 8.222 9 5 5.778 5.778 5 9 8.222 12.222 5l.778.778L9.778 9z" />
  
hunk.file_path: packages/@uppy/dashboard/src/components/FileItem.js
hunk.type: replace
file: ---
  type: docs
  order: 13
  title: "Instagram"
  menu_prefix: "<span title='Requires Companion'>ⓒ </span>"
  module: "@uppy/instagram"
  permalink: docs/instagram/
  category: 'Sources'
  ---
  
  The `@uppy/instagram` plugin lets users import files from their Instagram account.
  
  A Companion instance is required for the `@uppy/instagram` plugin to work. Companion handles authentication with Instagram, downloads the pictures and videos, and uploads them to the destination. This saves the user bandwidth, especially helpful if they are on a mobile connection.
  
  ```js
  const Instagram = require('@uppy/instagram')
  
  uppy.use(Instagram, {
    // Options
  })
  ```
  
  <a class="TryButton" href="/examples/dashboard/">Try it live</a>
  
  ## Installation
  
  > If you are using the `uppy` package, you do not need to install this plugin manually.
  
  This plugin is published as the `@uppy/instagram` package.
  
  Install from NPM:
  
  ```shell
  npm install @uppy/instagram
  ```
  
  In the [CDN package](/docs/#With-a-script-tag), it is available on the `Uppy` global object:
  
  ```js
  const Instagram = Uppy.Instagram
  ```
  
  ## CSS
  
  Dashboard plugin is recommended as a container to all Provider plugins, including Instagram. If you are using Dashboard, it [comes with all the nessesary styles](/docs/dashboard/#CSS) for Dropbox as well.
  
  ⚠️ If you are feeling adventurous, and want to use Instagram plugin separately, without Dashboard, make sure to include `@uppy/provider-views/dist/style.css` (or `style.min.css`) CSS file. This is experimental, not officialy supported and not recommended.
  
  ## Options
  
  The `@uppy/instagram` plugin has the following configurable options:
  
  ```js
  uppy.use(Instagram, {
    target: Dashboard,
    serverUrl: 'https://companion.uppy.io/',
  })
  ```
  
  ### `id: 'Instagram'`
  
  A unique identifier for this plugin. It defaults to `'Instagram'`.
  
  ### `title: 'Instagram'`
  
  Configures the title / name shown in the UI, for instance, on Dashboard tabs. It defaults to `'Instagram'`.
  
  ### `target: null`
  
  DOM element, CSS selector, or plugin to mount the Instagram provider into. This should normally be the Dashboard.
  
  ### `serverUrl: null`
  
  URL to a [Companion](/docs/companion) instance.
  
  ### `serverHeaders: {}`
  
  Custom headers that should be sent along to [Companion](/docs/companion) on every request.
  
  ### `serverPattern: serverUrl`
  
  The valid and authorised URL(s) from which OAuth responses should be accepted.
  
  This value can be a `String`, a `Regex` pattern, or an `Array` of both.
  
  This is useful when you have your [Companion](/docs/companion) running on multiple hosts. Otherwise, the default value should be good enough.
  
  ### `locale: {}`
  
  Localize text that is shown to the user.
  
  The default English strings are:
  
  ```js
  strings: {
    // TODO
  }
  ```
  