initial commit

2 files changed, 607 insertions, 0 deletions

diff --git a/files/it/web/api/file/index.html b/files/it/web/api/file/index.html
new file mode 100644
index 0000000000..1d1941d482
--- /dev/null
+++ b/files/it/web/api/file/index.html
@@ -0,0 +1,101 @@
+---
+title: File
+slug: Web/API/File
+tags:
+  - API
+  - File API
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - Web
+translation_of: Web/API/File
+---
+<div>{{APIRef}}</div>
+
+<p>The <strong><code>File</code></strong> interface provides information about files and allows JavaScript in a web page to access their content.</p>
+
+<p><code>File</code> objects are generally retrieved from a {{DOMxRef("FileList")}} object returned as a result of a user selecting files using the {{HTMLElement("input")}} element, from a drag and drop operation's {{DOMxRef("DataTransfer")}} object, or from the <code>mozGetAsFile()</code> API on an {{DOMxRef("HTMLCanvasElement")}}.</p>
+
+<p>A <code>File</code> object is a specific kind of a {{DOMxRef("Blob")}}, and can be used in any context that a Blob can. In particular, {{DOMxRef("FileReader")}}, {{DOMxRef("URL.createObjectURL()")}}, {{DOMxRef("ImageBitmapFactories.createImageBitmap()", "createImageBitmap()")}}, and {{DOMxRef("XMLHttpRequest", "", "send()")}} accept both <code>Blob</code>s and <code>File</code>s.</p>
+
+<p>See <a href="/en-US/docs/Using_files_from_web_applications">Using files from web applications</a> for more information and examples.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{DOMxRef("File.File", "File()")}}</dt>
+ <dd>Returns a newly constructed <code>File</code>.</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{DOMxRef("File.lastModified")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns the last modified time of the file, in millisecond since the UNIX epoch (January 1st, 1970 at Midnight).</dd>
+ <dt>{{DOMxRef("File.lastModifiedDate")}} {{Deprecated_Inline}} {{ReadOnlyInline}}</dt>
+ <dd>Returns the last modified {{JSxRef("Date")}} of the file referenced by the <code>File</code> object.</dd>
+ <dt>{{DOMxRef("File.name")}}{{ReadOnlyInline}}</dt>
+ <dd>Returns the name of the file referenced by the <code>File</code> object.</dd>
+ <dt>{{DOMxRef("File.webkitRelativePath")}} {{Non-standard_Inline}} {{ReadOnlyInline}}</dt>
+ <dd>Returns the path the URL of the {{DOMxRef("File")}} is relative to.</dd>
+</dl>
+
+<p><code>File</code> implements {{DOMxRef("Blob")}}, so it also has the following properties available to it:</p>
+
+<dl>
+ <dt>{{DOMxRef("File.size")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns the size of the file in bytes.</dd>
+ <dt>{{DOMxRef("File.type")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns the <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME </a>type of the file.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>The <code>File</code> interface doesn't define any methods, but inherits methods from the {{DOMxRef("Blob")}} interface:</em></p>
+
+<dl>
+ <dt>{{DOMxRef("Blob.slice()", "Blob.slice([start[, end[, contentType]]])")}}</dt>
+ <dd>Returns a new <code>Blob</code> object containing the data in the specified range of bytes of the source <code>Blob</code>.</dd>
+ <dt>{{DOMxRef("Blob.stream()")}}</dt>
+ <dd>Transforms the <code>File</code> into a {{DOMxRef("ReadableStream")}} that can be used to read the <code>File</code> contents.</dd>
+ <dt>{{DOMxRef("Blob.text()")}}</dt>
+ <dd>Transforms the <code>File</code> into a stream and reads it to completion. It returns a promise that resolves with a {{DOMxRef("USVString")}} (text).</dd>
+ <dt>{{DOMxRef("Blob.arrayBuffer()")}}</dt>
+ <dd>Transforms the <code>File</code> into a stream and reads it to completion. It returns a promise that resolves with an {{DOMxRef("ArrayBuffer")}}.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('File API', "#file-section", "The <code>File</code> interface")}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.File")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/File/Using_files_from_web_applications">Using files from web applications</a></li>
+ <li>{{DOMxRef("FileReader")}}</li>
+ <li><a href="/en-US/docs/Extensions/Using_the_DOM_File_API_in_chrome_code">Using the DOM File API in chrome code</a> (for privileged code running in Gecko, such as Firefox add-ons)</li>
+</ul>
diff --git a/files/it/web/api/file/using_files_from_web_applications/index.html b/files/it/web/api/file/using_files_from_web_applications/index.html
new file mode 100644
index 0000000000..00d0b5f28c
--- /dev/null
+++ b/files/it/web/api/file/using_files_from_web_applications/index.html
@@ -0,0 +1,506 @@
+---
+title: Using files from web applications
+slug: Web/API/File/Using_files_from_web_applications
+translation_of: Web/API/File/Using_files_from_web_applications
+---
+<div><font><font>{{APIRef ("File API")}}</font></font></div>
+
+<p><font><font>Utilizzando l'API File, che è stata aggiunta al DOM in HTML5, è ora possibile per il contenuto Web chiedere all'utente di selezionare i file locali e quindi leggere il contenuto di tali file. </font><font>Questa selezione può essere effettuata utilizzando un </font></font><code>{{HTMLElement("input/file", '&lt;input type="file"&gt;')}}</code><font><font>elemento </font><font>HTML </font><font>o trascinandolo.</font></font></p>
+
+<p><font><font>Se si desidera utilizzare l'API del file DOM da estensioni o altro codice Chrome del browser, è possibile; </font><font>tuttavia, nota che ci sono alcune funzionalità aggiuntive di cui essere a conoscenza. </font><font>Per i dettagli, vedi </font></font><a href="/en/Extensions/Using_the_DOM_File_API_in_chrome_code"><font><font>Utilizzo dell'API del file DOM nel codice Chrome</font></font></a><font><font> .</font></font></p>
+
+<h2 id="Accesso_ai_file_selezionati"><font><font>Accesso ai file selezionati</font></font></h2>
+
+<p><font><font>Considera questo HTML:</font></font></p>
+
+<pre class="brush: html notranslate"><font><font>&lt;input type = "file" id = "input" multiple&gt;</font></font></pre>
+
+<p><font><font>L'API File consente di accedere a un {{DOMxRef ("FileList")}} contenente {{DOMxRef ("File")}} oggetti che rappresentano i file selezionati dall'utente.</font></font></p>
+
+<p><font><font>L' </font></font><code>multiple</code><font><font>attributo </font></font><code>input</code><font><font>sull'elemento consente all'utente di selezionare più file.</font></font></p>
+
+<p><font><font>Accesso al primo file selezionato usando un classico selettore DOM:</font></font></p>
+
+<pre class="brush: js notranslate"><font><font>const selectedFile = document.getElementById ('input'). files [0];</font></font></pre>
+
+<h3 id="Accesso_ai_file_selezionati_su_un_evento_di_modifica"><font><font>Accesso ai file selezionati su un evento di modifica</font></font></h3>
+
+<p><font><font>È anche possibile (ma non obbligatorio) accedere a {{DOMxRef ("FileList")}} tramite l' </font></font><code>change</code><font><font>evento. </font><font>È necessario utilizzare {{DOMxRef ("EventTarget.addEventListener ()")}} per aggiungere il </font></font><code>change</code><font><font>listener di eventi, in questo modo:</font></font></p>
+
+<pre class="brush: js notranslate"><font><font>const inputElement = document.getElementById ("input");</font></font><font><font>
+inputElement.addEventListener ("change", handleFiles, false);</font></font><font><font>
+funzione handleFiles () {</font></font><font><font>
+  const fileList = this.files; </font><font>/ * ora puoi lavorare con l'elenco dei file * /</font></font><font><font>
+}</font></font></pre>
+
+<h2 id="Ottenere_informazioni_sui_file_selezionati"><font><font>Ottenere informazioni sui file selezionati</font></font></h2>
+
+<p><font><font>L'oggetto {{DOMxRef ("FileList")}} fornito dal DOM elenca tutti i file selezionati dall'utente, ognuno specificato come oggetto {{DOMxRef ("File")}}. </font><font>È possibile determinare il numero di file selezionato dall'utente controllando il valore dell'attributo dell'elenco file </font></font><code>length</code><font><font>:</font></font></p>
+
+<pre class="brush: js notranslate"><font><font>const numFiles = fileList.length;</font></font></pre>
+
+<p><font><font>I singoli oggetti {{DOMxRef ("File")}} possono essere recuperati semplicemente accedendo all'elenco come un array:</font></font></p>
+
+<pre class="brush: js notranslate"><font><font>for (let i = 0, numFiles = fileList.length; i &lt;numFiles; i ++) {</font></font><font><font>
+  const file = fileList [i];</font></font><font><font>
+  // ...</font></font><font><font>
+}</font></font>
+</pre>
+
+<p><font><font>Questo ciclo scorre su tutti i file nell'elenco dei file.</font></font></p>
+
+<p><font><font>Esistono tre attributi forniti dall'oggetto {{DOMxRef ("File")}} che contengono informazioni utili sul file.</font></font></p>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd><font><font>Il nome del file come stringa di sola lettura. </font><font>Questo è solo il nome del file e non include alcuna informazione sul percorso.</font></font></dd>
+ <dt><code>size</code></dt>
+ <dd><font><font>La dimensione del file in byte come numero intero a 64 bit di sola lettura.</font></font></dd>
+ <dt><code>type</code></dt>
+ <dd><font><font>Il tipo MIME del file come stringa di sola lettura o </font></font><code>""</code><font><font>se il tipo non può essere determinato.</font></font></dd>
+</dl>
+
+<h3 id="Esempio_visualizzazione_delle_dimensioni_dei_file"><font><font>Esempio: visualizzazione delle dimensioni dei file</font></font></h3>
+
+<p><font><font>L'esempio seguente mostra un possibile utilizzo della </font></font><code>size</code><font><font>proprietà:</font></font></p>
+
+<pre class="brush: html notranslate"><font><font>&lt;! DOCTYPE html&gt;</font></font><font><font>
+&lt;Html&gt;</font></font><font><font>
+&lt;Head&gt;</font></font><font><font>
+&lt;meta charset = "UTF-8"&gt;</font></font><font><font>
+&lt;title&gt; Dimensioni file &lt;/title&gt;</font></font><font><font>
+&lt;Script&gt;</font></font><font><font>
+funzione updateSize () {</font></font><font><font>
+  let nBytes = 0,</font></font><font><font>
+      oFiles = this.files,</font></font><font><font>
+      nFiles = oFiles.length;</font></font><font><font>
+  for (let nFileId = 0; nFileId &lt;nFiles; nFileId ++) {</font></font><font><font>
+    nBytes + = oFiles [nFileId] .size;</font></font><font><font>
+  }</font></font><font><font>
+  let sOutput = nBytes + "bytes";</font></font><font><font>
+  // codice opzionale per l'approssimazione di multipli</font></font><font><font>
+  const aMultiples = ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"];</font></font><font><font>
+  per (nMultiple = 0, nApprox = nBytes / 1024; nApprox&gt; 1; nApprox / = 1024, nMultiple ++) {</font></font><font><font>
+    sOutput = nApprox.toFixed (3) + "" + aMultiples [nMultiple] + "(" + nBytes + "bytes)";</font></font><font><font>
+  }</font></font><font><font>
+  // fine del codice opzionale</font></font><font><font>
+  document.getElementById ("fileNum"). innerHTML = nFiles;</font></font><font><font>
+  document.getElementById ("fileSize"). innerHTML = sOutput;</font></font><font><font>
+}</font></font>
+<font><font>
+document.getElementById ("uploadInput"). addEventListener ("change", updateSize, false);</font></font><font><font>
+&lt;/ Script&gt;</font></font><font><font>
+&lt;/ Head&gt;</font></font>
+<font><font>
+&lt;Body&gt;</font></font><font><font>
+  &lt;form name = "uploadForm"&gt;</font></font><font><font>
+    &lt;Div&gt;</font></font><font><font>
+      &lt;input id = "uploadInput" type = "file" name = "myFiles" multiple&gt;</font></font><font><font>
+      file selezionati: &lt;span id = "fileNum"&gt; 0 &lt;/span&gt;;</font></font><font><font>
+      dimensione totale: &lt;span id = "fileSize"&gt; 0 &lt;/span&gt;</font></font><font><font>
+    &lt;/ Div&gt;</font></font><font><font>
+    &lt;div&gt; &lt;input type = "submit" value = "Invia file"&gt; &lt;/div&gt;</font></font><font><font>
+  &lt;/ Form&gt;</font></font><font><font>
+&lt;/ Body&gt;</font></font><font><font>
+&lt;/ Html&gt;</font></font>
+</pre>
+
+<h2 id="Utilizzo_di_elementi_di_input_di_file_nascosti_utilizzando_il_metodo_click"><font><font>Utilizzo di elementi di input di file nascosti utilizzando il metodo click ()</font></font></h2>
+
+<p><font><font>Puoi nascondere l'elemento file {{HTMLElement ("input")}}, ammesso, brutto e presentare la tua interfaccia per aprire il selettore di file e visualizzare il file o i file selezionati dall'utente. </font><font>Puoi farlo stilando l'elemento di input con </font></font><code>display:none</code><font><font>e chiamando il metodo {{DOMxRef ("HTMLElement.click", "click ()")}} sull'elemento {{HTMLElement ("input")}}.</font></font></p>
+
+<p><font><font>Considera questo HTML:</font></font></p>
+
+<pre class="brush: html notranslate">&lt;input type="file" id="fileElem" multiple accept="image/*" style="display:none"&gt;
+&lt;button id="fileSelect"&gt;Select some files&lt;/button&gt;</pre>
+
+<p>The code that handles the <code>click</code> event can look like this:</p>
+
+<pre class="brush: js notranslate">const fileSelect = document.getElementById("fileSelect"),
+  fileElem = document.getElementById("fileElem");
+
+fileSelect.addEventListener("click", function (e) {
+  if (fileElem) {
+    fileElem.click();
+  }
+}, false);
+</pre>
+
+<p>You can style the new button for opening the file picker as you wish.</p>
+
+<h2 id="Using_a_label_element_to_trigger_a_hidden_file_input_element">Using a label element to trigger a hidden file input element</h2>
+
+<p>To allow opening the file picker without using JavaScript (the click() method), a {{HTMLElement("label")}} element can be used. Note that in this case the input element must not be hidden using <code>display: none</code> (nor <code>visibility: hidden</code>), otherwise the label would not be keyboard-accessible. Use the <a href="https://a11yproject.com/posts/how-to-hide-content/">visually-hidden technique</a> instead.</p>
+
+<p>Consider this HTML:</p>
+
+<pre class="brush: html notranslate">&lt;input type="file" id="fileElem" multiple accept="image/*" class="visually-hidden"&gt;
+&lt;label for="fileElem"&gt;Select some files&lt;/label&gt;</pre>
+
+<p>and this CSS:</p>
+
+<pre class="brush: css notranslate">.visually-hidden {
+  position: absolute !important;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  clip: rect(1px, 1px, 1px, 1px);
+}
+
+/* Separate rule for compatibility, :focus-within is required on modern Firefox and Chrome */
+input.visually-hidden:focus + label {
+  outline: thin dotted;
+}
+input.visually-hidden:focus-within + label {
+  outline: thin dotted;
+}
+</pre>
+
+<p>There is no need to add JavaScript code to call <code>fileElem.click()</code>. Also in this case you can style the label element as you wish. You need to provide a visual cue for the focus status of the hidden input field on its label, be it an outline as shown above, or background-color or box-shadow. (As of time of writing, Firefox doesn’t show this visual cue for <code>&lt;input type="file"&gt;</code> elements.)</p>
+
+<h2 id="Selecting_files_using_drag_and_drop">Selecting files using drag and drop</h2>
+
+<p>You can also let the user drag and drop files into your web application.</p>
+
+<p>The first step is to establish a drop zone. Exactly what part of your content will accept drops may vary depending on the design of your application, but making an element receive drop events is easy:</p>
+
+<pre class="brush: js notranslate">let dropbox;
+
+dropbox = document.getElementById("dropbox");
+dropbox.addEventListener("dragenter", dragenter, false);
+dropbox.addEventListener("dragover", dragover, false);
+dropbox.addEventListener("drop", drop, false);
+</pre>
+
+<p>In this example, we're turning the element with the ID <code>dropbox</code> into our drop zone. This is done by adding listeners for the {{event('dragenter')}}, {{event('dragover')}}, and {{event('drop')}} events.</p>
+
+<p>We don't actually need to do anything with the <code>dragenter</code> and <code>dragover</code> events in our case, so these functions are both simple. They just stop propagation of the event and prevent the default action from occurring:</p>
+
+<pre class="brush: js notranslate">function dragenter(e) {
+  e.stopPropagation();
+  e.preventDefault();
+}
+
+function dragover(e) {
+  e.stopPropagation();
+  e.preventDefault();
+}
+</pre>
+
+<p>The real magic happens in the <code>drop()</code> function:</p>
+
+<pre class="brush: js notranslate">function drop(e) {
+  e.stopPropagation();
+  e.preventDefault();
+
+  const dt = e.dataTransfer;
+  const files = dt.files;
+
+  handleFiles(files);
+}
+</pre>
+
+<p>Here, we retrieve the <code>dataTransfer</code> field from the event, pull the file list out of it, and then pass that to <code>handleFiles()</code>. From this point on, handling the files is the same whether the user used the <code>input</code> element or drag and drop.</p>
+
+<h2 id="Example_Showing_thumbnails_of_user-selected_images">Example: Showing thumbnails of user-selected images</h2>
+
+<p>Let's say you're developing the next great photo-sharing website and want to use HTML to display thumbnail previews of images before the user actually uploads them. You can establish your input element or drop zone as discussed previously and have them call a function such as the <code>handleFiles()</code> function below.</p>
+
+<pre class="brush: js notranslate">function handleFiles(files) {
+  for (let i = 0; i &lt; files.length; i++) {
+    const file = files[i];
+
+    if (!file.type.startsWith('image/')){ continue }
+
+    const img = document.createElement("img");
+    img.classList.add("obj");
+    img.file = file;
+    preview.appendChild(img); // Assuming that "preview" is the div output where the content will be displayed.
+
+    const reader = new FileReader();
+    reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
+    reader.readAsDataURL(file);
+  }
+}
+</pre>
+
+<p>Here our loop handling the user-selected files looks at each file's <code>type</code> attribute to see if its MIME type begins with the string "<code>image/</code>"). For each file that is an image, we create a new <code>img</code> element. CSS can be used to establish any pretty borders or shadows and to specify the size of the image, so that doesn't need to be done here.</p>
+
+<p>Each image has the CSS class <code>obj</code> added to it, making it easy to find in the DOM tree. We also add a <code>file</code> attribute to each image specifying the {{DOMxRef("File")}} for the image; this will let us fetch the images for actual upload later. We use {{DOMxRef("Node.appendChild()")}} to add the new thumbnail to the preview area of our document.</p>
+
+<p>Next, we establish the {{DOMxRef("FileReader")}} to handle asynchronously loading the image and attaching it to the <code>img</code> element. After creating the new <code>FileReader</code> object, we set up its <code>onload</code> function and then call <code>readAsDataURL()</code> to start the read operation in the background. When the entire contents of the image file are loaded, they are converted into a <code>data:</code> URL which is passed to the <code>onload</code> callback. Our implementation of this routine sets the <code>img</code> element's <code>src</code> attribute to the loaded image which results in the image appearing in the thumbnail on the user's screen.</p>
+
+<h2 id="Using_object_URLs">Using object URLs</h2>
+
+<p>The DOM {{DOMxRef("URL.createObjectURL()")}} and {{DOMxRef("URL.revokeObjectURL()")}} methods let you create simple URL strings that can be used to reference any data that can be referred to using a DOM {{DOMxRef("File")}} object, including local files on the user's computer.</p>
+
+<p>When you have a {{DOMxRef("File")}} object you'd like to reference by URL from HTML, you can create an object URL for it like this:</p>
+
+<pre class="brush: js notranslate">const objectURL = window.URL.createObjectURL(fileObj);</pre>
+
+<p>The object URL is a string identifying the {{DOMxRef("File")}} object. Each time you call {{DOMxRef("URL.createObjectURL()")}}, a unique object URL is created even if you've created an object URL for that file already. Each of these must be released. While they are released automatically when the document is unloaded, if your page uses them dynamically you should release them explicitly by calling {{DOMxRef("URL.revokeObjectURL()")}}:</p>
+
+<pre class="brush: js notranslate">URL.revokeObjectURL(objectURL);</pre>
+
+<h2 id="Example_Using_object_URLs_to_display_images">Example: Using object URLs to display images</h2>
+
+<p>This example uses object URLs to display image thumbnails. In addition, it displays other file information including their names and sizes.</p>
+
+<p>The HTML that presents the interface looks like this:</p>
+
+<pre class="brush: html notranslate">&lt;input type="file" id="fileElem" multiple accept="image/*" style="display:none"&gt;
+&lt;a href="#" id="fileSelect"&gt;Select some files&lt;/a&gt;
+&lt;div id="fileList"&gt;
+  &lt;p&gt;No files selected!&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<p>This establishes our file {{HTMLElement("input")}} element as well as a link that invokes the file picker (since we keep the file input hidden to prevent that less-than-attractive user interface from being displayed). This is explained in the section {{anch("Using hidden file input elements using the click() method")}}, as is the method that invokes the file picker.</p>
+
+<p>The <code>handleFiles()</code> method follows:</p>
+
+<pre class="brush: js notranslate">const fileSelect = document.getElementById("fileSelect"),
+    fileElem = document.getElementById("fileElem"),
+    fileList = document.getElementById("fileList");
+
+fileSelect.addEventListener("click", function (e) {
+  if (fileElem) {
+    fileElem.click();
+  }
+  e.preventDefault(); // prevent navigation to "#"
+}, false);
+
+fileElem.addEventListener("change", handleFiles, false);
+
+function handleFiles() {
+  if (!this.files.length) {
+    fileList.innerHTML = "&lt;p&gt;No files selected!&lt;/p&gt;";
+  } else {
+    fileList.innerHTML = "";
+    const list = document.createElement("ul");
+    fileList.appendChild(list);
+    for (let i = 0; i &lt; this.files.length; i++) {
+      const li = document.createElement("li");
+      list.appendChild(li);
+
+      const img = document.createElement("img");
+      img.src = URL.createObjectURL(this.files[i]);
+      img.height = 60;
+      img.onload = function() {
+        URL.revokeObjectURL(this.src);
+      }
+      li.appendChild(img);
+      const info = document.createElement("span");
+      info.innerHTML = this.files[i].name + ": " + this.files[i].size + " bytes";
+      li.appendChild(info);
+    }
+  }
+}
+</pre>
+
+<p>This starts by fetching the URL of the {{HTMLElement("div")}} with the ID <code>fileList</code>. This is the block into which we'll insert our file list, including thumbnails.</p>
+
+<p>If the {{DOMxRef("FileList")}} object passed to <code>handleFiles()</code> is <code>null</code>, we simply set the inner HTML of the block to display "No files selected!". Otherwise, we start building our file list, as follows:</p>
+
+<ol>
+ <li>A new unordered list ({{HTMLElement("ul")}}) element is created.</li>
+ <li>The new list element is inserted into the {{HTMLElement("div")}} block by calling its {{DOMxRef("Node.appendChild()")}} method.</li>
+ <li>For each {{DOMxRef("File")}} in the {{DOMxRef("FileList")}} represented by <code>files</code>:
+  <ol>
+   <li>Create a new list item ({{HTMLElement("li")}}) element and insert it into the list.</li>
+   <li>Create a new image ({{HTMLElement("img")}}) element.</li>
+   <li>Set the image's source to a new object URL representing the file, using {{DOMxRef("URL.createObjectURL()")}} to create the blob URL.</li>
+   <li>Set the image's height to 60 pixels.</li>
+   <li>Set up the image's load event handler to release the object URL since it's no longer needed once the image has been loaded. This is done by calling the {{DOMxRef("URL.revokeObjectURL()")}} method and passing in the object URL string as specified by <code>img.src</code>.</li>
+   <li>Append the new list item to the list.</li>
+  </ol>
+ </li>
+</ol>
+
+<p>Here is a live demo of the code above:</p>
+
+<p>{{EmbedLiveSample('Example_Using_object_URLs_to_display_images', '100%', '300px')}}</p>
+
+<h2 id="Example_Uploading_a_user-selected_file">Example: Uploading a user-selected file</h2>
+
+<p>Another thing you might want to do is let the user upload the selected file or files (such as the images selected using the previous example) to a server. This can be done asynchronously very easily.</p>
+
+<h3 id="Creating_the_upload_tasks">Creating the upload tasks</h3>
+
+<p>Continuing with the code that built the thumbnails in the previous example, recall that every thumbnail image is in the CSS class <code>obj</code> with the corresponding {{DOMxRef("File")}} attached in a <code>file</code> attribute. This allows us to select all of the images the user has chosen for uploading using {{DOMxRef("Document.querySelectorAll()")}}, like this:</p>
+
+<pre class="brush: js notranslate">function sendFiles() {
+  const imgs = document.querySelectorAll(".obj");
+
+  for (let i = 0; i &lt; imgs.length; i++) {
+    new FileUpload(imgs[i], imgs[i].file);
+  }
+}
+</pre>
+
+<p>Line 2 fetches a {{DOMxRef("NodeList")}}, called <code>imgs</code>, of all the elements in the document with the CSS class <code>obj</code>. In our case, these will be all of the image thumbnails. Once we have that list, it's trivial to go through it and create a new <code>FileUpload</code> instance for each. Each of these handles uploading the corresponding file.</p>
+
+<h3 id="Handling_the_upload_process_for_a_file">Handling the upload process for a file</h3>
+
+<p>The <code>FileUpload</code> function accepts two inputs: an image element and a file from which to read the image data.</p>
+
+<pre class="brush: js notranslate">function FileUpload(img, file) {
+  const reader = new FileReader();
+  this.ctrl = createThrobber(img);
+  const xhr = new XMLHttpRequest();
+  this.xhr = xhr;
+
+  const self = this;
+  this.xhr.upload.addEventListener("progress", function(e) {
+        if (e.lengthComputable) {
+          const percentage = Math.round((e.loaded * 100) / e.total);
+          self.ctrl.update(percentage);
+        }
+      }, false);
+
+  xhr.upload.addEventListener("load", function(e){
+          self.ctrl.update(100);
+          const canvas = self.ctrl.ctx.canvas;
+          canvas.parentNode.removeChild(canvas);
+      }, false);
+  xhr.open("POST", "http://demos.hacks.mozilla.org/paul/demos/resources/webservices/devnull.php");
+  xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');
+  reader.onload = function(evt) {
+    xhr.send(evt.target.result);
+  };
+  reader.readAsBinaryString(file);
+}
+</pre>
+
+<p>The <code>FileUpload()</code> function shown above creates a throbber, which is used to display progress information, and then creates an {{DOMxRef("XMLHttpRequest")}} to handle uploading the data.</p>
+
+<p>Before actually transferring the data, several preparatory steps are taken:</p>
+
+<ol>
+ <li>The <code>XMLHttpRequest</code>'s upload <code>progress</code> listener is set to update the throbber with new percentage information so that as the upload progresses the throbber will be updated based on the latest information.</li>
+ <li>The <code>XMLHttpRequest</code>'s upload <code>load</code> event handler is set to update the throbber progress information to 100% to ensure the progress indicator actually reaches 100% (in case of granularity quirks during the process). It then removes the throbber since it's no longer needed. This causes the throbber to disappear once the upload is complete.</li>
+ <li>The request to upload the image file is opened by calling <code>XMLHttpRequest</code>'s <code>open()</code> method to start generating a POST request.</li>
+ <li>The MIME type for the upload is set by calling the <code>XMLHttpRequest</code> function <code>overrideMimeType()</code>. In this case, we're using a generic MIME type; you may or may not need to set the MIME type at all depending on your use case.</li>
+ <li>The <code>FileReader</code> object is used to convert the file to a binary string.</li>
+ <li>Finally, when the content is loaded the <code>XMLHttpRequest</code> function <code>send()</code> is called to upload the file's content.</li>
+</ol>
+
+<h3 id="Asynchronously_handling_the_file_upload_process">Asynchronously handling the file upload process</h3>
+
+<p>This example, which uses PHP on the server side and JavaScript on the client side, demonstrates asynchronous uploading of a file.</p>
+
+<pre class="brush: js notranslate">&lt;?php
+if (isset($_FILES['myFile'])) {
+    // Example:
+    move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/" . $_FILES['myFile']['name']);
+    exit;
+}
+?&gt;&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+    &lt;title&gt;dnd binary upload&lt;/title&gt;
+    &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
+    &lt;script type="application/javascript"&gt;
+        function sendFile(file) {
+            const uri = "/index.php";
+            const xhr = new XMLHttpRequest();
+            const fd = new FormData();
+
+            xhr.open("POST", uri, true);
+            xhr.onreadystatechange = function() {
+                if (xhr.readyState == 4 &amp;&amp; xhr.status == 200) {
+                    alert(xhr.responseText); // handle response.
+                }
+            };
+            fd.append('myFile', file);
+            // Initiate a multipart/form-data upload
+            xhr.send(fd);
+        }
+
+        window.onload = function() {
+            const dropzone = document.getElementById("dropzone");
+            dropzone.ondragover = dropzone.ondragenter = function(event) {
+                event.stopPropagation();
+                event.preventDefault();
+            }
+
+            dropzone.ondrop = function(event) {
+                event.stopPropagation();
+                event.preventDefault();
+
+                const filesArray = event.dataTransfer.files;
+                for (let i=0; i&lt;filesArray.length; i++) {
+                    sendFile(filesArray[i]);
+                }
+            }
+        }
+    &lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+    &lt;div&gt;
+        &lt;div id="dropzone" style="margin:30px; width:500px; height:300px; border:1px dotted grey;"&gt;Drag &amp; drop your file here...&lt;/div&gt;
+    &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Example_Using_object_URLs_to_display_PDF">Example: Using object URLs to display PDF</h2>
+
+<p>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.</p>
+
+<p>In Firefox, to have the PDF appear embedded in the iframe (rather than proposed as a downloaded file), the preference <code>pdfjs.disabled</code> must be set to <code>false</code> {{non-standard_inline()}}.</p>
+
+<pre class="brush: html notranslate">&lt;iframe id="viewer"&gt;
+</pre>
+
+<p>And here is the change of the <code>src</code> attribute:</p>
+
+<pre class="brush: js notranslate">const obj_url = URL.createObjectURL(blob);
+const iframe = document.getElementById('viewer');
+iframe.setAttribute('src', obj_url);
+URL.revokeObjectURL(obj_url);</pre>
+
+<h2 id="Example_Using_object_URLs_with_other_file_types">Example: Using object URLs with other file types</h2>
+
+<p>You can manipulate files of other formats the same way. Here is how to preview uploaded video:</p>
+
+<pre class="brush: js notranslate">const video = document.getElementById('video');<font><font>
+const obj_url = URL.createObjectURL (blob);</font></font><font><font>
+video.src = obj_url;</font></font><font><font>
+Video.play ();</font></font><font><font>
+URL.revokeObjectURL (obj_url);</font></font></pre>
+
+<h2 id="specificazioni"><font><font>specificazioni</font></font></h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><font><font>specificazione</font></font></th>
+   <th scope="col"><font><font>Stato</font></font></th>
+   <th scope="col"><font><font>Commento</font></font></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><font><font>{{SpecName ('HTML WHATWG', 'numero-stato.html # concetto-input-tipo-file-selezionato', 'Stato caricamento file')}}</font></font></td>
+   <td><font><font>{{Spec2 ('HTML WHATWG')}}</font></font></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><font><font>{{SpecName ('File API')}}</font></font></td>
+   <td><font><font>{{Spec2 ('API file')}}</font></font></td>
+   <td><font><font>Definizione iniziale</font></font></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Guarda_anche"><font><font>Guarda anche</font></font></h2>
+
+<ul>
+ <li><font><font>{{DOMxRef ( "File")}}</font></font></li>
+ <li><font><font>{{DOMxRef ( "FileList")}}</font></font></li>
+ <li><font><font>{{DOMxRef ( "FileReader")}}</font></font></li>
+ <li><font><font>{{DOMxRef ( "URL")}}</font></font></li>
+ <li><font><font>{{DOMxRef ( "XMLHttpRequest")}}</font></font></li>
+ <li><a href="/en/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="En / Using XMLHttpRequest"><font><font>Utilizzando XMLHttpRequest</font></font></a></li>
+</ul>