How to create file object of pdf from blob url (URL.createObjectURL())

Question

I have created Object url of PDF file using url: URL.createObjectURL(file[0]).

e.g url = blob:http://0.0.0.0:5002/e468fb70-d597-4b17-bb3a-ec6272f2d7fe.

Now what I want to do is, read pdf from url=blob:http://0.0.0.0:5002/e468fb70-d597-4b17-bb3a-ec6272f2d7fe and create file object like

File(61) 
{
   name: "ICT_zbbihfc_dummy.pdf", 
   lastModified: 1548148972779, 
   lastModifiedDate: Tue Jan 22 2019 17:22:52 GMT+0800 (Singapore Standard Time), 
   webkitRelativePath: "", 
   size: 61,
   type: "application/pdf",
   webkitRelativePath: ""
}

This is in Javascript.

This sounds like an X/Y problem. Why do you want to create a File object from a Blob? (Separately: I very much doubt it's possible, but you probably don't need to anyway...) — T.J. Crowder
– T.J. Crowder, Commented Jan 22, 2019 at 9:37
Thank you @T.J.Crowder for replying. I am selecting files from input tag. after then I am creating blob url of it. and now on submit button I want to read file from blob url as File Object..then send File Object to server. — Naisarg Parmar
– Naisarg Parmar, Commented Jan 22, 2019 at 9:42

Naisarg Parmar · Accepted Answer · 2019-01-23 01:58:04Z

To convert Blob object url of PDF or Image to File object

var file_object = fetch('blob:http://0.0.0.0:5002/e468fb70-d597-4b17-bb3a-ec6272f2d7fe') 
          .then(r => r.blob())
          .then(blob => {
              var file_name = Math.random().toString(36).substring(6) + '_name.pdf'; //e.g ueq6ge1j_name.pdf
              var file_object = new File([blob], file_name, {type: 'application/pdf'});
              console.log(file_object); //Output
           });
//-------

To convert Base64 of Image to File object

var file_object = fetch('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAA') 
          .then(r => r.blob())
          .then(blob => {
              var file_name = Math.random().toString(36).substring(6) + '_name.jpeg'; //e.g ueq6ge1j_name.jpeg
              var file_object = new File([blob], file_name, {type: 'application/jpeg'});
              console.log(file_object); //Output
           });
//-------

T.J. Crowder · Accepted Answer · 2019-01-22 09:58:34Z

1

In a comment you clarified:

I am selecting files from input tag. after then I am creating blob url of it. and now on submit button I want to read file from blob url as File Object..then send File Object to server.

You don't need a File object to do that. You can simply send the Blob, for instance using FormData's append method, which accepts Blobs.

However: If you have the input, and you've got the File from the input's files array, you may as well just use it directly rather than reading it and creating a Blob.

It's probably worth pointing out that input type="file" elements have a multiple attribute that can be used to specify that it can be used for multiple files (which is why the files property is a collection).

edited Jan 22, 2019 at 9:58

answered Jan 22, 2019 at 9:45

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

5 Comments

Naisarg Parmar Over a year ago

I am using one input field for multiple time to select files. For example, In first time, I choose image file and pdf file. then display that image and pdf file in web page using blob url (i am saving this blob url in array).. In second time I choose another file. so again new blob url push to array. then on submit all file send to server

T.J. Crowder Over a year ago

@NaisargParmar - That's fine, just keep the File objects.

Naisarg Parmar Over a year ago

Actually I am new to it. and also in case, if file name is same then it may create problem.

T.J. Crowder Over a year ago

@NaisargParmar - Only if the server blindly uses the name without checking for conflicts. It's not a problem in terms of sending multiple files in the same request with the same anme.

Naisarg Parmar Over a year ago

I will try solution to keep File Objects. Thank you @T.J. Crowder

Collectives™ on Stack Overflow

How to create file object of pdf from blob url (URL.createObjectURL())

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related