0

I have a input type file, where I have allowed only pdf files, on submission of the form I want to send the pdf file to an endpoint url via POST but it requires to be in base64. There are other parameters I will be sending in the JSON.

I have added a change event in the input type file, but cant figure out how to convert the pdf file to base64 and add it to the JSON.

<div class="add-mag-pdf-btn">
  <label for="pdf">
    <input type="file" (change)="uploadPDF($event)" id="pdf" accept=".pdf" />
    <p>add PDF</p>
  </label>
</div>

uploadPDF(event: any) {
  console.log(event)
}
RAHUL KUNDU
  • 745
  • 2
  • 12
  • 33
  • 1
    Does this answer your question? [How to convert file to base64 in JavaScript?](https://stackoverflow.com/questions/36280818/how-to-convert-file-to-base64-in-javascript) – Aakash Garg Dec 09 '20 at 18:40
  • Are you sure the file needs to be uploaded in Base64? It is very common for file uploads to be done with a multipart/form-data upload using a native html form. – Deadron Dec 09 '20 at 18:43
  • @Deadron, Yah i want to upload it as base64 – RAHUL KUNDU Dec 09 '20 at 18:44
  • @RAHULKUNDU Usually Base64 is only used when bytes need to be embedded into a text based form such as xml. It must be a very strange endpoint that requires it on upload. It may actually increase the size of the data you need to stream to the endpoint. – Deadron Dec 09 '20 at 18:45
  • One solution is to use browser native-fs. Starting from this example: https://stackoverflow.com/questions/64960309/how-to-use-browser-file-system-api-to-create-an-img all you would need to do after this is create an ajax request and submit your file that way – ControlAltDel Dec 09 '20 at 18:47
  • @AakashGarg, your solution is working fine, but when I am trying to convert a file over 1mb or larger, then it is not working, showing Failed to load PDF document. – RAHUL KUNDU Dec 10 '20 at 04:44
  • please provide a stackblitz. also @Deadron is right about sending file as multipart form data. if you really want base64, then send multipart from ui and covert it to base64 at backend. that will be better performant and proper approach. – Aakash Garg Dec 10 '20 at 06:45
  • @AakashGarg, I am using interceptor and making all requests as json but for pdf upload how can i use multipart form data in header? – RAHUL KUNDU Dec 10 '20 at 07:05
  • Check here :- https://stackoverflow.com/questions/47936183/angular-file-upload – Aakash Garg Dec 10 '20 at 07:06
  • @AakashGarg, I am using http interceptor which by default setting header's as application/json. how i can set multipart/form-data for a specific request? – RAHUL KUNDU Dec 10 '20 at 08:25
  • @RAHULKUNDU, you shouldn't set that header at all. you call comment adding of that header. – Aakash Garg Dec 10 '20 at 08:34
  • @AakashGarg, i have created this stackblitz can you please check https://stackblitz.com/edit/angular-ivy-s9nnud?file=src/app/app.component.ts – RAHUL KUNDU Dec 10 '20 at 08:47
  • @RAHULKUNDU, in your stackblitz i am able to send file, and it is showing correct content type, what's the issue? i just changed button type to submit of add mag button. – Aakash Garg Dec 10 '20 at 09:58
  • @AakashGarg, after submission i am redirecting the user to list page where i am loading all the magazines, in there pdf file and name everything returning null. Wither it is not saving properly in my database or from frontend i am not sending it properly. – RAHUL KUNDU Dec 10 '20 at 10:12
  • @AakashGarg, is it mandatory to add type in button --- – RAHUL KUNDU Dec 10 '20 at 10:16
  • yes, i think so. that's what trigger ngSumbit. – Aakash Garg Dec 10 '20 at 11:28
  • its sending properly, not sure about backend. – Aakash Garg Dec 10 '20 at 11:28
  • @AakashGarg, even title field is inserting in my db as null, really wired. If there is a problem in file it will not insert in the db, but all the fields are inserting as null. – RAHUL KUNDU Dec 10 '20 at 14:12
  • How do you expect one to tell you the reason until you add backend code above? – Aakash Garg Dec 10 '20 at 15:04

0 Answers0