Member Avatar for softDeveloper

Hi!

Does anyone know how to upload a file, say in a form, with input type="file". But what I want is to display the uploaded file in an iframe in the same page.

Best Regards

  • 2 Contributors
  • 3 Replies
  • 678 Views
  • 22 Hours Discussion Span
  • Latest Post Latest Post by Travus

Dani AI

Generated

Two straightforward options will solve this: (A) show the selected file immediately in the browser (no server round‑trip), or (B) upload the file to your server and then point the iframe at the returned URL. was right that a backend is needed if you want a permanent server copy; for an instant preview you can avoid that and use the browser File API. (developer.mozilla.org)

For an instant client-side preview use a blob (object) URL created from the selected File and set the iframe source to that URL. Remember to revoke the object URL when you no longer need it to free memory. Example (basic pattern):

<input id="file" type="file" />
<iframe id="preview" sandbox></iframe>

<script>
const input = document.getElementById('file');
const iframe = document.getElementById('preview');
let blobUrl;

input.addEventListener('change', () => {
  const f = input.files && input.files[0];
  if (!f) return;
  if (blobUrl) URL.revokeObjectURL(blobUrl);
  blobUrl = URL.createObjectURL(f);
  iframe.src = blobUrl;
});
</script>

This uses the object-URL approach described by the File API; it works for images, PDFs and many media types in modern browsers. Use FileReader.readAsDataURL() as a fallback if you need older-browser support. (developer.mozilla.org)

If you want to upload and then display the stored file without a full page reload, send the file with FormData (fetch or XHR), have the server save it and return a public URL, then set the iframe to that URL when the upload completes. Example client-side flow:

const fd = new FormData();
fd.append('file', input.files[0]);
fetch('/upload', { method: 'POST', body: fd })
  .then(r => r.json())
  .then(data => { document.getElementById('preview').src = data.url; });

Use server-side validation, correct Content-Type, and an allow-list for extensions; don’t serve uploaded files from the same executable context without safeguards. See FormData docs and OWASP guidance on secure upload handling. (developer.mozilla.org)

Notes and troubleshooting: some MIME types won’t render in every browser (check console/network and the returned Content-Type). If you render user-supplied HTML, use the iframe sandbox attribute or serve uploads from a separate origin to reduce XSS risk. Also watch for CORS and X-Content-Type-Options: nosniff issues when the iframe refuses to display content. (developer.mozilla.org)

Recommended Answers

All 3 Replies

Member Avatar for Travus

In order to upload a file I believe you will need some backend code.

To display it in an iframe just link the file that is uploaded to your iframe src="" attribute.

Edited by Travus
Member Avatar for softDeveloper

Thank you for your answer!

How do I link the uploaded file to the iframe source?

I would like to select a file from a directory and upload it to an iframe. And if I could send the file at the same time to the server, it would be even better.

Member Avatar for Travus

Use php to link the file to an iframe. If you have some source code so we can see what you are trying I can provide better help.

<iframe src="sourceoffile.png"></iframe>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.