fine-uploader-wrappers | ES6 classes that wrap a Fine Uploader S3 | File Upload library

I've implemented FineUploader in my React app to upload files to my Azure Blob Storage and it's working fine except for one issue.

After uploading a file successfully, if I try uploading another one, FineUploader is not allowing me to select a new file. Clicking the select button opens up the dialog box to let me select a file but clicking the file to select it simply does nothing. I don't see any errors either.

Any idea what could be causing this issue?

Here's my implementation of FineUploader in my app:

In my stack I am using redux-token-auth to authenticate users with my rails backend (devise_token_auth). In my app I need to allow authenticated users to upload images, for this I'm using react-fine-uploader.

My problem is that I'm not seeing a way to have ract-fine-uploader 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.

I found that redux-token-auth stores authentication tokens in the localStorage, so I'm kinda able to retrieve it and authenticate my requests. Though I don't like accessing such data directly with a localStorage.get("access-token") (It's written by the package, it just seems fair to use the package to handle it).

Also with react-fine-uploader 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.

Here's the code I got so far:

my ImagesUploader:

I'm trying to include fine uploader in my react app using react fine uploader. I need my image dropzone to bind to my form, so that images will be sent to the backend when I press submit along other form data. (So that I can correctly assign any images to the right database item).

For some reason this is not happening, and fineuploader tries to POST the images right away.

this is my ImagesUploader component:

I'm trying to implement FineUploader React library into my React app to upload files to my Azure Blob Storage.

Looks like for some reason, FineUploader is getting the blob storage URI wrong.

This is how I instanciate a FineUploader in my test component:

I'm trying to use fineuploader with react and have installed all the relevant dependencies. Following is the code I use:-

In Visual Studio, Gulp is not running to convert my scss files to css.

The error I'm getting is:

cmd.exe /c gulp --tasks-simple C:\Users\sam\Documents\Visual Studio 2017\Projects\MyProject\MyProject\node_modules\node-sass\lib\binding.js:15 throw new Error(errors.missingBinary()); ^ Error: Missing binding C:\Users\sam\Documents\Visual Studio 2017\Projects\MyProject\MyProject\node_modules\node-sass\vendor\win32-x64-47\binding.node Node Sass could not find a binding for your current environment: Windows 64-bit with Node.js 5.x Found bindings for the following environments: - Windows 64-bit with Node.js 7.x This usually happens because your environment has changed since running npm install. Run npm rebuild node-sass to build the binding for your current environment.

I did run npm rebuild node-sass in the root of my project folder but still getting the same error. This is what I got after running npm rebuild node-sass:

Binary found at C:\Users\sam\Documents\Visual Studio 2017\Projects\MyProject\MyProject\node_modules\node-sass\vendor\win32-x64-51\binding.node Testing binary Binary is fine node-sass@3.13.1 C:\Users\sam\Documents\Visual Studio 2017\Projects\MyProject\MyProject\node_modules\node-sass

My Gulpfile.js looks like this:

Using React and FineUploader 5.14.2-rc1 in UI mode. Uploads work great, but the displayed thumbnails are inconsistent. When I click the component and select a file from the system file selection dialog, the file is represented by a thumbnail of the image. But when I drag the same file and drop it on the component, it displays a generic file icon rather than an image thumbnail. I'm assuming this is a configuration problem, but I can't find anything germane in the documentation. Here's the relevant component: