Hi!
Little thing going on on the website:

The fontawesome fonts are 404
(eg. https://uptick.github.io/dist/fontawesome-webfont.ttf?v=4.7.0)

Hi,
Trying to build by 'npm run build' after downloading from the master branch('react-keyed-file-browser-master'), seeing below error :

ERROR in ./src/folders/list-thumbnail.js
Module not found: Error: Can't resolve '../utils' in 'D:\React-Workspace\react-keyed-file-browser-master\src\folders'
 @ ./src/folders/list-thumbnail.js 33:0-36 112:15-23
 @ ./src/folders/index.js
 @ ./src/index.js

ERROR in ./src/groupers/by-modified.js
Module not found: Error: Can't resolve '../utils' in 'D:\React-Workspace\react-keyed-file-browser-master\src\groupers'
 @ ./src/groupers/by-modified.js 7:0-36 14:8-16
 @ ./src/groupers/index.js
 @ ./src/index.js

ERROR in ./src/groupers/by-folder.js
Module not found: Error: Can't resolve '../utils' in 'D:\React-Workspace\react-keyed-file-browser-master\src\groupers'
 @ ./src/groupers/by-folder.js 5:0-36 16:48-56 26:21-29
 @ ./src/groupers/index.js
 @ ./src/index.js

ERROR in ./src/browser.js
Module not found: Error: Can't resolve './utils' in 'D:\React-Workspace\react-keyed-file-browser-master\src'
 @ ./src/browser.js 42:0-35 583:13-21 648:15-23
 @ ./src/index.js

It seems 'utils.js' file is missing from the 'react-keyed-file-browser-master' dir. Please update the master branch with proper source files.

Thanks,
~Girija

This is a dodgy way to do things.
Currently it's causing some weirdness with the file/folder renaming box, where the box won't be available in .refs if the action buttons (Add folder, rename, delete) haven't been rendered..

Rather than assuming all action handlers are successful. Promises?

Also get rid of the todo to replace window.notify.

i want to change the details view for images i want the image to show up

Consider dropping direct need for any particular icon library, instead offering a simple prop blob for user to map their own icons in. Could also include some default configs for the big icon libraries (fontawesome, glyphicons, material).

@tabby-or-not for your reference.

I've tried to use the following code, but it continues sorting by name:

import FileBrowser, { FileRenderers, Sorters }  from 'react-keyed-file-browser';

<FileBrowser
       files={this.state.files}
       sort={Sorters.SortByModified}
       fileRenderer={CustomFileRenderer}  />

Am I missing something in here?

The current implementation does not scale well.
With a large amount of files, one needs to scroll all the way down to the file, select it, scroll up to the top to click rename/delete/add subfolder, then scroll all the way back down to the selected file to confirm the action.
--> The add subfolder/rename/delete actions should sit within the files themselves, rather than in the action bar. Or perhaps in both places? The confirmation button should be close to the original action button.

Is there a way to close the file browser folders when its files change? Or anyway to do it programmatically?

We've got a few places where we're doing stuff like this:

This is bad and can cause unintended behaviour
https://reactjs.org/docs/state-and-lifecycle.html#do-not-modify-state-directly

The issue that I am currently facing is that I am trying to render the files with the map functionality. The problem is that I am rendering the actual FileBrowser component every time and can't seem to find the way to map through my array of paths within the FileBrowser component. Here is the code. Hopefully, you understand what I am trying to do.

    if(this.state.path.length !== 0) {
        return <FileBrowser files={this.state.path.forEach(function(path) {
            return {
                key: path
            }
        })} />
    }

        return ( 
            <FileBrowser
            files={[
                {
                    key: this.state.path[0]
                },
                {
                    key: this.state.path[1]
                },
                {
                    key: this.state.path[2]
                },
                {
                    key: this.state.path[3]
                }

            ]}
            />
        )

this is what I am trying to do without having to put the numbers there but if i have a for loop i cant do it inside the actual component.

Help would be greatly appreciated. Thank you

Hi!

After a long search I found this nice file browser. When I try to include it into my project the following error occures:
Uncaught Error: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).

Maybe I used the component in the wrong way.
I checked if react was loaded multiple times, but I was not successful. All other workarounds like "npm ls" did not work either .

I would be really thankful for any help!

Greetz

Stefan

Multiple files should be selectable by dragging highlighting squares over them, and/or by holding ctrl/shift while clicking to select a file.

