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 = newFormData();
    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.

@Autowiredprivate 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

• 
  How To Redirect User To Login Page When Refreshing The Page In AngularJS
• 
  Input Type Time With Angular.js
• 
  Create A Table From Scope Object Values
• 
  After Being Returned By My Factory Service, Data Is Displaying With Visible HTML Tags