title: react-fine-uploader to authenticate in the backend with redux-token-auth
body: <p>In my stack I am using <a href="https://github.com/kylecorbelli/redux-token-auth/" rel="nofollow noreferrer">redux-token-auth</a> to authenticate users with my rails backend (<a href="https://github.com/lynndylanhurley/devise_token_auth" rel="nofollow noreferrer">devise_token_auth</a>). In my app I need to allow authenticated users to upload images, for this I'm using <a href="https://github.com/FineUploader/react-fine-uploader" rel="nofollow noreferrer">react-fine-uploader</a>. </p>
  
  <p>My problem is that I'm not seeing a way to have <code>ract-fine-uploader</code> to POST the images in an authenticated way. and in general how to use redux-token-auth to upload data to my backend with authentication. </p>
  
  <p>I found that <code>redux-token-auth</code> stores authentication tokens in the <code>localStorage</code>, so I'm kinda able to retrieve it and authenticate my requests. Though I don't like accessing such data directly with a <code>localStorage.get("access-token")</code> (It's written by the package, it just seems fair to use the package to handle it).</p>
  
  <p>Also with <code>react-fine-uploader</code> the response object doesn't contain the headers from the server response, so I'm not sure on how to get the new tokens to store them. </p>
  
  <p>Here's the code I got so far: </p>
  
  <p>my <code>ImagesUploader</code>: </p>
  
  <pre><code>import React from "react";
  import PropTypes from "prop-types";
  
  import FineUploaderTraditional from "fine-uploader-wrappers";
  import Gallery from "react-fine-uploader";
  import { backend } from "../../libs/itemTools";
  import "react-fine-uploader/gallery/gallery.css";
  
  const ImagesUploader = props =&gt; {
    const uploader = new FineUploaderTraditional({
      options: {
        multiple: false,
        validation: {
          itemLimit: 1
        },
        request: {
          endpoint: backend.createImage,
          customHeaders: {
            "access-token": localStorage.getItem("access-token"),
            "token-type": localStorage.getItem("token-type"),
            client: localStorage.getItem("client"),
            uid: localStorage.getItem("uid")
          }
        },
        session: {
          endpoint: backend.loadImages(props.itemId)
        },
        deleteFile: {
          enabled: true,
          endpoint: backend.deleteImage(props.itemId)
        },
        cors: {
          expected: true
        },
        callbacks: {
          onComplete: (id, name, response, xhr) =&gt; {
            if (response.success) {
              response.image.id;
              //TODO save new access-token 
              // #######     THIS DOESN'T work, #########
              //fine-uploader doesn't include headers in the response object. 
              localStorage.setItem("access-token", response.headers["access-token"]);
              localStorage.setItem("token-type", response.headers("token-type"));
              localStorage.setItem("client", response.headers(client));
              localStorage.setItem("uid", response.headers(uid));
            } else {
              // [...]
            }
          },
          onSessionRequestComplete: (...params) =&gt; {
            console.log(
              "onSessionRequestComplete: " + JSON.stringify(params, 0, 2)
            );
          }
        }
      }
    });
  
    return (
      &lt;div id="upload-area"&gt;
        &lt;Gallery uploader={uploader} /&gt;
      &lt;/div&gt;
    );
  };
  
  ImagesUploader.propTypes = {
    userId: PropTypes.number.isRequired,
    itemId: PropTypes.number.isRequired
  };
  
  export default ImagesUploader;
  </code></pre>
  
  <p>It seems strange to me that <code>redux-token-auth</code> packages doesn't account for authenticated backend calls, and that <code>fine-uploader</code> doesn't give access to the response headers.. </p>
  
  <p>Is there maybe something I'm missing? </p>