Compare Revisions

Using files from web applications

Change Revisions

Revision 333901:

Revision 333901 by madarche on

Revision 333903:

Revision 333903 by madarche on

Title:
Using files from web applications
Using files from web applications
Slug:
Using_files_from_web_applications
Using_files_from_web_applications
Tags:
"Files", "ajax upload", "upload", "MakeBrowserAgnostic", "HTML5"
"Files", "ajax upload", "upload", "MakeBrowserAgnostic", "HTML5"
Content:

Revision 333901
Revision 333903
n78    </p>n
79    <h2 id="Using_object_URLs">
80      Using object URLs
81    </h2>
82    <p>
83      Gecko 2.0 {{ geckoRelease("2.0") }} introduces support for 
>the DOM {{ domxref("window.URL.createObjectURL()") }} and {{ domx 
>ref("window.URL.revokeObjectURL()") }} methods. These let you cre 
>ate simple URL strings that can be used to reference any data tha 
>t can be referred to using a DOM {{ domxref("File") }} object, in 
>cluding local files on the user's computer. 
84    </p>
85    <p>
86      When you have a {{ domxref("File") }} object you'd like to 
>reference by URL from HTML, you can create an object URL for it l 
>ike this: 
87    </p>
88    <pre>
89<code>var objectURL = window.URL.createObjectURL(fileObj);</code>
90</pre>
91    <p>
92      The object URL is a string identifying the {{ domxref("File
>") }} object. Each time you call {{ domxref("window.URL.createObj 
>ectURL()") }}, a unique object URL is created, even if you've cre 
>ated an object URL for that file already. Each of these must be r 
>eleased. While they are released automatically when the document  
>is unloaded, if your page uses them dynamically, you should relea 
>se them explicitly by calling {{ domxref("window.URL.revokeObject 
>URL()") }}: 
93    </p>
94    <pre>
95<code>window.URL.revokeObjectURL(objectURL);</code>
96</pre>
97    <h2 id="Using_hidden_file_input_elements_using_the_click()_me
>thod"> 
98      Using hidden file input elements using the click() method
99    </h2>
100    <p>
101      Starting in Gecko 2.0 {{ geckoRelease("2.0") }}, you can hi
>de the admittedly ugly file {{ HTMLElement("input") }} element an 
>d present your own interface for opening the file picker and disp 
>laying which file or files the user has selected. You can do this 
> by styling the input element with <code>display:none</code> and  
>calling the {{ domxref("element.click","click()") }} method on th 
>e {{ HTMLElement("input") }} element. 
102    </p>
103    <p>
104      Consider this HTML:
105    </p>
106    <pre>
107<code>&lt;input type="file" id="fileElem" multiple accept="image/
>*" style="display:none" onchange="handleFiles(this.files)"&gt; 
108&lt;a href="#" id="fileSelect"&gt;Select some files&lt;/a&gt;</co
>de> 
109</pre>
110    <p>
111      The code that handles the <code>click</code> event can look
> like this: 
112    </p>
113    <pre class="brush: js">
114var fileSelect = document.getElementById("fileSelect"),
115  fileElem = document.getElementById("fileElem");
116 
117fileSelect.addEventListener("click", function (e) {
118  if (fileElem) {
119    fileElem.click();
120  }
121  e.preventDefault(); // prevent navigation to "#"
122}, false);
123</pre>
124    <p>
125      Obviously you can style the new button for opening the file
> picker as you wish. 
126    </p>
127    <h2 id="Selecting_files_using_drag_and_drop">
128      Selecting files using drag and drop
129    </h2>
130    <p>
131      You can also let the user drag and drop files into your web
> application. 
132    </p>
133    <p>
134      The first step is to establish a drop zone. Exactly what pa
>rt of your content will accept drops may vary depending on the de 
>sign of your application, but making an element receive drop even 
>ts is easy: 
135    </p>
136    <pre class="brush: js">
137var dropbox;
138 
139dropbox = document.getElementById("dropbox");
140dropbox.addEventListener("dragenter", dragenter, false);
141dropbox.addEventListener("dragover", dragover, false);
142dropbox.addEventListener("drop", drop, false);
143</pre>
144    <p>
145      In this example, we're turning the element with the ID <cod
>e>dropbox</code> into our drop zone. This is done by adding liste 
>ners for the <code>dragenter</code>, <code>dragover</code>, and < 
>code>drop</code> events. 
146    </p>
147    <p>
148      We don't actually need to do anything with the <code>dragen
>ter</code> and <code>dragover</code> events in our case, so these 
> functions are both simple. They just stop propagation of the eve 
>nt and prevent the default action from occurring: 
149    </p>
150    <pre class="brush: js">
151function dragenter(e) {
152  e.stopPropagation();
153  e.preventDefault();
154}
155 
156function dragover(e) {
157  e.stopPropagation();
158  e.preventDefault();
159
160</pre>
161    <p>
162      The real magic happens in the <code>drop()</code> function:
163    </p>
164    <pre class="brush: js">
165function drop(e) {
166  e.stopPropagation();
167  e.preventDefault();
168 
169  var dt = e.dataTransfer;
170  var files = dt.files;
171 
172  handleFiles(files);
173}
174</pre>
175    <p>
176      Here, we retrieve the <code>dataTransfer</code> field from 
>the event, then pull the file list out of it, passing that to <co 
>de>handleFiles()</code>. From this point on, handling the files i 
>s the same whether the user used the <code>input</code> element o 
>r drag and drop. 
nn163    <h2 id="Using_hidden_file_input_elements_using_the_click()_me
 >thod">
164      Using hidden file input elements using the click() method
165    </h2>
166    <p>
167      Starting in Gecko 2.0 {{ geckoRelease("2.0") }}, you can hi
 >de the admittedly ugly file {{ HTMLElement("input") }} element an
 >d present your own interface for opening the file picker and disp
 >laying which file or files the user has selected. You can do this
 > by styling the input element with <code>display:none</code> and 
 >calling the {{ domxref("element.click","click()") }} method on th
 >e {{ HTMLElement("input") }} element.
168    </p>
169    <p>
170      Consider this HTML:
171    </p>
172    <pre>
173<code>&lt;input type="file" id="fileElem" multiple accept="image/
 >*" style="display:none" onchange="handleFiles(this.files)"&gt;
174&lt;a href="#" id="fileSelect"&gt;Select some files&lt;/a&gt;</co
 >de>
175</pre>
176    <p>
177      The code that handles the <code>click</code> event can look
 > like this:
178    </p>
179    <pre class="brush: js">
180var fileSelect = document.getElementById("fileSelect"),
181  fileElem = document.getElementById("fileElem");
182 
183fileSelect.addEventListener("click", function (e) {
184  if (fileElem) {
185    fileElem.click();
186  }
187  e.preventDefault(); // prevent navigation to "#"
188}, false);
189</pre>
190    <p>
191      Obviously you can style the new button for opening the file
 > picker as you wish.
192    </p>
193    <h2 id="Selecting_files_using_drag_and_drop">
194      Selecting files using drag and drop
195    </h2>
196    <p>
197      You can also let the user drag and drop files into your web
 > application.
198    </p>
199    <p>
200      The first step is to establish a drop zone. Exactly what pa
 >rt of your content will accept drops may vary depending on the de
 >sign of your application, but making an element receive drop even
 >ts is easy:
201    </p>
202    <pre class="brush: js">
203var dropbox;
204 
205dropbox = document.getElementById("dropbox");
206dropbox.addEventListener("dragenter", dragenter, false);
207dropbox.addEventListener("dragover", dragover, false);
208dropbox.addEventListener("drop", drop, false);
209</pre>
210    <p>
211      In this example, we're turning the element with the ID <cod
 >e>dropbox</code> into our drop zone. This is done by adding liste
 >ners for the <code>dragenter</code>, <code>dragover</code>, and <
 >code>drop</code> events.
212    </p>
213    <p>
214      We don't actually need to do anything with the <code>dragen
 >ter</code> and <code>dragover</code> events in our case, so these
 > functions are both simple. They just stop propagation of the eve
 >nt and prevent the default action from occurring:
215    </p>
216    <pre class="brush: js">
217function dragenter(e) {
218  e.stopPropagation();
219  e.preventDefault();
220}
221 
222function dragover(e) {
223  e.stopPropagation();
224  e.preventDefault();
225
226</pre>
227    <p>
228      The real magic happens in the <code>drop()</code> function:
229    </p>
230    <pre class="brush: js">
231function drop(e) {
232  e.stopPropagation();
233  e.preventDefault();
234 
235  var dt = e.dataTransfer;
236  var files = dt.files;
237 
238  handleFiles(files);
239}
240</pre>
241    <p>
242      Here, we retrieve the <code>dataTransfer</code> field from 
 >the event, then pull the file list out of it, passing that to <co
 >de>handleFiles()</code>. From this point on, handling the files i
 >s the same whether the user used the <code>input</code> element o
 >r drag and drop.
243    </p>
nn280    <h2 id="Using_object_URLs">
281      Using object URLs
282    </h2>
283    <p>
284      Gecko 2.0 {{ geckoRelease("2.0") }} introduces support for 
 >the DOM {{ domxref("window.URL.createObjectURL()") }} and {{ domx
 >ref("window.URL.revokeObjectURL()") }} methods. These let you cre
 >ate simple URL strings that can be used to reference any data tha
 >t can be referred to using a DOM {{ domxref("File") }} object, in
 >cluding local files on the user's computer.
285    </p>
286    <p>
287      When you have a {{ domxref("File") }} object you'd like to 
 >reference by URL from HTML, you can create an object URL for it l
 >ike this:
288    </p>
289    <pre>
290<code>var objectURL = window.URL.createObjectURL(fileObj);</code>
291</pre>
292    <p>
293      The object URL is a string identifying the {{ domxref("File
 >") }} object. Each time you call {{ domxref("window.URL.createObj
 >ectURL()") }}, a unique object URL is created, even if you've cre
 >ated an object URL for that file already. Each of these must be r
 >eleased. While they are released automatically when the document 
 >is unloaded, if your page uses them dynamically, you should relea
 >se them explicitly by calling {{ domxref("window.URL.revokeObject
 >URL()") }}:
294    </p>
295    <pre>
296<code>window.URL.revokeObjectURL(objectURL);</code>
297</pre>
t315      This establishes our file {{ HTMLElement("input") }} element315      This establishes our file {{ HTMLElement("input") }} elemen
>t, as well as a link that invokes the file picker, since we keep >t, as well as a link that invokes the file picker, since we keep 
>the file input hidden to prevent that less-than-attractive UI fro>the file input hidden to prevent that less-than-attractive UI fro
>m being displayed. This is explained above in the section {{ anch>m being displayed. This is explained in the section {{ anch("Usin
>("Using hidden file input elements using the click() method") }},>g hidden file input elements using the click() method") }}, as is
> as is the method that invokes the file picker.> the method that invokes the file picker.

Back to History