Hi,

The KendoReact Upload component seems to only cater for sending files to dedicated server handlers. Is there any way to convert attached files to a byte array rather than posting to a server endpoint?

Kind regards,

David

i use Springboot for backend and database, front as react.

i want to use saveUrl in kendo-upload ui post my image to springboot and saving image in mysql db.

i have "uploadFile" variable as axios request parameter

@RestController
@CrossOrigin
public class MemberController {

@Autowired
MemberMapper mapper;


MultipartFile upload;
String photoname;

@PostMapping(value = "/member/upload", consumes = {"multipart/form-data"})
public Map<String, String> fileUpload(@RequestParam MultipartFile uploadFile, HttpServletRequest request){
String uploadPath = request.getSession().getServletContext().getRealPath("/WEB-INF/photo");
System.out.println(uploadPath);


int pos = uploadFile.getOriginalFilename().lastIndexOf("."); 
String ext = uploadFile.getOriginalFilename().substring(pos);


Date date = new Date();
SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmss");
photoname = "jeju" + sdf.format(date) + ext;

upload = uploadFile;

Map<String, String> map = new HashMap<String, String>();
map.put("photoname", photoname);
return map;
}

and 

for react

let uploadFile = null;

    imageUpload=(e)=>{
        const uploadFile = e.affectedFiles[0].name;
        
        const memberFile = new FormData();
        memberFile.append("uploadFile",uploadFile);
        axios({
            method: 'post',
            url: URL + '/member/upload',
            data: memberFile,
            headers: {'Content-Type':'multipart/form-data'}
        }).then(response=>{
            alert(response.data.photoname+" ==> save as this name");
            
            this.setState({
                photoname: response.data.photoname
            })
        }).catch(err=>{
            console.log("error while uploading images:"+err);
        })
    }

 onAdd = (event) => {
        const afterStateChange = () => {
            event.affectedFiles
                .filter(file => !file.validationErrors)
                .forEach(file => {
                    const reader = new FileReader();
                    reader.onloadend = (ev) => {
                        this.setState({
                            filePreviews: {
                                ...this.state.filePreviews,
                                [file.uid]: ev.target.result
                            }
                        });
                    };
                    reader.readAsDataURL(file.getRawFile());
                });
        };
        this.setState({
            files: event.newState,
            events: [
                ...this.state.events,
                `selected file: ${event.affectedFiles[0].name}`
            ],
        }, afterStateChange);
        uploadFile = event.affectedFiles[0].name;
    }

render(){

    return (

 <div>
                    <InputLabel id="demo-simple-select-label">picture</InputLabel>
                    <br />
                    <Upload 
                        batch={false}
                        multiple={true}
                        files={this.state.files}
                        onAdd={this.onAdd}
                        onRemove={this.onRemove}
                        onProgress={this.onProgress}
                        onStatusChange={this.onSatusChange}
                        withCredentials={false}
                        saveUrl={URL + '/member/upload'}
                        removeUrl={'https://demos.telerik.com/kendo-ui/service-v4/upload/remove'}
                        onChange={this.imageUpload.bind(this)}
                    />
                    <div className={'example-config'} style={{ marginTop: 20 }}>
                        <ul className={'event-log'}>
                            {
                                this.state.events.map(event => <li key={event}>{event}</li>)
                            }
                        </ul>
                    </div>
                    {
                        this.state.files.length ? 
                        <div className={'img-preview example-config'}>
                            <h3>image preview</h3>
                            {
                                Object.keys(this.state.filePreviews)
                                    .map((fileKey, index) => (<img 
                                        src={this.state.filePreviews[fileKey]} 
                                        alt={index}
                                        style={{ width: 200, margin: 10 }} 
                                    />))
                            }
                        </div> : undefined
                    }
                </div>

);

}

Hello,

 1) I am trying to put some extra notes while hovering over data points. I am using a Scatter plot. While trying the example given below, it only works for "line" but not scatter. I am also getting data from firebase from a JSON structure. please let me know how the structure should be. Refer screenshot 1.

 <ChartSeriesItem type="line" data={seriesData} field="value" noteTextField="extremum" /> 

2) Color for different datapoint, I am trying to mark x and y from firebase. each x,y represents a hand or leg. I want each to be in separate color, How to implement that. again I have attached a JSON structure, refer screenshot 1.

Hi Team, 

How do I use the min/max button props for windows? Im trying to hide the buttons without success, I've tried these values with the following results:
true/false - failed
"true"/"false" - works, but theres a warning in the browser console. (If it doesnt appear at first, refresh the page)
blank string - failed
the letter 's' - works, no errors (this was an accident, some letters work, some dont. I didnt try them all)

StackBlitz Demo

Thanks,
Grant

Hi Team, 

As my title says, the KendoReact Loader is not rendering, at least not visually.

I've created https://stackblitz.com/edit/react-2gnzaw to duplicate the issue. From the simple code you will see there is suppose to be a loader constantly visible after the button, but also when you click the button, a loader should appear in the button.

Please advise.

Thanks,
Grant

Hello,

We are using kendo-react-inputs 3.17.0

I've created minimal reproduction example from problem that we have with Checkbox component.

If, we at the very first step click on the checkbox then properly true is displayed. Checkbox also says true.

Then, we click button that changes Parent state outside from kendo component. Now, it looks like checkbox is not updated.

Checkbox still says it's true, but we can see that text value says false.

Example is here:

https://codesandbox.io/s/serene-jackson-lrc2i?file=/src/Parent.tsx

Thanks in advance for explanation!

Best regards,

Arek

1) Use this StackBlitz application: https://react-scwx3i.stackblitz.io - This is based on Telerik's own DatePicker React example.

2) Highlight the AM/PM section.

3) Try to change the AM/PM section via typing. It doesn't change. Note that other fields in the date/time picker are responsive to keyboard input.

Expectation is that the AM/PM section should respect at least "A" and "P" inputs.

1) Use this StackBlitz application: https://react-scwx3i.stackblitz.io - This is based on Telerik's own DatePicker React example.

2) Highlight the AM/PM section.

3) Press the up arrow key to go from "AM" -> "PM" -> "AM" - note that for each "PM" to "AM" change, the Day value increments

4) Press the down arrow key to go from "AM" -> "PM" -> "AM" - note that for each "AM" to "PM" change, the Day value decrements.

My expectation is that changing AM/PM values should not change any other sections of the Date/Time value.

I am a beginner with js and react and i try in my environment to recreate a chart.

I have everything I need (package, react, etc) but I can't make it work the example code.

I know that the problem becomes from the last part of code (ReactDOM.render) but i don't know with certainty what is it.

What i doing wrong?