Once multiple files are selected, bulk actions should be performable on them, such as moving multiple files/folders in unison & bulk deletion.

Hi, I'd like to define my own deletion confirmation modal and hook that into the callback for onDeleteFile and onDeleteFolder. So I'd render the modal visible in the confirm deletion callback, and then upon confirming the modal, some actions would take place to execute the deletion.

So is it possible that a bool prop can be exposed to turn off the "Confirm Deletion" button and instead invoke the callback once the "Delete" button is clicked from the action toolbar directly?

The way I have it currently set up would require that the user confirm the deletion twice prior to execution, once with your button and once with my modal.

Thank you!

Greetings,

It would appear that the divs within React Keyed file browser do not obey Bootstrap styling. Could the <table> class be given the option of having "table-responsive", and could each column be allowed to have an override maximum width (e.g. 25%)? That would solve this bug.

Thanks! Great toolset, by the way.

We're using a pretty old version now. On 2.1.4, latest is 5.x.
Time to upgrade!

Hello!
So I managed to replace the fileRenderer with my React Component. But I'm still struggling to custom the onClick Event on the file.
I want to pass my function as props to the FileBrowser to get the key of the clicked file to use it in my app.
Any suggestions how I can pass the function?

Thanks!!

When providing an array of files that only have keys, all the files show as folders. Is this intended behavior or is there a way to make them show as files without providing the size?

when i drag&drop files they get added to the ui but i don't know what function get invocked

Hi,

the funcionts onMoveFile and onMoveFolder are not triggered.

