File Input Issues


Topic: File Input Issues

Aakash Banerjee pro premium priority asked 7 years ago

Issue # 1 with File Input. On mdbootstrap.com as well as my app if you click on File Input Choose File and choose the first file chrome produces a toast "No File Chosen" See Screenshot. https://www.dropbox.com/s/kazppcoj9qfo8tt/Screenshot%202018-03-26%2008.05.11.png?dl=0 Issue # 2 When I choose a file in my app I get an error in the console in chrome. However file input and upload still works. My code below after the error. Let me know if I doing something wrong.
ERROR DOMException: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.
 at EmulatedEncapsulationDomRenderer2.webpackJsonp.../../../platform-browser/esm5/platform-browser.js.DefaultDomRenderer2.setProperty (http://localhost:3000/vendor.bundle.js:110315:18)
 at DebugRenderer2.webpackJsonp.../../../core/esm5/core.js.DebugRenderer2.setProperty (http://localhost:3000/vendor.bundle.js:94084:23)
 at DefaultValueAccessor.webpackJsonp.../../../forms/esm5/forms.js.DefaultValueAccessor.writeValue (http://localhost:3000/vendor.bundle.js:96517:24)
 at http://localhost:3000/vendor.bundle.js:97945:29
 at http://localhost:3000/vendor.bundle.js:99524:65
 at Array.forEach (<anonymous>)
 at FormControl.webpackJsonp.../../../forms/esm5/forms.js.FormControl.setValue (http://localhost:3000/vendor.bundle.js:99524:28)
 at ToolinputComponent.webpackJsonp.../../../../../src/app/toolinput/toolinput.component.ts.ToolinputComponent.onFileChange (http://localhost:3000/main.bundle.js:2715:52)
 at ToolinputComponent.webpackJsonp.../../../../../src/app/toolinput/toolinput.component.ts.ToolinputComponent.onUploadOutput (http://localhost:3000/main.bundle.js:2458:14)
 at Object.eval [as handleEvent] (ng:///AppModule/ToolinputComponent.ngfactory.js:39:31)
  toolinput.component.html //Only putting code or the file input here
<div class="btn btn btn-unique waves-light">
 <span>Choose file</span>
 <input type="file" class="form-control" id= "filedetails" formControlName = "filedetails" mdbFileSelect (uploadOutput)="onUploadOutput($event)"/>
 </div>
 <div class="file-path-wrapper">
 <input class="file-path" id="filewrapper" type="text" placeholder="Upload your File" [value]="showFiles()">
 </div>


toolinput.component.ts
//using reactive form formControl, I do not have a form control for the filewrapper, is that a possible problem?
tool1inputform = new FormGroup({
 filedetails : new FormControl()
 });

//showfiles()
showFiles() {
 let files = '';
 for (let i = 0; i < this.files.length; i ++) {
 files += this.files[i].name;
 if (!(this.files.length - 1 === i)) {
 files += ', ';
 }
 }
 return files;
 }

//onUploadOutput, also calling this.onFileChange(event); from here.
onUploadOutput(output: UploadOutput): void {

if (output.type === 'allAddedToQueue') {
} else if (output.type === 'addedToQueue') {
this.files.push(output.file); // add file to array when added
} else if (output.type === 'uploading') {
// update current data in files array for uploading file
const index = this.files.findIndex(file => file.id === output.file.id);
this.files[index] = output.file;
} else if (output.type === 'removed') {
// remove file from array when removed
this.files = this.files.filter((file: UploadFile) => file !== output.file);
} else if (output.type === 'dragOver') {
this.dragOver = true;
} else if (output.type === 'dragOut') {
} else if (output.type === 'drop') {
this.dragOver = false;
}
this.showFiles();
this.onFileChange(event);
}

//onFileChange(event)

onFileChange(event) {

if (event.target.files && event.target.files.length > 0) {
const file = event.target.files[0];
this.tool1inputform.get('filedetails').setValue(file);
}
}

//When the submit file button is clicked below is what I do before posting the file to the server

onSubmit(){

const body = this.prepareSave();

//call upload using fileservice.

this.fileService.uploadtool1(body, this.token).subscribe(res =>{
if(res.success){
//do something
}else{

//handle error

}

}

private prepareSave(): any {
let input = new FormData();
input.append('filedetails', this.tool1inputform.get('filedetails').value);

return input;
}


Everything works except for the DOM Exception error in Chrome Console and the No File Chosen toast. Let me know what the issue is.

Thanks.

Aakash.
                                                                    

Damian Gemza staff commented 7 years ago

Dear Aakash, I'm unable to reproduce your error from delivered code. Is there a possibility to send me your project at mail? d.gemza@mdbootstrap.com Best Regards, Damian

Aakash Banerjee pro premium priority commented 7 years ago

Issue # 2 DOMException is resolved. However check this video at around 0.35-0.38 secs you will see when I choose a file I see a toast on the browser says No File Chosen however the file input element is populated and correctly and processing occurs as expected. So I was wondering where this No File Chosen message on the browser is coming from. https://www.youtube.com/watch?v=RMYYCRRscpQ

Damian Gemza staff commented 7 years ago

Dear Aakash, again I'm unable to reproduce your case. For me - Firefox 58 @ Ubuntu 17, Chromium 64 @ Ubuntu 17 When i choose some files, there's no No file chosen message. Is there a possibility to send me your project? Best Regards, Damian

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Open

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: No