Summary  
This chapter explains how to use the HTML input type="file" element together with JavaScript’s File API to programmatically access and manipulate user-selected files (e.g., reading properties, previewing content, or processing data) before any upload.  

General domain of usage  
Client-side file upload and processing in web applications.

When you need to let users select files—such as images, documents, or videos—directly from their device, the file input element is your essential tool. HTML provides the `input type="file"` element, which opens a file picker dialog for users. However, to actually work with the selected files in your application, you must use the **File API** in JavaScript. The **File API** gives you programmatic access to the files chosen by the user, allowing you to read their properties, preview content, or process the files before uploading them to a server.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJzdHlsZS5jc3MiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGgyPlNlbGVjdCBmaWxlcyB0byB1cGxvYWQ8L2gyPgogICAgPGlucHV0IHR5cGU9ImZpbGUiIGlkPSJmaWxlSW5wdXQiIG11bHRpcGxlIC8+CiAgICA8ZGl2IGlkPSJmaWxlTGlzdCI+PC9kaXY+CgogICAgPHNjcmlwdCBzcmM9InNjcmlwdC5qcyI+PC9zY3JpcHQ+CiAgPC9ib2R5Pgo8L2h0bWw+

I2ZpbGVMaXN0IHsKICBtYXJnaW4tdG9wOiAxNXB4OwogIHBhZGRpbmc6IDEwcHg7CiAgYm9yZGVyOiAxcHggc29saWQgI2NjYzsKICB3aWR0aDogMzAwcHg7CiAgZm9udC1mYW1pbHk6IEFyaWFsLCBzYW5zLXNlcmlmOwp9Ci5maWxlLWl0ZW0gewogIG1hcmdpbi1ib3R0b206IDhweDsKICBwYWRkaW5nOiA2cHg7CiAgYmFja2dyb3VuZDogI2YwZjBmMDsKICBib3JkZXItcmFkaXVzOiA0cHg7Cn0=

Y29uc3QgZmlsZUlucHV0ID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoImZpbGVJbnB1dCIpOwpjb25zdCBmaWxlTGlzdCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCJmaWxlTGlzdCIpOwoKZmlsZUlucHV0LmFkZEV2ZW50TGlzdGVuZXIoImNoYW5nZSIsIGZ1bmN0aW9uIChldmVudCkgewogIGNvbnN0IGZpbGVzID0gZXZlbnQudGFyZ2V0LmZpbGVzOwoKICBmaWxlTGlzdC5pbm5lckhUTUwgPSAiIjsKCiAgZm9yIChsZXQgaSA9IDA7IGkgPCBmaWxlcy5sZW5ndGg7IGkrKykgewogICAgY29uc3QgZmlsZSA9IGZpbGVzW2ldOwoKICAgIGNvbnN0IGRpdiA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoImRpdiIpOwogICAgZGl2LmNsYXNzTmFtZSA9ICJmaWxlLWl0ZW0iOwogICAgZGl2LmlubmVySFRNTCA9IGA8cD5GaWxlIG5hbWU6ICR7ZmlsZS5uYW1lfTwvcD48cD5GaWxlIHR5cGU6ICgkewogICAgICBmaWxlLnR5cGUgfHwgInVua25vd24gdHlwZSIKICAgIH0pPC9wPmA7CgogICAgZmlsZUxpc3QuYXBwZW5kQ2hpbGQoZGl2KTsKICB9Cn0pOw==

What does the File API allow you to do in a web application?

Explore the most useful web APIs. Learn to work with drag and drop, clipboard access, fullscreen mode, storage APIs, file uploads, and geolocation to create interactive and engaging web features. Reinforce your skills with hands-on mini projects that put each API into practice.

Gain a clear understanding of what modern HTML APIs offer and how they unlock rich interactive capabilities in the browser. Explore foundational concepts and experiment with the Drag and Drop API to build your first interactive elements.

Learn how to access and control the clipboard to read and write user data safely. Then explore the Fullscreen API to create immersive experiences and handle fullscreen state changes with ease.

Learn to work with some of the most powerful browser APIs for managing data and interacting with the user's device. Store information persistently with Web Storage, handle file uploads and previews directly in the browser, and access geolocation data to build personalized, context-aware experiences.

Handling File Inputs