handleMoveFolder = (oldKey, newKey) => { console.log('handleMoveFolder', oldKey, newKey) //not working }

handleMoveFile = (oldKey, newKey) => { console.log('handleMoveFile', oldKey, newKey); //not working }

onRenameFolder={this.handleRenameFolder}
onRenameFile={this.handleRenameFile}

when i load the state with empty folders they don't show up

When I use more than one component, I got error 'Cannot have two HTML5 backends at the same time.'

Step-1: After executing 'npm run prepublish', build is got successful, both 'react-keyed-file-browser.js' and 'react-keyed-file-browser.css' files are observed from the 'dist' directory.
Step-2: Imported and used the 'FileBrowser' component from the above 'dist/react-keyed-file-browser.js', Seeing below compilation error by 'npm start':

Failed to compile.
./src/file-browser/react-keyed-file-browser.js
  Line 4:  'define' is not defined  no-undef
  Line 5:  'define' is not defined  no-undef

Step-3: Installed 'react-keyed-file-browser' package separately by 'npm install react-keyed-file-browser' to compare both 'react-keyed-file-browser.js' files.
Step-4: Seeing many difference by comparing my 'react-keyed-file-browser.js' (dist/react-keyed-file-browser.js) content with the '\node_modules\react-keyed-file-browser\dist\react-keyed-file-browser.js'

Please find below attachment of both files for your reference.

react-keyed-file-browserJS_nodeModule.txt
react-keyed-file-browserJS_myDist.txt

Many Thanks,
~Girija

Is there a way to translate the texts (ie. "File", "Size", "Modified",.. ) which are currently hardcoded?

How to make a trigger for onClick on folder and file? Checked similar issues, found one example from the author, but that example was not addressed to my question fully.
I'm using FileRenderer and FolderRenderer to make custom file and folder components. How can I access onClick there?

Hello,
I can't find the handleFileClick function as a prop,
I need to detect the click on the file, so I can generate a download link at that time and edit the object.
How can I do this ?

Just curious if there is a preferred method to display content that is dynamically fetched. We'd like to get a callback for when opening a folder so that we can query an internal API and go fetch the contents of an actual file system to display (it's too large to just cache all of it).

All the examples use static data and I can't seem to find a way to pass handlers for that.

Thanks

I failed to find a way to add a new file via action bar. Is this something that should be done differently outside of the library (Like adding a new file to files prop) or is there a way to get this done through action bar?

Hi,
Are considering replacing big and heavy moment.js with some smaller and tree-shakeable alternative?
I can do it by myself, if you're willing to accept it.

Hi,

Thank for your great lib, it's very useful. I got a question on developing new feature.
I forked the code and make some changes, rebuild and refer it to my code, it keeps saying
" Element ref was specified as a string (browser) but no owner was set. You may have multiple copies of React loaded. (details: https://fb.me/react-refs-must-have-owner). "
Can you give me some advices to solve this problem.

Regards.

It's really hard working with this library on Typescript. Is there any plan to add Typescript support? Or does anyone have a definition file for this library?

Hi, thanks for creating this great and nice looking component! I've got a couple of questions before deciding whether we can use this in our application.

1. Currently this library has peerDependencies on React v0.14 and v15. Are there any plans to upgrade to React v16, which is the current version (and higher, as they are released in the future)?
2. The icons used for folders, files, etc. are based on an old version of FontAwesome (v4). Are there plans to upgrade to the newer version (v5)?
3. We would like to have our own custom columns in the table, which would include renaming the headers as well as displaying some dropdown fields in the 'file rows'.
   • I saw you had a great many hooks to customize the behavior of this library. However, I was not yet able to find hooks that would support renaming headers, adding columns, etc. Am I missing something?
   • One option I found was to use the headerRenderer prop and write a custom Header component, however, this would copy the whole TableHeader component in your implementation and rename some values. Similar for fileRenderer, of course. Is this the intended way of customizing the table? It doesn't seem particularly DRY.
   • I tried the above approach of copying and customizing the Header component, but once I add the DropTarget to the component, it doesn't show up anymore. Any clue as to why that is the case? Could this be the case because your library is on v2.x of react-dnd and react-dnd-html5-backend, while our's is on v5.x? If so, are there plans to upgrade?
4. I wasn't able to find any documentation except for the live demo. Is there more documentation to be found? Until now I've tried to piece together the 'documentation' from reading the code itself.
5. We're using TypeScript in our project, so it would really help us out if there were some type definitions available. Do you have any plans for adding those in the future?

We would really like the component, but these are some of the problems we encountered with it so far. In general it would probably already help a lot if the dependencies could be upgraded. Usually I would try to contribute something here, but I'm not yet sure how much time I'll have for that in the upcoming months.

Hi,

there is a bug with search bar.

Steps to reproduce:
1 - Create an image, the name must contain lower and uppercase letters.
2 - Search for the added image through "Filter files" searchbar.

Result:
As soon as the uppercase letter is added to the search: 'No files matching"search result".' message is shown

Expected result:
Uppercase lettest should be implemented in the search.

Make it easy to define custom columns, without the need to change the header and file renderers in separate places.

eg. btn, btn-sm

I have a design that has folders on the first column, files in the middle column and the file information on the third column. Is there a way to separate the 3 into distinct columns and still have the interactivity? For example I would click the folder on the first column and the listing of the files inside the folder from the first column would display on the second column.

Hi there,

I tried to use you library for a project, but the CSS is not used. I tried adding "import 'node_modules/react-keyed-file-browser/dist/react-keyed-file-browser.css';" in the file I am using FileBrowser but it has no effect.

The project context is React with JavaScript, and usually we use SCSS or CSS. I saw that some of your files are SASS.

Do you know how can I render with the CSS of your second exemple "Nested Table with Event Handlers"?

Thank you very much,

Loup

It would very nice to be able to define icons by type of file like so:

<FileBrowser
  ... 
  iconsByType={{
    txt: <i ... />,
    csv: <i ... />,
    pdf: <i ... />,
    exdef: <i ... />,
    default: <i ... />,
    folder:  <i ... />,
  }}
  icons={{
      Rename: <i className="i-cursor" aria-hidden="true" />,
      Folder: <i className="folder" aria-hidden="true" />,
      FolderOpen: <i className="folder-open" aria-hidden="true" />,
      Delete: <i className="trash" aria-hidden="true" />,
      Loading: <i className="circle-notch spin" aria-hidden="true" />,
  }}
/>

The icons prop could be kept for specific mappings.

Step-1: As I've Windows-10 OS, so modified only the 'scripts' section(build-js, build-css, build) of the 'package.json' as below in order to make the npm-build successful:

"scripts": {
   "publish-demo": "git branch -D gh-pages; git push origin --delete gh-pages; git checkout -b gh-pages; cd demo-site; yarn; npm run build; cd ..; git add .; git add -f demo-site/dist; git add -f demo-site/node_modules/uptick-demo-site/dist; git commit -m \"Demo site build\"; git push origin gh-pages; git checkout master; git push origin `git subtree split --prefix demo-site gh-pages`:gh-pages --force;",
   "test": "echo \"Error: no test specified\" && exit 1",
   "build-js": "node .//node_modules//webpack//bin//webpack.js",
   "build-css": "node .//node_modules//node-sass//bin//node-sass src//browser.sass dist//react-keyed-file-browser.css",
   "build": "npm run build-js && npm run build-css",
   "prepublish": "npm run build",
   "storybook": "start-storybook -p 9001 -c .storybook"
 },

Step-2: Executed 'npm install' or 'npm prepublish' or 'npm run build' to build the project, build is successful, 'dist' directory is created with 'react-keyed-file-browser.css' file. Not seeing the 'react-keyed-file-browser.js' file from the 'dist' dir.

Here is my build-logs after executing 'npm prepublish' command from the console:

D:\React-Workspace\react-keyed-file-browser-master>npm run prepublish
> [email protected] prepublish D:\React-Workspace\react-keyed-file-browser-master
> npm run build

> [email protected] build D:\React-Workspace\react-keyed-file-browser-master
> npm run build-js && npm run build-css

> [email protected] build-js D:\React-Workspace\react-keyed-file-browser-master
> node .//node_modules//webpack//bin//webpack.js

Hash: 39059271932552f3ef32
Version: webpack 4.29.6
Time: 3868ms
Built at: 03/21/2019 10:15:48 PM
                      Asset      Size  Chunks             Chunk Names
react-keyed-file-browser.js  56.2 KiB       0  [emitted]  main
Entrypoint main = react-keyed-file-browser.js
[0] external "react" 42 bytes {0} [built]
[1] external "prop-types" 42 bytes {0} [built]
[2] external "moment" 42 bytes {0} [built]
[3] external "react-dnd" 42 bytes {0} [built]
[4] external "react-dnd-html5-backend" 42 bytes {0} [built]
[5] external "classnames" 42 bytes {0} [built]
[6] ./src/index.js + 29 modules 109 KiB {0} [built]
    | ./src/index.js 768 bytes [built]
    | ./src/details/index.js 67 bytes [built]
    | ./src/filters/index.js 67 bytes [built]
    | ./src/base-file.js 9.22 KiB [built]
    | ./src/headers/index.js 61 bytes [built]
    | ./src/files/index.js 300 bytes [built]
    | ./src/base-folder.js 8.66 KiB [built]
    | ./src/folders/index.js 225 bytes [built]
    | ./src/groupers/index.js 150 bytes [built]
    | ./src/sorters/index.js 124 bytes [built]
    | ./src/browser.js 29.4 KiB [built]
    | ./src/icons/index.js 81 bytes [built]
    | ./src/details/default.js 3.68 KiB [built]
    | ./src/filters/default.js 3.79 KiB [built]
    | ./src/constants.js 1.9 KiB [built]
    |     + 15 hidden modules

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

> [email protected] build-css D:\React-Workspace\react-keyed-file-browser-master
> node .//node_modules//node-sass//bin//node-sass src//browser.sass dist//react-keyed-file-browser.css

Rendering Complete, saving .css file...
Wrote CSS to D:\React-Workspace\react-keyed-file-browser-master\dist\react-keyed-file-browser.css

D:\React-Workspace\react-keyed-file-browser-master>

If any mistake or additional configuration is required to generate the 'react-keyed-file-browser.js' in the 'dist' dir, please let me know.

Many Thanks,
~Girija

I love this module! I've managed to set it up by looking at the source code. I noticed that selection is stored in state and set when an item is clicked. I think a defaultSelection option would be nice to have.

Hi,

I'm trying to compile the code but it seems the LoadingSpinner component referenced in browser.js is missing. Can you help me?
Thank you.

I tried disabling the detailRenderer by setting detailRenderer={null}, which is an unexpected type and doesn't work. In the tutorial, I saw headerRenderer set to null once and thought this would work here as well.

How can I disable the item details ?

Hi,

there is a bug with folders.

Steps to reproduce:
1 - Delete existing folder
2 - Click add new folder

Result:
New folder appears with old folder name, clicking on it makes it disappear. When clicking new folder again and clicking outside folder area causes old folder to disappear. After that clicking on new folder causes new folder to appear.

Expected result:
After deleting old folder it is possible to create new folder instantly and deleted folder no longer appears.

handleBrowse = (selectedItem) => {
console.log(selectedItem) // undefined

 }	 
 
 <FileBrowser
      files={this.state.files}      
      icons={{
     Folder: <Icon name="folder" />,
   
     File: <Icon name="file" />
      }}
      renderStyle="list"           
    onSelect={this.handleBrowse}
  
  />