ody>
        <div>
            <div id="dropzone" style="margin:30px; width:500px; height:300px; border:1px dotted grey;">Drag & drop your file here</div>
        </div>
    </body>
    </html>
    

##  Example: Using object URLs to display PDF

Object URLs can be used for other things than just images! They can be used to
display embedded PDF files or any other resources that can be displayed by the
browser.

In Firefox, to have the PDF appear embedded in the iframe (rather than
proposed as a downloaded file), the preference ` pdfjs.disabled ` must be set
to ` false ` Non-standard  .

html

    
    
    <iframe id="viewer"></iframe>
    

And here is the change of the ` src ` attribute:

js

    
    
    const obj_url = URL.createObjectURL(blob);
    const iframe = document.getElementById("viewer");
    iframe.setAttribute("src", obj_url);
    URL.revokeObjectURL(obj_url);
    

##  Example: Using object URLs with other file types

You can manipulate files of other formats the same way. Here is how to preview
uploaded video:

js

    
    
    const video = document.getElementById("video");
    const obj_url = URL.createObjectURL(blob);
    video.src = obj_url;
    video.play();
    URL.revokeObjectURL(obj_url);
    

##  See also

  * [ ` File ` ](/en-US/docs/Web/API/File)
  * [ ` FileList ` ](/en-US/docs/Web/API/FileList)
  * [ ` FileReader ` ](/en-US/docs/Web/API/FileReader)
  * [ ` URL ` ](/en-US/docs/Web/API/URL)
  * [ ` XMLHttpRequest ` ](/en-US/docs/Web/API/XMLHttpRequest)
  * [ Using XMLHttpRequest ](/en-US/docs/Web/API/XMLHttpRequest_API/Using_XMLHttpRequest)

##  Help improve MDN

Was this page helpful to you?

Yes  No

[ Learn how to contribute
](https://github.com/mdn/content/blob/main/CONTRIBUTING.md "This will take you
to our contribution guidelines on GitHub.") .

This page was last modified on  Dec 2, 2023  by  [ MDN contributors ](/en-
US/docs/Web/API/File_API/Using_files_from_web_applications/contributors.txt) .

[ View this page on GitHub
](https://github.com/mdn/content/blob/main/files/en-
us/web/api/file_api/using_files_from_web_applications/index.md?plain=1
"Folder: en-us/web/api/file_api/using_files_from_web_applications \(Opens in a
new tab\)") â¢  [ Report a problem with this content
](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-
url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-
US%2Fdocs%2FWeb%2FAPI%2FFile_API%2FUsing_files_from_web_applications&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-
us%2Fweb%2Fapi%2Ffile_api%2Fusing_files_from_web_applications%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-
US%2Fdocs%2FWeb%2FAPI%2FFile_API%2FUsing_files_from_web_applications%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-
us%2Fweb%2Fapi%2Ffile_api%2Fusing_files_from_web_applications%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F497d322c61511b11e4877a77660f8d7b394a8277%0A*+Document+last+modified%3A+2023-12-02T08%3A06%3A49.000Z%0A%0A%3C%2Fdetails%3E
"This will take you to GitHub to file a new issue.")

[ MDN logo  ](/)

Your blueprint for a better internet.

  * [ MDN on Mastodon  ](https://mozilla.social/@mdn)
  * [ MDN on X (formerly Twitter)  ](https://twitter.com/mozdevnet)
  * [ MDN on GitHub  ](https://github.com/mdn/)
  * [ MDN Blog RSS Feed  ](/en-US/blog/rss.xml)

##  MDN

  * [ About ](/en-US/about)
  * [ Blog ](/en-US/blog/)
  * [ Careers ](https://www.mozilla.org/en-US/careers/listings/?team=ProdOps)
  * [ Advertise with us ](/en-US/advertising)

##  Support

  * [ Product help ](https://support.mozilla.org/products/mdn-plus)
  * [ Report an issue ](/en-US/docs/MDN/Community/Issues)

##  Our communities

  * [ MDN Community ](/en-US/community)
  * [ MDN Forum ](https://discourse.mozilla.org/c/mdn/236)
  * [ MDN Chat ](/discord)

##  Developers

  * [ Web Technologies ](/en-US/docs/Web