Upload Pdf In HTML And Deserialize Json File

I'm trying to upload a file in html and then send it to my database via restangular. My frontend is a combination of angular with typescript but the upload is a form.

Solution 1:

I've worked out the file upload.

First of all I split the file upload from the rest of my data so I won't have to rewrite the automatic deserialization for everything that does work.

this.restService.save(this.metadata.apiDomain, item).then((addedItem: any) => {
    toastr.success(`${addedItem.naam} successfully created.`, `Overzicht Dossiers Created`);
    console.log("created item ", addedItem);
    var fd = new FormData();
    fd.append("rapport", item["rapport"]);

    this.restService.one('dossiers/' + addedItem.id + '/rapport').withHttpConfig({transformRequest: angular.identity}).customPOST(fd, '', undefined, {'Content-Type': undefined}).then(
        (addedDossier: any) => {
            console.log("posted dossier ", addedDossier);
        }
    );
});

In the callback of my normal save I do the custom post to dossiers/{id}/rapport for this I need a custom controller.

@BasePathAwareController
@RequestMapping("/dossiers/{id}")
@ExposesResourceFor(Dossier.class)
public class DossierController {

The BasePathAwawareController makes sure that all automatically generated paths that you don't override keep existing.

@Autowired
private DossierRepository dossierRepository;

With this I inject my repository to connect to my database.

@RequestMapping(path = "/rapport", method = RequestMethod.POST)//,headers = "content-type=multipart/form-data") 
public @ResponseBody String postRapport(@PathVariable("id") Long id,@RequestParam("rapport") MultipartFile file) {
    String name = "rapport";
    System.out.println("Entered custom file upload with id " + id);
    if (!file.isEmpty()) {
        try {
            byte[] bytes = file.getBytes();
            Dossier dossier = dossierRepository.findOne(id);
            dossier.setRapport(bytes);

            dossierRepository.save(dossier);
            return "You successfully uploaded " + name + " into " + name + "-uploaded !";
        } catch (Exception e) {
            return "You failed to upload " + name + " => " + e.getMessage();
        }
    } else {
        return "You failed to upload " + name + " because the file was empty.";
    }
}

Like this I'm able to successfully upload my file.

Share

You may like these posts

• 
  Angular: Ng-include, JQuery Not Working Unless In HTML File
• 
  Angularjs How To Detect All Content Loaded Finish In Controller While There Is Few Ajax Call Inside?
• 
  Nested Ng-repeat In Angular JS Table
• 
  AngularJS: NgMessage Weird Behavior With Input With Type "email"