Action bar does not have "Add File" action

[raveenakothapally]

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?

[jlo-1]

Hi @raveenakothapally, as mentioned in #52 we use a separate component for uploading files that updates the file browser if the upload is successful. We don't have any plans to add an Add File button to the actions bar but if you'd like to contribute, make a PR and we will review :)
Cheers
Jordan

[raveenakothapally]

@jlo-1,
I will see if I can get a PR but as a work-around I used the following create folder handler to treat the added folder as a file if it has a . in the name:

  handleCreateFolder = key => {
    let size = null;
    const isFile = key.match(/.[a-z]+\/$/);
    if (isFile) {
      key = key.substring(0, key.length - 1);
      size = 1;
    }
    this.setState(state => {
      state.files = [
        ...state.files,
        {
          key,
          size
        }
      ];
      return state;
    });
  };

The library differentiates a file from a folder based on size property - so I set it if I find ..

This may not be reliable as the library may internally update to a different logic in future to differentiate files and folders. Also, it will be nice to have an Add File action in the action bar instead of a hack.

[jarekwg]

The library differentiates a file from a folder based on size property

This will be changing in the next release to look for trailing slashes instead.

[jlo-1]

@raveenakothapally
You're absolutely right, this has actually already been done. See df16297
The library was updated to check for a trailing slash to differentiate between files and folders instead of file size.
A helper function isFolder was added in src/utils.js e6b366c.
If you want consistency between react-keyed-file-browser and your own component you can import Utils from react-keyed-file-browser and call Utils.isFolder(fileObject)
As @jarekwg mentioned these changes will be reflected in the next release.
Cheers

[ziaulrehman40]

Well, I also want to allow user to manually click add file while in a directory(just like user can click delete when in a directory) and on that open file selector, and on selection of files, upload those files.

The solution @raveenakothapally has pasted i believe may work for creating empty files, but not to upload files with manual selection instead of drag and drop.

[jestrickler]

Exactly what I'm looking for

[ziaulrehman40]

@jestrickler if you are talking about what i mentioned,

I have put in a rough patch, but for that i had to copy whole plugin as i needed to modify multiple files and at the time had few other issues to fix as well in same plugin

If you want i can share those details, or perhaps put up a pr if possible.

TBH this plugin is not mature and needs a lot of work, but hey, something is better than nothing. Its best out there yet. So kudos to creator and maintainers for their efforts

[jestrickler]

@ziaulrehman40 Sorry I didn't see this until now... I ended up copying and modifying the ActionRenderer to add an 'Add Files' action that launches a file picker:

ActionRenderer.txt

[mk-navex]

@jestrickler can you please guide me on how to pass props.browserProps ? because when I pass using it as a component, I am getting an error an eerror

I tried to pass like the below
<ActionRenderer createFiles={()=>console.log} />

The error which occured in the console.

I am referring to the below line of your code.
const onCreateFile = props.browserProps && props.browserProps.createFiles; const canCreateFile = Boolean(onCreateFile);

Appreciate you reply. Thanks in advance

[jestrickler]

@mk-navex you don't need to create the ActionRenderer directly or pass the browserProps. You set the actionRenderer property along with other props when you create the KeyedFileBrowser and let the library handle it:

<KeyedFileBrowser
  actionRenderer={ActionRenderer} 
  onCreateFiles={...}
  ...(other props) 
/>

Hope that helps!

[mk-navex]

@jestrickler Exactly what I wanted. Thank you for such a timely help.