Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Name should not be required for properties in data-url format #824

Closed
nouman91 opened this issue Jan 26, 2018 · 1 comment
Closed

Name should not be required for properties in data-url format #824

nouman91 opened this issue Jan 26, 2018 · 1 comment

Comments

@nouman91
Copy link

Prerequisites

  • [ Yes] I have read the documentation;
  • [Yes ] In the case of a bug report, I understand that providing a SSCCE example is tremendously useful to the maintainers.

Description

[Thank you for this awesome library. I have been using it extensively. Our primary work for this library to build ui dynamically through custom widgets using materil-ui and some others. Recently I created a custom file upload widget using https://github.com/react-dropzone/react-dropzone As I was going through documentation it says file widget only supports data-url. So i got bit worried how i will get to know file name since data-url does not contain file name. So I decided to skip name entirely continued my work. After completing file upload widget when I tested it, it kept on giving me this error file is not of type data-uri. Here is how I was setting its value
handleOnDropAccepeted(file){
let uploadedFilesNames = [];

    let reader = new FileReader();
    reader.readAsDataURL(file[0]);
    reader.onloadend = () => {
        this.props.onChange(reader.result);
    }
}

It boggled me for hours as I could not figure out why it is not working. Then upon looking into your code I saw you are also encoding file name there in base64 and if we did not encode file name in string it will complain saying string data is not valid data-uri. So please mention this in your documentation for custom file upload widget you also need to encode file name there as well. Here is how my code looks now
export const addNameToDataURI=(dataURL, name)=>{
return dataURL.replace(";base64", ;name=${name};base64);
}

handleOnDropAccepeted(file){
let uploadedFilesNames = [];

    let reader = new FileReader();
    reader.readAsDataURL(file[0]);
    reader.onloadend = () => {
        this.props.onChange(addNameToDataURI(reader.result, file[0].name));
    }
}

as you can see encoding name into file is basically function from your code source
]

Steps to Reproduce

  1. [First Step]
  2. [Second Step]
  3. [and so on...]

Ideally, I'm providing a sample JSFiddle or a shared playground link demonstrating the issue.

Expected behavior

[What you expected to happen]

Actual behavior

[What actually happened]

Version

You can usually get this information in your package.json or in the file URL if you're using the unpkg one.

@nouman91 nouman91 changed the title Documentation update for file upload Documentation update for file upload(encoding of file name) Jan 26, 2018
@glasserc
Copy link
Contributor

Hi, yes, thanks for the report. I didn't realize we validate that the name field is present for data-url formats. See validate.js. I don't think we should necessarily enforce this and I would be willing to review a PR that makes name optional.

@epicfaace epicfaace changed the title Documentation update for file upload(encoding of file name) Name should not be required for properties in data-url format Jan 19, 2019
jorgerobles added a commit to jorgerobles/react-jsonschema-form that referenced this issue Jan 21, 2019
@jorgerobles jorgerobles mentioned this issue Jan 21, 2019
9 tasks
KeroVieux added a commit to KeroVieux/react-jsonschema-form that referenced this issue Jan 25, 2019
* 'master' of github.com:KeroVieux/react-jsonschema-form:
  updated
  replace submit button paragraph tag with div (rjsf-team#766)
  Fixes rjsf-team#824 (rjsf-team#1147)
  Fix bug where matching anyOf branch is not selected correctly (rjsf-team#1129)
  Document a gotcha with `additionalProperties` (rjsf-team#1149)
  doc: add permalinks and fix internal hyperlinks in documentation
  doc: add doc build instructions, update PR/issue templates with doc links
  Add onBlur and onFocus events for radio and checkbox widgets (rjsf-team#1143)
  add ui:help tips (rjsf-team#1145)
  doc: fix browserstack logo size
  docs: remove docs from README and link to readthedocs rjsf-team#1138
  doc: organize docs into separate files rjsf-team#1138
  doc: add browserstack logo rjsf-team#990
  Add test and update documentation for using anyOf inside array items (rjsf-team#1131)

# Conflicts:
#	src/components/Form.js
LucianBuzzo pushed a commit that referenced this issue Feb 7, 2019
* Fixes #824

* Added test

* Separated tests
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants